Collections | The Blog Pros

May 9, 2019

Modern CSS Frameworks to Speed up the Design Process

Designing a website from scratch can be a very time-consuming experience. And while web designers always welcome shortcuts, maintaining quality is still a top priority.

That’s the beauty of a good CSS framework. It can provide you with a comprehensive set of responsive layouts and UI elements. This helps to get your projects off to a quick start, while still allowing plenty of room for customization.

Today, we’ll introduce you to a selection of the top modern CSS frameworks available. Some you may have heard of, while others may be completely new to you. But each offers a variety of useful, cutting-edge features that can improve your workflow. Let’s get started!

Frameworks Focused on CSS

Let’s start with some frameworks that are mainly focused on CSS. You’ll find all types of layouts and UI elements to form the basis of your project. Some may even include a bit of JavaScript to help with more complex features.

Tailwind CSS

What separates Tailwind from many other frameworks is that it doesn’t come with any prebuilt UI components. Instead, it’s focused more on utility, with CSS classes that give you a head start on building out a site. Elements such as sizing, color and positioning are key here.

Bulma

Built around CSS Flexbox, Bulma is a free and open source framework. Inside you’ll find a number of easy-to-customize UI elements. It’s modular, meaning you can import just the elements you want – like columns or buttons.

Picnic CSS

Picnic CSS has been developed to be super lightweight and comes in under 10KB when compressed. It features Flexbox-based grid layouts, along with plenty of UI elements to get your project off to a quick start. You’ll even find a simple navigation bar and modal windows.

Materialize

Fans of Google’s Material Design will want to check out Materialize. This framework is based on the popular design language and includes a ton of CSS and JavaScript-based elements. There is also a focus on microinteractions to make the UI more user-friendly. It’s also worth noting that Materialize features support for custom themes as well.

Pure.css

Coming in at just 3.8KB when compressed, Pure.css is centered around a mobile-first philosophy. And it’s modular, so you can import just the element packages you want to use. There are also a number of common layouts that you can download and install.

Base

Base is a modular framework that, as its name indicates, aims to provide a solid foundation for your design projects. It’s been built on top of Normalize.css and provides basic styles that are easy to customize. You won’t find anything too fancy here, but that’s the point!

mini.css

With mini.css, you get a package that looks to strike a balance between being lightweight and packed with features. And it really hits the mark, coming in at around 10KB compressed while boasting a fairly large number of UI elements and layouts. There’s also a good bit of documentation, so you can really dive in and see how everything works.

Concise CSS

Urging designers to “give up the bloat”, Concise CSS offers a utility-based framework to get you off to a fast start. Need UI elements? You can add those in via a separate kit.

Mobi.css

Mobi.css is tiny (2.6KB gzipped) and is focused mainly on speed for mobile users. However, there’s room for growth with a built-in theme and plugin system. If the basic styles don’t provide everything you’re looking for, it’s possible to build on top of the framework in a modular way.

Spectre.css

Billed as being “Lightweight, Responsive, Modern”, Spectre.css is a Flexbox-based framework. Included you’ll find some basic layout, UI and typography styles. Plus, there are a number of functional components (accordions, popovers, tabs, etc.) that have been built with pure CSS. Overall there’s a nice balance achieved here.

Frameworks That Go Beyond CSS

There are scenarios that call for a more robust framework – and the selections below will do the job. They not only offer plenty of CSS-based elements, but you’ll also find healthy doses of features like HTML and JavaScript. In some ways, it’s almost like starting out with a semi-complete template that you can customize to fit your needs.

Bootstrap

Created by Twitter, Bootstrap is pretty much everywhere these days. But that’s because it’s well-maintained and offers a massive library of prebuilt features. And while you can roll with the default setup, Bootstrap is also quite extensible. Adding themes or custom components to the mix will help personalize the UI even further.

Foundation

Foundation is library of modular components that add plenty of fit and finish to your projects. There are a wide array of options here – everything from responsive layouts to animation. And that’s not even scratching the surface of what’s available. Foundation also has its own JavaScript plugin API. Last but not least, the framework comes with ARIA attributes and roles for building sites with accessibility in mind.

Semantic UI

Sometimes, frameworks can include CSS class names that make sense only to their original developer. Semantic UI looks to change that narrative by using natural language. The logic is easy to follow and should make for quicker development. Beyond language, you’ll find over 3,000 theming variables – all of which you can edit or remove, depending on need. In all, there are tons of layout and UI possibilities here.

Build It Better with a Framework

Getting your project off the ground takes a lot of work – that’s why frameworks exist. They handle some of that heavy lifting for us and provide the basis for everything that comes after.

The ability to integrate a common set of layouts and UI elements allows us to better focus on content. While more robust frameworks contain all manner of extras like JavaScript and page templates to help us go even further.

Whatever type of head start you’re looking for, it’s likely that one of the selections above will be the perfect fit.

April 24, 2019

Tools and Guides for Web Design Accessibility

Fifteen years ago, web accessibility wasn’t a thought in many designers’ minds. Online standards did exist as far back as 1996. But they were followed much less often than they are now, leaving many struggling just to use the internet.

Over the past ten years, the web has made huge strides in making sites accessible. But it’s up to you, the designers and developers, to optimize your own websites. Not sure where to begin? These tools and guides for web accessibility will help you design a better web.

Introduction to Web Accessibility

What is web accessibility, why should you implement it, and – most importantly – how can you do so? This invaluable resource introduces you to the basics of accessibility and can help you get started in optimizing your site.

The A11Y Project

Accessibility isn’t an easy topic to broach. With dozens of standards and hours of reading material, some people just don’t bother. The Accessibility Project aims to make the topic much more approachable, with easy-to-read articles, bite-sized tips, and plenty of helpful guides.

Contrast

