Handy Tools for the Hectic Web Designer

The old time adage, time equals money, is current and true in the modern world of web design. Luckily, there are loads of resources and tools out there to streamline your workflow and make you more efficient. To make your life even easier, we’re going to give you a quick over view of some of our favorite handy tools for the hectic web designer.

Images

The internet is a media rich platform and people expect excellent imagery. If you don’t have top notch photos and images on your website, you are less likely to engage, entertain and convert your readers. With smartphone cameras, it is easy to take and share high quality photos; taking your own shots is a great way to generate engaging visuals. However, depending on your content, this isn’t always an option. So check out these awesome resources for finding royalty free, high quality images for your website.

free-images-pixabay

I love Pixabay, and to be honest I rarely have to search beyond this single resource for stunning, full size photos. All the images are royalty free, open use for personal and commercial purposes, with no attribution required. You also get multiple file size downloads, meaning you can get the largest size for hero images, or just smaller dimensions for blog posts. Sign-up for a free account and you even get to skip the ‘I am not a robot’ step!

I stumbled across Pexels recently and thought Pixabay had just had a makeover. The two websites looks almost identical and operate in almost identical ways. One feature of Pexel that may lead me to start using it for my photo source over Pixabay is their custom-size download option. While the standard options of small, medium, large and full size are often more than enough, I can see this feature being useful for social media posts, where various sizing of the same photo can be used on different platforms.

Unspalsh is a free photo database that has an appealing simplicity. New photos are added in a rolling timeline, the photos can be easily searched and Unsplash has created collections of related photos. The amazing thing about Unsplash is the quality of the photos. A one click, no nonsense download button, begins a download of a very high quality image (3-5MB). The best thing: Download buttons on the thumbnail gallery view!

All these platforms work on a similar model. They are collections of photos which have been designated as OK to use freely under the Creative Commons license scheme. In this case the license is Creative Commons Zero.

What is Creative Commons Zero?

cc0The person who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

Icons

These easy to recognize symbols can add a layer of professional familiarity to your website, as well as ease of navigation and a clean aesthetic. In many cases, there is no need to re-invent the wheel by designing them yourself. A few resources offer quick integration and customization of a wide library of icons, so you can use icons on your website without tying up valuable design time.

sharp-and-clean-symbols-glyphicons-com

Glyphicons are pre-made icons which you can download and use in your web projects.  There are free download options as well as premium options, so this can be a useful tool for all developers. Glyphicons bring a modern look to classic icon imagery and can save you a lot of time. Bootstrap is one of the large companies who make use of Glyphicons (note, V4 of Bootstrap is set to drop Glyphicons):

Bootstrap includes 260 glyphs from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.

Another similar set-up to Glyphicons is Font Awesomebut Font Awesome is awesome because it is open source and available to all. There is a new version, Font Awesome Five, coming out. This version will also be open source, but includes a Font Awesome Five + premium version. Here’s a pretty entertaining Ad for the new version:

Font Awesome works with stylesheets to allow full CSS customization of all the icons available, including color and size. There are actually a lot of similar icon models out there. A useful comparison of the main ones can be found HERE, but I’ve included their summary chart as reference.

vector-icons-roundup-font-awesome-vs-glyphicons-vs-foundation-icon-fonts-vs-material-design-icons-vs-ionicons-vs-elusive-icons

Some web projects do benefit from custom designed icons. As the web becomes more uniform and generic in design, there is an opportunity to embrace a unique look. Any designer needs to be clear that icons are useful because they are easy to recognize and understand, but good designers for big websites can still bring their own style to recognizable forms. In this case, standard design software such as Adobe Illustrator or online tools like this icon maker from Icons Flow are the way to go.

Colors

With bold colors, duo-tones and color gradients becoming popular design trends in 2017, getting a handle on the language of color is an essential web design skill. If colors aren’t your forte, there are a plethora of design tools to help guide you.

color-wheel-color-schemes-adobe-color-cc

Adobe Color CC is a great tool for designers because you can intergrate the color palettes straight into the Adobe CC Design Suite and save your themes. The tool is intuitive to use and has a big, beautiful and simple design.

A similar resource is available on paletton.com, but this one comes with a few extras that will make web designing with colors a breeze:

  1. The ‘examples‘ tab throws your color palette into a quick webpage layout so you can get a real sense of what the colors will look like in the real world.
  2. The ‘tables/export‘ tab gives you lists of your color pallete in HTML, CSS, HEX, SASS and many other formats, allowing you to simply copy and paste code to integrate the colors.

Here is a screenshot of the tables/export section of paletton.com:

Gradients seem to be making a come back and CSS makes it extremely easy to accommodate this trend. But, uiGradients makes it even easier! Pre-selected color gradients are shown on full screen or thumbnail format and the code is right there for you to copy and paste into your own web project. If nothing else, the range of colors is inspiring and the code can be tweaked to suit your own needs.

Layout (design, grids, etc)

The table, as a webpage layout tool, is dead. CSS flexbox and grid classes are redesigning the internet with responsive grid layouts. Responsive layouts are now essential as the rise of tablets, smartphones and other devices has changed the way we interact online.

bootstrap-%c2%b7-the-world-s-most-popular-mobile-first-and-responsive-front-end-framework

Bootstrap is one of the building blocks of many current grid-designed websites. They are currently in the final alpha stages of a complete redesign for Bootstrap V4, which will incorporate CSS Flexbox into its code. This will fix many of the current frustrations, such as the ability to create fixed height columns. Foundation is a similar platform working towards similar goals. It seems to me that the use of one over the other is simply preferential. Foundation does include coding for eNewsletters, which is a bonus.

Photo galleries are one place where we see the grid design used a lot in web layouts. When different size images are arranged on a page to fill in any white space, it is described as a masonry grid. This can be achieved in a number of ways, one of which is Masonry Grid Design with JavaScript The masonry grid design with JavaScript code was created by David DeSandro and he has some more fascinating layout designs with code that you can download.

erik-johansson

One criticism of JavaScript masonry grids is the sluggish load time. You can also do responsive Masonry Grid Design with CSS. This is equally effective as JavaScript without the heavy code. As a bonus CSS Tricks has used cat images in its tutorial, so that’s a bonus. 

Animation

There are a range of animation tools that can make your website look professional and really engage your users. These tools are getting easier to use and the code that supports them is getting more sophisticated. HTML5 and CSS3 allow for some great animation effects, without needing high bandwidth or complex software. WC3 Schools is a great place to learn basic coding, but there are also some WYSIWYG CSS Animation generators out there, which can make coding animations more intuitive. CSS Animate allows multiple parameter changes and real time playback:

css3-keyframes-animation-generator

Short animated visual loops are extremely popular and shareable. They are easy to create and people find them entertaining and useful. GIPHY is a resource for cinemagraphs and traditional GIFs. On GIPHY you can upload GIFs (created in other software such as Photoshop) or create them on the website itself. From the GIPHY website you can share and embed (much like you can from YouTube).

Animated banners can be used to improve CTR for advertisements or on your own website for engaging content. Banner Snack is a tool that makes this process very easy. You can make static and animated banners, from scratch or template. With this type of tool there really isn’t any excuse for not having professional banners on your website.

bannersnack-online-banner-maker-design-create-banners

More Resources to Share?

We’ve covered a lot of ground here and offered some great resources to help you be efficient as a web designer, but we know there are even more out there! One thing to remember is that if you think of a tool you could really use, there is probably already one out there. Google IT! With that said, if you have a useful resource to share, why not leave a comment below. If it’s one we really like maybe it’ll make it onto our footer resource list.

Happy web designing!

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s