I’m a self taught designer and I do design for my clients. I would like to think I know a thing or two about design but you can be the judge by taking a look at my portfolio. I’ve designed and developed my portfolio, client sites and my blog, and I think I have an eye for it. I went back to school to study web-development almost two years ago now, but design wasn’t something we were taught. I am very interested in design and wanted to learn more so I’ve read a lot and tried to teach myself along the way. I wanted to share with you some of the resources and things I’ve learned that can improve your design skills and help you before a better designer.
First Let’s going over the basic rules of design. There are two main standpoint from which most people will determine if a design is good or bad. One is usability, how easy and functional it is to use a product or website. The other is how aesthetically pleasing it is to look at. Some people get so caught up in aesthetics that they forget about usability and the result is a design that looks beautiful but is very complicated to actually use or impractical. Some go the other way and create something that is simple to use but it looks terrible and as a result no one will use it. To achieve good design you must have a balance of the two. There are a few things to keep in mind:
1. Make your information Easy to Find!
When you are designing your website or a website for a client, how easy it is for the user to find the information they are looking for? If someone can’t find the information they are looking for within the first few seconds of landing on your website they will leave. If you are designing an app keep in mind the the user does not want to take the time to learn how to use it. If the app isn’t instinctually easy to use, the user will delete it and use another app. Simplicity is key when it comes to good design.
2.Everything has it’s place.
Everything should function how the user expects it to function. This will avoid click fear (that’s a real thing) and make it easy for the user to find what they are looking for or complete the task they are wanting to complete.
3. Keep things consistent
Even if there is a dramatic difference in layout between your homepage and the rest of your site, a cohesive style or theme should exist across your platform. Different pages of an app or website can look different but I should still know that I am using the same app or the I am still on the same website. Developing a brand and using a style guide is helpful with this. Use of the same fonts and colours throughout a site helps pull everything together and keep it looking clean and uniform.
4. Don’t know anything about grid theory? Use a framework!
Grids are an essential tool for graphic design. Using a grid is about more than just making elements on a page line up. It’s also about proportion. Many art historians credit Dutch painter Piet Mondrian as the father of graphic design for his sophisticated use of grids. Yet classical grid theory has influenced art for thousands of years and can be traced back to Pythagoras, that’s right 9th grade math wasn’t totally useless after all. What does this have to do with graphic design you may ask, well without going into too much detail, grid theory basically says that compositions divided by lines that are proportionate to the golden ratio (1.62…) are considered to be aesthetically pleasing. If you don’t want to study all that math, use a framework! Frameworks are based on this theory and they use a common structure so that you do not have to redesign from scratch.
5. When in doubt Keep it simple
Always follow the simple rule that less is more. Unless something serves a purpose, it doesn’t have a place on your webpage.
This is important because if you are not Picasso, chances are you aren’t going to create a master piece out of thin air. Getting inspiration from beautifully designed sites is important and can save you a lot of time and energy. This does not mean copying. This means, taking bits and pieces that you like from different sites and changing them to make them your own.
Tools I use for inspiration include:
Pinterest – Pinterest is an amazing resource for keeping all of your ideas organized. You can create private boards and pin ideas that you find not only on pinterest but all over the internet with this google chrome plug in. You can also invite people to collaborate on your boards which makes this the perfect resource for working with clients and keeping all of your ideas together in one place.
dribbble – Dribbble is basically a show and tell site for all of the best designers. You can get really specific with this site when you are searching for different elements. For example, need inspiration for the form you are building on your website. You can search for form designs on dribbble, there are many and they are all beautiful in their own way. I could spend hours on this site getting lost in design.
Design Milk – Just search “web design” on design milk and you will find numerous helpful articles on design milk to draw inspiration from.
Bēhance – this website showcases the latest work from top professionals across the design and development industries.
You may have heard the phrase “content is king” this could not be more accurate. You absolutely want to make sure the content on your website is not only valuable to your readers but easy to read and easy to find and nice to look at. There are millions of websites on the internet so give your readers a reason to stick with yours by creating valuable content that looks good.
A rule of thumb is that you should try to mix at least two different fonts on a webpage, try using one for headings and one for paragraphs. Never use more than three. Serif fonts, or the font with little feet on them are best for longer paragraphs because it guides the reader eye and is easier to read. San-Serif or literally “without-feet” is best for headings.
Tools I use for typography include:
Google Fonts Google Fonts is an awesome resource for typography inspiration. There are thousands of fonts available and best of all this tool is absolutely free to use.
Pro Web Type If you are interested in learning more about typography this is a free online book that covers the fundamentals of web typography, although if you find it useful please consider making a donation to the author by purchasing it.
Fontology from Fonts.com is another great learning resource and it’s also free.
Type Wolf -don’t know where to start when it comes to typography and need some inspiration? Try Type Wolf a great visual blog for what is currently trending in all things type
Not an expert photographer? Don’t have the time to create a photoshoot for each new project or blog post you write. Not to worry. I have the tools that will make your life easier in this department. First of all, I just want you to know that photos will literally make or break your website. Ugly photos = ugly website. Poor quality photos = crappy looking website. You see where I’m going with this. Putting good photos on your website isn’t a hard task. Make sure you take the time to search for and use quality photos that make sense for your topic and brand.
Tools I use include:
UnSplash – Unsplash is a collection of free high resolution photos and has arguably become one of the best resources on the internet for stock photos. Unsplash releases 10 new photos every 10 days.
Death to Stockphotos -Death to Stockphoto will email you a pack of 10 new high resolution photos each month that you can use for personal or business use.
Stocksnap.io – Stocksnap is another website that hosts high quality, beautiful and free stock photos for you to use. They add hundreds of new images on a weekly basis.
Gratisography – Gratisography offers free high resolution photos that you can use for personal or professional use. All images on this site are captured by photographer Ryan McGuire.
All the Design
A wireframe is a very basic design of your website, mapping out where each of your elements (buttons, navigation, images, text, etc.) will be placed. A mockup is prototype of your website or app. It’s used for teaching, demonstration, design evaluation, promotion and may even be used as a minimum viable product.
Sketch – Sketch is for Mac only, sorry PC users (who uses PCs anymore anyway 😉 ) It is just as powerful as illustrator or indesign (personally I like it better), and it’s only $100. You can do wire framing, mockups, it has built in grid systems, you can create logos. There isn’t much that you can’t do with sketch to be honest. It’s absolutely a tool worth investing in.
Balsamiq– is an easy to use wire framing tool that allows you to get a sketch of your design up on the screen in digital form.
Pen and Paper – No, this isn’t an app or a website. I’m talking about good old fashioned pen and paper. Some times this is the best way to get ideas out of your head and it’s always a great place to start before you put anything on the screen.
Unbounce -Unbounce lets you quickly build and test landing pages. They have a ton of different designs for you to customize and it’s a great tool if you just need to get a page or two up for some A/B testing.
Frameworks are a little more advanced, and you will need to know how to code to use them, bootstrap is my favourite.
Bootstrap – Bootstrap is a mobile first responsive CSS framework. It’s commonly used and comes with excellent documentation so you can teach yourself how to integrate it pretty quickly into your code.
Social Media/Email Marketing
Canva – Banner images, blog graphics, posters, invitations, resumes, etc. These are just some of the things you can create with the beautiful designs on canva. Canva is simple to use, most design are free, others are $1US so it’s very accessible no matter what your budget it and you can customize all of the templates so that you get the design you are looking for. This is probably my favourite design tool. If you haven’t started using canva yet, seriously what are you waiting for?
Although there is way more to learn about design and this doesn’t even begin to cover all of the fundamentals, this list is a great place to start and if you can master these tools they should help you in hacking your way through the quick design of a website, email or app.
*This Post was based off a Crash Course in UX/UI design that I taught with Le Wagon in Lisbon*