High contrast colors are very important for those with visual impairments. There are tools to check your site’s color contrast, but that disrupts your design flow. This macOS app scores colors instantly. No more guessing or spending minutes inputting hex codes.

Stark

What if there was a tool that let you design with accessibility in mind from the beginning? Stark is an Adobe XD and Sketch plugin that does just that. Check contrast, run colorblind simulations, and get quick color suggestions. Now you can create a site that’s beautiful and accessible even during the mockup phase.

tota11y

Tota11y is an extremely useful tool that activates from your browser bookmarks and notifies you of accessibility violations on a page. It’s open source and comes with many plugins that all detect a range of issues. Activate it on your site and see if you pass!

Accessible Color Matrix

Picking a palette? This tool shows you how your palette will work in action, and notes when it doesn’t meet the contrast requirements. Now no one will struggle to read text on your site.

WAVE Web Accessibility Tool

WAVE is a webpage checker that runs a page through a variety of standards, reporting back errors, alerts, and correctly implemented features in an interactive panel. While it’s no replacement for human testing, it can help set you on the right design path.

Web Accessibility Checker

This accessibility checker reports issues on a page in a simple list segmented by known, likely, and possible problems. This one also comes with extra features, like the ability to upload or paste an HTML file. You can also check against different standards!

HTML5 Accessibility

Wondering what accessibility features are supported by major browsers? This nifty resource details info about individual elements and how they test for support by browsers.

18F Accessibility Guide

This is a fantastic collection of resources, guides, and articles about web accessibility. If you need even more reading material, start here! It’s also a great source of testing tools for businesses.

AccessLint

GitHub user? This accessibility checker automatically detects and points out violations, simple as that. It also re-reviews code changes to let you know if you’ve really fixed the issue. For open source projects it’s totally free, but you’ll need a monthly subscription if you run a private project.

Lighthouse

Lighthouse is an advanced tool available right from Google Chrome’s developer tools. Along with performance issues it also checks for accessibility errors. You can run it from Chrome, the command line, or as a Node module.

Making the Web More Accessible

Nearly 1 in 5 people in the US have a disability. 3.2 million Americans are visually impaired, while 8.2 million have vision problems, and that number is only growing. You should do your best to follow accessibility standards, so that everyone can browse your site without having to contend with garbled screen reader output, difficulty reading, and headaches.

Something as simple as adding alt text to images and increasing contrast can make a huge difference to your disabled users, but there’s always more you can do. Don’t make accessibility an afterthought.

April 17, 2019

Inspiring One-Page Portfolio Websites

If you’re looking for a great way to show off your skills, have you considered a one-page portfolio? They’re concise and to the point, which is good for potential employers who may be short on time.

And in a smaller sandbox, you have more reign to creatively show off your design expertise. One-page portfolios tend to have some of the most interesting and well-made layouts in web design. With a single page, you can make your site less like a static webpage and more like an experience sure to thrill anyone who comes across it.

Looking to create your own one-page portfolio? Here’s a bit of inspiration from some of the best designers and developers online!

Owltastic

With a charming duotone palette and beautiful starry space theme, this is one fantastic example of a one-page site. There’s plenty of links to case studies, past projects, and the designer’s social media accounts. Frequent use of a call to action leading to the contact form means that clients won’t ever have to scroll far to send a message.

Gordils & Willis

This portfolio wastes no time at all in diving into the project showcase. As you scroll, you’ll get to see various pages, logos, and parts of the UI that were designed for each website or app. If you’ve seen enough, just use the menu to snap to the bottom, or click the hovering email button that’s always on the left.

BRNDMKRS

Big ideas need a big website, and this full width page features huge typography, large videos, and full screen images. There are even a few interactive elements, like a service checklist that lets you see an estimated cost for what you want.

Ollie

Bold and dark design are what this portfolio is all about. The black background makes the more colorful images pop, and the custom cursor is a nice touch. This one is a good example of an image-focused portfolio without too much text.

Aristide Benoist

Gigantic text is certainly one way to grab attention. Once you’re interested and start scrolling down, you’re immediately introduced to the developer and his work. Hover the image and you’ll get a taste of this dev’s experience in interactive design.

Portfolio of Oliver Gareis

Oliver Gareis’ portfolio opens with a brief about and awards section before getting right into the portfolio. Each project includes a brief description of what the designer was going for, showing off his expertise. There’s quite a bit of content, but you can use the sticky header to scroll right to the contact info at any time.

Kevin Dunbar

One of the best parts of this portfolio is the bright white design, accentuated by a single splash of color that strategically highlights certain areas. The red draws attention to banners, links, and contact info against the white and gray background. Meanwhile, the portfolio section uses animations to the same effect.

Unlikely

The moment you enter this site, you’re plunged into a page of striking animations that are impossible to ignore. Text flies dramatically to your cursor, loading screens shake, and project videos play in the background. Unlikely makes a bold statement from the very beginning.

Green Chameleon

On sites like this, it’s easy to forget you’re on a webpage. Animations play and hovering images ripple and distort as you scroll. It’s more like exploring an art gallery than visiting a website.

Amazing One-Page Designs

A one-page website is a bit like a business card. You need to explain who you are, what you do, and why an employer should choose you, all in a small amount of space.

It takes a lot of skill and design expertise to build something that gets the point across while leaving room for inspiring design, but these people pulled it off perfectly. Now it’s your turn to create your own inspiring one-page portfolio.

April 15, 2019

Free Illustration Sources for Your Design Projects

For web and graphic designers, purchasing illustrations for a project can be expensive. That extra unique touch of custom artwork is often worth the price, but what if it’s not in your budget or vision?

Whether you just need placeholder illustrations, or aren’t planning on purchasing expensive commissions at all, you don’t have to settle for clip art. There are plenty of beautiful, free illustrations out there, fully available for use in any project. We’ve compiled a few sources here. Icons, art, and vectors; anything you need, you’ll find it.

