When it came to designing my first ever website back in 2012, I didn’t have a clue where to start! Since then I’ve been both designing and developing websites for various clients all with different needs and expectations. From this I have visited various websites & blogs with amazing free tools and technologies to use in the designing of the sites.
Getting Started
My first decision was which program to use to get my ideas down on ‘paper’. I chose to use Photoshop to design my sites, due to the pixel perfection you can achieve with the Adobe software.
Once you’ve decided on your platform and it comes to starting your design, there’s probably 100’s of components running through your mind (Colour Schemes, Images, Fonts, Icons, Functionality, etc). Stop! The most important step is setup; you can create an amazing design, but the developer won’t be too happy with a 6000px wide PSD. The document needs to be at the right pixel width with clean grid guidelines for responsive columns*. I’d recommend 12 columns at a width of 960px, you can download this template as a PSD from 960.gs.
*Confused? Check this out.
Inspiration
Once you have a basic idea of the design route you’re going to take, finding inspiration can be a time consuming process. Here are some of the best sites to visit in the research process:
Awwwards
Awwwards is a site where designers/developers submit their work, which is then rated on four features; Design, Usability, Creativity and Content. The good thing about this site is that you get to see the best sites of different categories, meaning that you can research into a specific genre of website i.e ‘Culture & Entertainment’.
Behance
Behance takes the approach of a ‘Social Media’ Platform for designers, it allows users to submit their work and then rate and comment on each other’s work. It allows you to refine search results by category and view the highest rated.
Colour Schemes
Choosing the right colour scheme can be a tedious process. It can be difficult to balance between finding colours to make your design appear professional, yet with enough contrast to stand out from the crowd. Here’s some sites which I use to help me in finding the correct colour schemes:
Adobe Color
With 7 different colour rules, 1000’s of user populated colour schemes and a custom colour wheel. Adobe’s Color is my favourite way to find the right colour scheme.
Palleton
A more simple colour wheel with 4 separate colour rules. Paletton can be great to find colours that match your client’s brand.
Fonts
When it comes to fonts in web design there’s a lot to consider, aesthetics is a huge part of deciding on the right font, but you also have to consider readability, load times, and compatibility:
Google Fonts
Google fonts have a great collection of fonts which you can selectively import, each separate font will effect loads times differently, which is easy to monitor with the ‘Page Load’ Dial that’s built into the site.
Font Squirrel
Font Squirrel is a great place to download fonts which both are free and have been licensed for commercial use. They also provide a webfont generator, which allows you to upload fonts which can then be used on the web.
Icons
Icons are a big part of design and UX/UI, they can help your design to flow and allow users to interact with ease (if used in the right way and anchor the content they’re placed with). Here are two of the best sites I have come across when it comes to iconography in web design:
Font Awesome
Font Awesome is amazing! Not only does it have a large library of icons, it acts as a font on the web which really helps keep load times down and implementation is easy! There are also add-ons to use with photoshop which make it easy to find the icon you need with very little effort.
Icon Finder
Icon finder provides a service which allows you to search various free icon packs. They also have a wide selection of premium icons, however I have mainly been able to find what I need through the free packs.
Images
Sourcing copyright free images can a long winded effort and finding the right images can be the make or break of your design, no matter how good your design is the images will tip the scales.
Pexels
I’m a big fan of Pexels, not only are all their images copyright free, they also don’t upload the “every day stock image” everybody’s seen. They source 70 new images a week which are all of very high quality. You can search the website yourself, or view Pexels own recommendations of similar images once you’ve landed on an image you like the look of.
Unsplash
Unsplash also provide a more artsy approach to stock imagery; they upload 10 new images a week, which are all completely free to use however you see fit!
Dummy Content
Sometimes when you’re designing a website the content or direction you’re being pointed in is ‘boxing you in’, or your client simply doesn’t provide you with any direction. However, they still want to see a quick mockup of the direction you’re taking in terms of layout. I’ve hit these problems quite a few times, and here’s some ways to get around them:
Dummy Images – Placehold.it
Some projects need more attention than others, when you’re rolling out a first draft, dummy images can save you a lot of time when it comes to sourcing images. Placehold.it is a great way to over come this issue; simply type in the image size and text you need in the url and you’re ready to go!
Dummy Text – loremipsum.net
Making up content for a client can be a lengthy process especially if it’s just for the design stage. loremipsum.net provides latin placeholder text which can always be good to fill a gap and showcase font styles and sizes.
Overall the design stage can be tricky, hopefully all of the resources above help you in the process of designing your site or latest project! Let us know in the comments below if there’s any web design tools you can’t live without.
[button color=”accent-color” hover_text_color_override=”#fff” size=”large” url=”http://email.superflymarketing.co.uk/h/j/B080F5739BE46312″ text=”Sign up to our E-Newsletter to get free monthly marketing tips!” color_override=”” image=”icon-check”]