Absurd Design

Looking for illustrations that are weird, imperfect, and human? Absurd Design has beautiful artwork that looks like it comes from a surrealist painting. For free, you get eleven black and white designs in PNG format. They’re free for use in personal and commercial projects. You can also pay a monthly fee to get colored versions, SVG vectors, and even more great artwork.

unDraw

If you need some stylish vector illustrations with a strong focus on people and technology, unDraw has hundreds of images that are just your taste. Tech-focused websites or graphics will find plenty of material here, but there’s a little something for everyone.

And the neatest feature: use the drop-down color picker at the top of the screen to customize the main colors to match your brand!

DrawKit

These beautiful modern icons would look great in any project. There are dozens of illustrations covering a variety of topics, each in black and white or color. It’s easy to edit them in any vector editor, and they’re available for any type of project. You can also purchase a pack of 5 premium illustrations, or a kit of 100+ components to mix and match into your own unique image.

365cons

365 cute, minimalist icons, available for use via the MIT license. Each icon comes in SVG and PNG form, so you can use them anywhere. And each icon related to the artist’s life that day in some way, so you’ll find all sorts of stuff!

Streamline Illustrations

How does 50 colorful, cartoony icons available for commercial use sound? People, objects, and technology are all represented here. Each icon comes with color, duotone, and line art versions – and in six different file formats! If you like those, you can also purchase premium packs or the whole set.

You can also install 240 totally free LGBT vectors on top of this, so that makes nearly 300 free icons from this site!

Ouch

16 different art styles covering hundreds of illustrations sorted by subject – and all you need to do is link back. These icons were made for the non-illustrating designers out there looking to class up those empty webpages.

Purchasing a subscription gets you access to vector files, and you won’t need to link back.

Bottts

Sketch App users, try this awesome free library. Mix and match cartoon robot parts to create your own bot, with head and body pieces available. Color however you want, and use as icons, in graphics, or whatever project you want – even if it’s commercial. No two bots look the same.

Beautiful, Free Artwork

A good set of illustrations can really make a design stand out, be it a website or a graphic piece. While it’s best to hire an artist if you want a totally unique design, using free illustrations can still give you the look you’re going for without costing a ton of money. Which of these resources do you plan on using in your next project?

April 9, 2019

APEX_COLLECTION: APEX’s Super Power!

Apex Collections (APEX_COLLECTION) is a package that comes with Oracle Apex and is one of the most important features that comes with Oracle APEX. It can be used in many ways for different purposes, but in general, you can think of Apex Collection as a temporary space to store complex data Types — non-scalar — for instance, full row of data from a table or a view (When you work with Apex Temporary table is not a real option). This data can be manipulated in any way and then stored in Table(s). Each Apex Collection can can has 50 varchar2 attributes (c001 -> c0050), 5 number Attributes (n001->n005), 5 date attributes (d001->d005), 1 CLOB attribute (clob001), and 1 BLOB Attribute (blob001). Each member has a sequence number and each collection must have a unique name.

In this tutorial, I will build a collection from the data stored in a table, add more rows from the table to the existing collection, and then I will show you how to add new member to the collection, how to edit a Member, how to delete a member, and how to save the collection back to the table. I will use some simple Dynamic SQL, and we will use dynamic actions too (many of them actually!).

April 8, 2019

10 Free Tools and Apps for Optimizing Images

In our never-ending quest to create websites that are as lightweight as possible, image optimization plays an important role.

Poorly optimized images not only increase load time, they also take up precious bandwidth from both users and networks alike. Larger websites with copious amounts of images and traffic can be especially impacted.

TinyPNG

TinyPNG is a web-based image optimizer that will shrink the size of your PNG and JPG images with minimal loss in quality. The service is especially adept at significantly lowering the size of complex transparent PNG files.

ImageOptim

ImageOptim is a free, open source app for OS X that will optimize images while also deleting unnecessary meta info. Removing meta also has the side benefit of protecting your privacy. There’s also a lossy minification mode that will aggressively shrink PNG, GIF, JPG and SVG images – including animated PNGs and GIFs.

gulp-image

If you use the Gulp task-runner, gulp-image will automatically optimize GIF, JPEG, PNG and SVG images through a script. It’s a great option for those who have lots of images to process. Prefer to use Grunt? Then grunt-image has you covered.

Pngcrush

Pngcrush is a command-line script that can run on both MSDOS and Linux. The utility will scan your PNG files and try various compression levels and filter methods to reduce file size.

APNG Assembler

Use APNG Assembler to create highly-optimized animated PNG files. This standalone app includes versions for Windows, OS X and Linux.

Compressor.io

Compressor.io is a free online service that will optimize GIF, JPG, PNG and SVG files. You can choose from either lossless or lossy compression types.

Simple Image Optimizer

With Simple Image Optimizer, you’ll be able to both optimize and resize your images through a basic web interface. There are also separate options to simply resize or convert images.

Smush Image Compression and Optimization (WordPress)

Smush is a WordPress plugin that can automatically optimize and even resize your site’s images as you upload them. You can also bulk-optimize up to 50 images at once. It’s a very handy solution for ensuring images are optimized without having to lift a finger.

Image Optimize (Drupal)

Image Optimize is a module for Drupal websites that will utilize image optimization scripts already on your web server, such as OptiPNG or jpeglib. The module will also integrate with some 3rd party optimization services as well.

Apptrian Image Optimizer (Magento)

Apptrian Image Optimizer is an extension for Magento that uses lossless compression to optimize GIF, PNG and JPG files. Images can be batch processed and a cron task can be set up to periodically scan for and optimize new uploads.

Saving Time and Space

One of the great aspects of the free image optimization tools we looked at is the sheer variety of options available. There are solutions for advanced users who want to exercise a finer grain of control, while some of the more basic options require almost no user input at all. And with bulk image management, you’ll be able to quickly and easily optimize your entire image library.

Every bit of optimization counts. Taking a little time to bring your image sizes under control truly can make a difference. Your site’s users (and their data plans) will be glad you made the effort.

April 4, 2019

Showcase of Retro Logo & Badge Designs

Do you love retro looks? Searching for a bit of inspiration for your next graphic design or website project? 1950s-inspired retro design tends to fluctuate in and out of popularity, but the beautiful vintage-inspired look always returns eventually. Usually with a modern twist.

Retro and vintage style is universally appealing for a variety of reasons. For many, it evokes nostalgia for places, TV shows, and posters seen in childhood. And the colorful style, neat and simplistic look, and clean symmetry is pleasing to the eye. You can still find remnants of this style today in logos and branding from many popular companies.

Ready to get in on the retro resurgence? You’re going to need a little inspiration to give you a boost. These fifteen fantastic badges will send you right back to the fifties, so take note!

Outside Lands 2016 Festival Branding by DKNG

Red Desert Adventure by Sean Heisler

Element Skate Camp by Curtis Jinkins

O’Neill Graphic Design by Curtis Jinkins

Space Shuttle by Aaron James Draplin

Mountain Patches by Andrew Berkemeyer

Outside Lands Patch: Golden Gate Park by DKNG

2 Cents Badge by Shane Harris

Peters Design Co Eagle Badge Revised by Allan Peters

Portland Badgehunting Club by Allan Peters

Broadridge Achievers Club 2019 by Alana Louise

RCB Co. by Benjamin Garner

Cyclist Patch by DKNG

Grand Teton National Park by Danielle Podeszek

Go Atlanta Braves! by Jacob Boyles

Old-School Badge Design

That was fifteen of the greatest retro badges and logos across the web. Bright colors, warm tones, and attention-calling typography are staples of these logos. Also take notice of the focus on simple, clear shapes. You can see where the popularity of minimalism and flat color design has bled into modern vintage style.

With this inspiration, you should now be able to put together your own retro graphic. It might be hard to pick a favorite from one of these drop-dead gorgeous logos and carefully crafted badges. Which ones spoke to you the most?

March 25, 2019

Showcase of Line Art Logos & Illustrations

In this age of minimalism and simplicity in graphic design, it’s no wonder that line art is becoming so popular. You can find it everywhere online, from logos to icons and even full-fledged illustrations.

Line art may be so well-liked because there’s many ways of creating it. Some artists make only the simplest of drawings, while others go all in with complex designs and all the bells and whistles. Either way, it appeals to all lovers of minimalism.

A few constants unite all line art, however: basic lines, curves and shapes, small color palettes, and little-to-no shading. These are what make the simplistic style so beautiful.

Need some inspiration for your next graphic or web design project? Thinking about including line art? This is all the convincing you’ll need. Take a look at these fifteen examples of amazing line art illustrations. You’ll be floored by what you see.

Evrgreen Co. Tag System by Steve Wolf

Adventure Capitalist 3 by Jordan Wilson

Revelstoke BC by Steve Wolf

Sendero Provisions Co by Steve Wolf

Nature Badge by Alfrey Davilla | vaneltia

Holiday Greeting Card by Yiwen Lu

TrailHeaDX poster by Brian Steely

This one is not for the kids by Brian Steely

It’s My Park Day 2015 by Marc Ferrino

Jenn & Nate Wedding Invite by Nate Koehler

California by Patrick Moriarty

Campfire Badge by Patrick Moriarty

UFO Scene by Liam Ashurst

Fangs by Liam Ashurst

Mountain Scene by Liam Ashurst

Simplistic Line Art Designs

There were so many fantastic illustrations here! All provided a unique take on what line art can be.

Some were truly minimalistic, with only a few lines and one or two colors. Each stroke of the brush in this type of design is important to conveying the image you want people to see. Others were complex with hundreds of complicated, painstakingly made lines. And some went super fancy with pretty gradients, tiny detailing, and extra accent colors.

But every one remains a perfect example of what you can do with this seemingly simplistic art style. There are no limits to line art – clean icons or elaborate decorations are all within possibility if you know what you’re going for. Which did you prefer in these images: simple or complicated line art design?

March 25, 2019

10 Free Mobile UI Kits For Sketch

You can find plenty of free mockups online, but most cater to Photoshop users. In recent years Sketch has grown rapidly with tons of plugins and free tutorials to help beginners move into this alternative UI design software.

This also means you’ll find tons of awesome Sketch freebies online ranging from complete mockups to detailed UI kits. And in this post, I’ve curated my top 10 picks for the best freebie UI kits for any Sketch user.

All the Mobile UI Kits You Could Ask For

iOS Design Kit

Every new release of iOS prompts an updated GUI kit and this freebie is by far the most comprehensive one to date.

It covers all the major elements for iPhone and iPad apps with free kits for most design software. You’ll find PSDs for Photoshop too, but you can download just the Sketch files with the same iOS-styled vector elements.

These elements all come in @1x size, but since they’re vectors you can easily resize them without any quality loss.

Google Now UI

One of Google’s lesser-known projects is the Google Now prediction app. Designer Manu Akash created a variation of the Google Now UI as a Sketch freebie.

This kit features a lot of the main application pages but also uses styles from the material design library. It’s a great freebie to keep saved if you want to design Android apps while following Google’s design styles.

Blog Kit

Free blogging platforms like Medium have changed the face of writing on the web. And this free blog UI kit shows what’s possible with a great mobile application UI following that same tactic.

Designer Thomas Budiman created this blog/writing kit for Sketch with a focus on mobile app design. It spans many different types of interfaces like gallery pages, article archives, and signup/login forms for new users.

Move Mobile UI Kit

Move UI is a free mobile app mockup pack created by Czech designer Volodymyr Kurbatov. This pack doesn’t focus specifically on elements, but rather on screen designs and interfaces for different situations.

But in these interfaces you’ll find all the common mobile elements like buttons, input fields, tabs, post archives, slideshows, and pretty much everything else you might use for a custom mobile application.

This freebie is hosted on Gumroad so it works through their checkout system, but notice it’s a whopping $0, so it won’t cost you anything to download.

Coffee Shop iOS Kit

For a very unique eCommerce-style UI kit check out this coffee shop freebie designed in Sketch. It mimics an iOS application for a local coffee shop with over 50 screens covering the shop menu, checkout, and product pages(among many others).

The coolest thing about this freebie is the ease of use. You can take this design and customize it however you want to create any type of mobile eCommerce interface.

Each element is a scalable vector and the text is all based on free Google Webfonts.

Social Leads App

Social media is a huge part of today’s web and this freebie offers a really cool start for mobile designers.

The interface kit comes with a handful of screens showcasing a social marketing application. The screens feature user lists, login fields, profile pages, and photo upload/edit screens for interactivity.

Many of these elements can be expanded to a full website layout so don’t feel constrained to a mobile design. This UI kit also follows the material design language so it’s best suited for Android or Google-type interfaces.

Bootstrap UI Kit

The Bootstrap library is hugely popular amongst designers and it’s the fastest way to get a new project online. You can always start by coding the layout first, but it’s usually easier to work with a mockup like this BS3 UI kit.

This is totally free to download in both AI and Sketch format. Each element perfectly matches with the Bootstrap 3 kit, and it uses Glyphicons, just like Bootstrap.

If you’re designing with Bootstrap, then you’ll absolutely want a copy of this freebie.

And if you’re eager to move into Bootstrap 4 then check out this Sketch freebie of the BS4 grid system. It’s not a complete BS4 kit since that version is still in Alpha release, but hopefully we’ll see more of those freebies in the next couple years.

Harmony UI Kit

This mobile map UI kit features all the pin drops, location arrows, and search features you’d expect from a geolocation app. The Harmony UI Kit by Dawid Młynarz is one of the newer Sketch freebies on this list first being released in mid-2017.

It comes with a dozen mobile app screens of map interfaces and search features for finding directions on a phone.

The UI kit is totally free but it’s also hosted on Gumroad so the download process can feel a little weird.

Tinder iOS UI Kit

Here’s another niche mobile UI kit based on the Tinder interface. This freebie was created by Gilberto De La Garza and released for free on Sketch App Sources.

It comes packed with 15 different views for profiles, user lists, dating info, and photo pages. This interface kit mimics the Tinder application, but you can pick out smaller elements from this UI kit and use them on your own.

Sketch is perfect for iOS app design because it lets you resize elements without any quality loss. That’s why kits like this Tinder freebie are so valuable for newer designers just learning the ropes of UI work.

Mobile Wireframes

Digital wireframing is a huge part of any interface project. The process of wireframing and even prototyping helps you map the interface with clarity before designing the colors, textures, and typography.

This mobile wireframe freebie is an excellent place to start. It’s built specifically for Sketch and comes with 57 different mobile interface screens you can pair together.

All of these screens include vector elements that you can also arrange to your liking. A really fantastic UI kit for pre-design work and basic prototyping.

March 22, 2019

12 Bold & Modern Free Fonts

Are you looking for strong, memorable fonts that can instantly add some style to your website? Then look no further. Typography is one of the most essential parts of a website’s design, and it’s essential that you get the perfect fonts for your project. These twelve fonts aren’t just striking and elegant – they’re also free. Try them out and see if they can enhance your website.

Peace Sans

This friendly font is perfect for any website that wants to boldly grab attention while still giving off a warm tone. Peace Sans is all about clean curves and smooth lettering. Plus, it supports glyphs from over seven alphabets, so sites from around the world can make use of it.

AXIS

Axis is exactly what you see here – an all caps, simple, and straightforward font. No frills, and no nonsense, just a bold sans serif font. This one would look great in logos, banners, and other branding images. Try it out!

Neoneon

Now this is neat. Here’s an outlined neon typeface that would look just perfect on a poster or banner. With a few Photoshop effects, you could turn this font into a glowing masterpiece!

National Park Typeface

Have you ever noticed the distinctive style of signage at national parks? Those signs are carved with a router bit, giving them that unique look. Now you can emulate the style with this font, which comes in four different weights.

Ailerons

Tall and thin, Ailerons is an elegant display font designed for headers, large images, and any project where you need a huge typeface. Each letter design is unique, sleek, and gorgeous.

Cooper Hewitt

This professional sans serif font feels reminiscent of a modern newspaper’s typeface. Cooper Hewitt was made from scratch, and every curve and line within it is carefully designed. Download it in OpenType, Windows-compatible, or web font version.

Kolikö

Kolikö is a simple and clean typeface, beautifully designed with a lot of friendly energy. It comes with three styles: thin, regular and bold. Your headers will look fantastic no matter which you choose!

Modeka

Modeka’s lightweight design and tall, angular appearance somewhat resembles that of technology fonts. But Modeka is versatile – it would look great in a project going for a high-tech vibe, yet in no way feels out of place in nature imagery. See for yourself if Modeka suits your design.

Higher

This stand-out font will make an instant impression on anyone who sees it! The Higher font is marked by its stretched, elongated letters. Making something bold and artsy? You’ll love it for sure.

Nordic

Inspired by Norwegian runes, Nordic comes with two uppercase font faces and three weights per each one. Huge or tiny, Nordic looks great, and you can tell a lot of work went into each painstaking stroke. You have to pay for the full font family, but you can get the alternative regular font for free.

Achi

Symbol-like, modern, and clean. Achi would look great in fashion and aesthetic projects, or perhaps as an elegant logo. Fonts that break the mold like this are perfect if you want a website that will never be forgotten.

Etna

Etna is a font that focuses on beauty as well as readability. Many symbols and characters make it compatible with multiple languages, and you can get a coupon code for a license if you want to use this in commercial projects.

Bold Fonts to Make Your Website Distinct

Little is better for branding than great typography that leaves a distinct impression on everyone who visits your site. These big, bold fonts will look great as headers, for short blurbs of text, or on promotional images and banners. Try them out yourself, and let us know which were your favorites – though it might be hard to choose from such a beautiful collection!

March 14, 2019

10 Best WordPress Contact Form Plugins Compared

There is absolutely no doubt that contact forms are a vital aspect of any online business. They have quickly become the norm and in a highly competitive online environment, it is a priceless asset to have. This is because providing an easy method for customers to voice their opinions, suggestions, concerns and anything else related Read More →

The post 10 Best WordPress Contact Form Plugins Compared appeared first on WPArena.

March 14, 2019

The Tools Every Serious Blogger Should Know About

If you are a blogger you may be running several sites, which can take up most of your time. There is more to each blog the just the writing of it. You have to ensure that the content is up to date and correct, that it is interesting to your target audience and that it Read More →

The post The Tools Every Serious Blogger Should Know About appeared first on WPArena.

March 14, 2019

A Case Study of Implementing an Efficient Shuffling Stream/Spliterator in Java

Sorting a Stream instance is straightforward and involves just a single API method call — achieving the opposite is not that easy.

In this article, we'll see how to shuffle a Stream in Java both eagerly and lazily using Stream Collectors factories and custom Spliterators.

March 11, 2019

The 10 Best Free Icon Fonts For Web Designers

Open source web fonts let designers radically change their page designs and typographic styles. And some of these web fonts use icon sets to bring vector-based icons into CSS.

If you’re looking for 100% free icon fonts for your website then this post has collected all of the best ones. Each icon pack is totally free with SVG vectors and webfont formats to include in your stylesheets and web pages.

All the Icons, Fonts, Web Templates & Design Assets You Could Ask For

1. Captain Icon

My personal favorite web font is the Captain Icon pack created by designer Mario del Valle. It’s a totally free open source project hosted on GitHub with vector files and web fonts.

What I like most about this icon pack is the style. Each icon has a very unique design, and they’re all hand drawn from scratch. This makes them stand out far above the other more generic icon sets.

But I don’t think Captain Icon works for every project. It’s best used on creative sites where a hand-drawn style fits with the layout.

2. Octicons

GitHub recently open sourced their own icon pack called Octicons. This free icon set is currently in version 5.0 and includes dozens of icons with some basic symbols.

These icons can be found scattered throughout the GitHub website. But they’re just simple enough that they can work on pretty much any interface.

If you need a simple, lightweight icon font then Octicons won’t let you down.

3. Typicons

With rounded corners and simpler outlines, the Typicons set is perfect for any site. It comes with 330+ unique icons all with a similar style.

The pack is completely free and also available on GitHub. This means you can include the icons directly into your site and even make edits to them as needed.

Few people know about Typicons but it’s one of the better icon web fonts available. They can even work for iOS with some minor adjustments and special code snippets.

4. Zondicons

Zondicons are totally free and real easy to add into your site. Unfortunately these aren’t hosted on GitHub so they don’t have an update archive.

But you can see all of the examples on the demo page including which CSS classes you need to get them working properly. The main Zondicons download link comes right from the website, so it’s hard to tell if they’ve ever been updated or if new icons were added.

I do recommend this webfont if you’re okay with simpler designs. This makes the icons far easier to use, but they can also blend into the site with a more “generic” style.

5. Entypo

The webfont icon family Entypo has been around for quite a few years. These icons are superb and they’re top of the line when it comes to freebies.

New icons are added sporadically and they’re very simple to access. The fonts also split into two packs: the main pack and the social pack. So if you don’t need social media icons you can reduce the font file size by quite a bit.

Entypo comes with over 400 icons and a brilliant CC sharealike license. To learn more about installation and customizing the icons you should read through the FAQ page and visit the main GitHub repo.

6. MFG Labs

One of the newer fonts in this list comes from MFG Labs with their own icon set. It’s completely free and hosted on GitHub for the world to access.

Each icon comes packed with standard webfont formats using Unicode PUAs in CSS. This is fully semantic in all browsers and helps to reduce clashes against other CSS code.

MFG Labs icons have a unique style that stands out from the herd. I absolutely recommend this icon font for any type of website, commercial or otherwise.

7. Ionicons

Native devs love the Ionic Framework and it’s one of the most popular choices for web-to-mobile apps. The Ionic team decided to release their icons as a webfont called Ionicons.

Naturally they’re totally free and available on GitHub. You can even add these icons directly to your site using the CDN version of the stylesheet.

I mostly recommend Ionicons for newbies who haven’t used icon fonts before. They’re super easy to setup, and once you understand how they work you can move onto pretty much any other icon webfont out there.

8. Font Awesome

The original web font and Bootstrap’s personal choice, Font Awesome is perhaps the definitive pick for most web designers.

Font Awesome has been around for years and it’s widely regarded as the first major open source icon font. It frequently gets new updates with fresh icons and currently it’s in v4.7 with a free download on GitHub.

Every icon is fully scalable and maintainable directly in CSS. You can change colors, shadows, background gradients, or pretty much anything else using pure CSS3.

This is by far one of the safest icon sets you can use and you know it’s going be here for the long haul.

9. Material Design Icons

Google’s material design brought a new approach to UI/UX on the web. This led to many new frameworks & resources including this material design icon font.

These material icons are totally free and accessible on GitHub. This icon pack is absolutely massive with over 1,000 icons covering a wide array of interface features.

And because it’s open source you’re free to reuse these on any projects and even customize the icons if needed. Perfect for anyone working with Google’s material guidelines on the web.

10. Devicons

The Devicons pack is one of the newer web fonts you can try with a focus on tech logos & branding.

This icon font has every logo you can think of from the big tech players like Google to newer CMS logos like Ghost. I’ll admit, this is only useful for sites that want vector tech logos which certainly won’t be a majority.

But it’s a hefty icon set and it’s totally free! You’ll find install details on this page with a free CDN version you can use to reduce load times.

Wrapping Up

It’s hard picking just ten icon fonts because so many new ones are released every year. But these are my top picks and if you recommend any others be sure to share in the comments below.

March 4, 2019

Effective Use of Gradients in Design

Nothing looks nicer than a good gradient in a design. Gradients can completely transform a website color scheme from mundane to gorgeous, and you’ll often find them in the centerpiece of a site’s design. Looking for some inspiration for your own backgrounds and banners? Take a look at these beautiful blends.

Gradient Banner

Dazzling is barely enough to describe this stunning banner. A gradient made of opposite colors is bound to be striking, and the way the strong lighting in the background reflects off the model just makes this a fantastic example of great gradients in design.

The HR Manifesto

This page makes abundant use of gradients, from the animations and the background as you scroll down, to the various banners and illustrations peppered throughout. The cool purples, blues and pinks blend together perfectly thanks to the colorful style.

Grabient Landing Page

Obviously, a site designed to generate gradients would know how to utilize them effectively. The banner on the right is an instant eye-catcher, and the same color scheme is used to draw attention to the logo/homepage link as well as the call to action button.

D25/Video Production

The effect here is super subtle, especially at the beginning of the page. But as you scroll, you’ll stumble upon a huge background image overlain with a pretty blue to red color palette. It then naturally flows into a big red text box, which is sure to grab attention.

Centexus Landing Page

Smooth gradients can give a page a clean and elegant look. Professional doesn’t have to mean blacks and whites – add a splash of color and see what happens! This is a landing page that would definitely make conversions.

Ninety Nine Seconds Game Prototype

This game has a strong concept, its artistic style just as much so. Various abstract levels can be explored and discovered, each sporting a beautiful blended background. There’s even a gradient generator for this purpose. It all comes together to make an app you won’t easily forget.

DIY Course Landing Page

The beautifully designed landing page opens with vibrant blues and purples that cleanly fade to white as you scroll. Who needs a hero image when you can create a “hero gradient” that naturally transitions into your feature list?

Natoni Landing Page

Effective gradients can be simple and subtle, or flashy and gorgeous – all that matters is that it’s done well. This landing page sports the latter, with an image that serves both as a good background and yet is also the centerpiece of the design. It doesn’t distract from the text, but you can’t help but stare at the amazingly blended colors with the logo right in the middle.

Bitframemedia Logo

This is just fantastic work from a graphic designer. A clean and simple, yet so very pretty logo. Made to look like ocean waves, every piece of the water blends together beautifully. The reverse gradient effect on the lighting makes the logo look interesting and dynamic as well.

TinyMind Landing Page

Flat, simple design is a fairly popular trend online. It’s clean, easy to create, and looks nice. But it can also be boring! The slight gradient effect here adds a ton of beauty and dynamic, while still retaining that smooth, clean-cut appearance that’s super satisfying to look at.

Mindfulness App Onboarding Screens

Gradients work great with light colors and pastels, and here’s the perfect example. The effect is slight, but compelling, with the central character getting a more dramatic gradient while the background is pale enough to almost blend in with the white.

Inspiring Effective Gradients

Gradients are a great tool for designers. Used well, they can add a dynamic look and a spark of beauty to a design. Subtle or flashy, there’s a place for a good gradient in any creation.

And a skilled designer can utilize one to add contrast to important elements, highlight areas of interest, incorporate UI elements into the gradient, or any other number of clever tricks.

March 4, 2019

8 Websites To Find Free Creative Commons Icons For Design Projects

It doesn’t take much work to find free icon sets online. While they’re useful, they aren’t always the best option for finding specific icons. That’s where free icon resource sites can help.

These websites curate icons based on license (Creative Commons or premium/commercial). Below I’ve curated a nice list for anyone who wants to quickly find specific CC icons on the web.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

Iconfinder

If you spend any time searching for icons, then you’re bound to stumble upon Iconfinder. This is the premier destination for any icon you could ever need.

It operates like a search engine, where you type in an icon style or glyph (like “magnifying glass” for a search icon). You’ll then see results with a mix of commercial and free options.

But if you look deeper into the search settings, you can filter the results to view just free or just paid options. You can also set the icon sizes and a few other search criteria.

No doubt that Iconfinder is the best place to start if you’re looking for free icons. If the icon is out there online, Iconfinder has it indexed.

All the Icons, Fonts, Web Templates & Design Assets You Could Ask For

Noun Project

On the Noun Project website you’ll find a curated list of over one million icons and counting.

This site also works like a search engine, where you can filter icons based on keywords, styles and glyph shapes. For example, you can search for a mail icon and find some pretty clean results.

But The Noun Project isn’t completely free. They do have an optional pro plan which gives you access to far more icons.

Thankfully, their free icon library is still large enough to be worth a bookmark.

FindIcons

FindIcons is an icon-only search engine and it features one sweet interface.

As you start typing you’ll notice auto-populated search results based on existing tags. This can help you find exactly what you’re looking for very quickly.

There’s also a filter menu on the side that lets you select how many icons to display per page, icon colors, styles and license.

This one is definitely worth saving if you need a high-quality search engine exclusively for finding icons.

Flaticon

There’s a lot to say about the flat design trend sweeping the industry. One sure thing is that if you’re creating flat websites, you’ll have no problem finding resources.

The Flaticon website is one such example.

This is a free icon search engine dedicated to flat icon styles. You’ll only find flat icons here and they’re all pulled from open source icon packs submitted by the community.

One cool feature is that they offer icons in many different formats – including base64. You can use base64 code within CSS to embed icons into your page without ever saving an image file.

Flaticon is certainly the best place to look for icons if you work with flat design on a regular basis.

Google Images (CC search)

A lot of people skip Google Images on their quest for design assets. Typically, that’s because the results in Google Images come from other websites and you never really know what kind of license they’re using.

But there’s a nifty feature in Google Images that few people know about.

If you click “Tools” and then click “Usage Rights” you can select from one of many Creative Commons licenses to search through.

This automatically limits your image searches to return only images with the correct usage rights. Pretty cool!

Alternatively, there is a CC search page which can return similar results. But there’s no way CC’s internal search can ever match the power of Google.

Fontello

I can’t say that Fontello is really a search engine just for icons. But it is one amazing website to help you find free Creative Commons assets – with plenty of icons to go around.

It’s described as an “icon fonts generator” and can be used to create custom icon font files to embed via CSS.

Note that you can also download these icons as vectors and rework them to suit your needs.

While it’s not the largest icon library in existence, it certainly features a variety of quality icons for designers.

Iconmonstr

Iconmonstr is relatively new compared to the other sites I’ve mentioned. However, this is a fantastic icon repository full of 100% free open source icons.

As of this writing it features over 4,000 icons – all organized into different collections. They’ll help you search for icons based on topics like sports, business or healthcare.

There’s also a standard search field if you know exactly what you’re looking for.

Just note that Iconmonstr primarily organizes single line icons with a similar minimalist style. So it’s great for finding icons with that particular style, but won’t help for much else.

GitHub

It may seem weird to recommend a code repository as a resource for graphics. But GitHub really does have a lot of repos with free icons available as SVGs and PNGs – among other formats.

Just do a search for icons and you’ll see what I mean.

Granted, there will be plenty of scripts and templates built around icons that show up in the search results. But you’ll also find repos for open source icon libraries that designers chose to host and release through GitHub’s free platform.

Consider this a last resort for finding obscure and niche icons. Don’t expect miracles, but the few gems you find can really have an impact on your design projects.

February 28, 2019

10 Inspiring Websites with Gorgeous Animations

There’s nothing more awe-inspiring than a website with amazing animations. It’s like a webpage come to life inside your computer, and with animations, a designer can really show off their skills. If you’re planning on including movement in your own website, you’ll definitely want to see these amazing animations from talented web designers and developers.

Les Animals

Les Animals nails the transitional animations in this one, each fluid movement easing you into a new frame. Just click and drag to start exploring a little world, and see all the breathtaking 3D environments through a small lens.

The Hunt for the Cheshire Cat

This site is just marvelous. At first it uses only slight mouse panning animations, but as you go deeper, you’ll find yourself immersed in a 3D city that you can travel through and look around in. Scrolling advances you through the city and into various other environments.

60 FPS

The centerpiece of this animation is definitely the rippling gold and silver logo, always in the background. It’s subtle, but unique and beautiful. More than that, each UI element appears with a smooth effect. And here’s a cool effect you might not have noticed: the background logo on every page responds to your mouse cursor as you hover it!

Spire

This website is packed with all sorts of little animations. Interactive 3D objects, various hover animations, small animations that idly loop in the background – you’ll need to explore to find them all. The sliding text and elements offers a natural transition as you look through all of the pages here.

Nico Cherubin

Animations with personality are the best, and you’ll know as soon as you enter this site that the creator loves web development and technology. One awesome feature from this site is, when you’re on a project page, the ability to hold the spacebar to see a video of the website in action.

Pelizzari Studio

Whoever designed these animations definitely knew what they were doing. If you’re going for a simple, but responsive and elegant effect, you’ll love this. Every single page pops with its use of animation, as images slide in or zoom out as you scroll. It’s simply a joy to navigate.

Active Theory

Navigating this site feels like walking through city streets. Flying down dark alleys lit by bright colors, looking through pages with backgrounds that look like they come from a late-night town, the atmosphere they’re going for here is clearly set up and exceptionally executed. And even clicking on a portfolio page displays a series of fluid transitions and text animations.

Teatr Lalka

This one is a great inspiration for kids’ websites. Moving your mouse left and right triggers the puppets to swing with realistic physics. Move your mouse faster for a more dramatic effect. Click on them to get a cute animation and hover to learn more. Clicking through the pages also brings up lively loading screen animations and more characters to interact with.

Dean Bradshaw Photography

Every page you visit on this site is filled with animations that bring the photography to life. The first thing you see is a slider that allows you to quickly scroll through some of the best pieces. Images and videos have a nice zoom hover effect, and text scrolls by in the background as you browse.

Next Level Fairs

Scrolling down through this site never gets boring with all the little animations and dynamic movements of each piece. It’s interesting to learn a little more about the web designers’ thoughts as they created an online gallery, displayed on this page made with just as careful craftsmanship.

Crafting Awesome Animations

Animated websites certainly aren’t easy to make, but the results are more than worth it. With enough experience and skill at web design and development, you can create something truly inspiring that will dazzle anyone who comes across it.

Did these fantastic examples give you any ideas? Which ones did you love the most?

February 26, 2019

Eight Premium Shopify Apps Every E-Store Should Have

Let us face reality. We would only be lying if we didn’t acknowledge the fact that online businesses today rapidly emerging as very profitable ventures because of the opportunities that exist for entrepreneurs in e-commerce. Right now, online entrepreneurs are beginning to take advantage of these possibilities due to the more affordable nature of online Read More →

The post Eight Premium Shopify Apps Every E-Store Should Have appeared first on WPArena.