Have you ever wanted to know the secrets of real web designers? How do they go about creating a website? Learn some of the most used secrets behind the success of top web designers. Grab these concepts and take your design to the next level. These are just some tips for new designers learning about what professionals do to make their websites look better:
- Use a grid. Don’t just start throwing stuff into a page and then try to arrange the stuff into something that kind of looks good. Make sure that you start with a grid system in place and even if you end up breaking the “rules” of the grid at least you have some organizing parameters. Believe me every single pro designer I know uses the grid. My favorite grid to use is a canvas of 1200 X 1000 with an internal grid of 960 divided in columns of 60 pixels with alleys of 20 pixels (if you are thinking that the 960system is just like that you are right).
- Negative Space. Just because you are a designer, doesn’t mean that you have to put an element in every empty space you see out there. In fact, use empty space to create a clean, clutter-free interface. Make sure that your negative space is supportive of your message.
- Center your design. I don’t know how many times I have seen fortune 500 companies that still have their designs attached to the left margin. Don’t think for a second that it is intentional. There is no absolute reason to make your client read your content in the left side of her screen when they could be doing it in the center and dividing the unused space to the sides.
- Include contact information in every page. It is important that if somebody is browsing a website and they are in a page that captured their attention and fired their desire for the product or service, they should immediately have the ability to contact you, otherwise you may have a huge missed opportunity.
- Excessive scrolling versus Excessive paging. Try to keep both of this to a minimum. Don’t just make people read huge pages in order to avoid paging, and don’t make pages with 2 words just to make people browse through many pages. The recommendation is pretty simple, try to keep your content to around 250-1000 words per page. If you are selling advertising then go with more paging. If you are designing for a retailer then increase the number of words per page instead of the number of pages. A good example of this strategy lately is Apple.com.
- Color Harmony. This is probably one of the most important concepts you can grasp. Do whatever it takes to understand color harmony. Read books, hire tutors, and if you have to, sell anything you have in order to learn about color harmony. If you don’t know the basics about color then stick to black and white. Color is extremely important. Professional web designers know how important this is. Are you still not sure how to do it. Use a tool like Adobe Kuhler, they give you color palettes, all pre-arranged, of colors that work well together.
- Typography. This one is second to color. If you call yourself a web designer – you need to know at least the difference between sans-serif and serif. You might not need to know the different categorizations of fonts, but you need to know that some fonts mean more to your design than others. *Note: Helvetica is awesome, no matter what other people say.
- Navigation is the way to the king. People often say that content is king. However visitors can’t get to the content unless there is good navigation. Navigation is simple in its concept, it should answer two questions at all times: 1. Where am I? 2. Where can I go from here? Make sure that your navigation is clear to transmit those two messages and you will be safe. Also, make sure that the navigation is consistent and that it works well (especially in mobile devices.)
- Top quality images. An awesome design with crappy images is like a supermodel with diarrhea, there is nothing sexy about it. When you design and you end up needing images, it is imperative to use only high quality photos. Review your compression, make sure that you use the right size images. If you are printing perhaps you need 300 dpi, but on the web, you don’t. The ppi doesn’t matter, what matters is the true dimensions of the image. So for example if you have an image that is 960 by 200 pixels and you put it a box that is 960 by 200 pixels then it is all and good. Now, what happens if you take that same image and you put it in changing box? Either it doesn’t fit, in which case, you have empty space or you “enlarge” it to fit. This enlargement is called Upscaling and it requires the software to make a guess about how to enlarge your image. Regardless of the quality of the software it continues to be a guess so is not as good as a true pixel. My point is this: use quality photos and images – if you have to decide between too small or too big, go with too big. When is time to compress them use quality software to compress. If it has gradients use JPG compression. If is solid colors and type use gif. If you need transparency use PNG. Consider also retina displays. What that means is that if you have box that is 200 x 200 pixels, you may want to use an image that is 400 x 400px in that box. That way, your image will look perfectly crisp in retina displays.
- Don’t underestimate the power of the road already traveled. In other words if you are starting out, it is probably more complex for you to come up with a layout that is compelling and effective than it is for you to take a look at good layouts out there and then build your website based on those. It is easier for you to “borrow” a good color palette from a website that already uses color effectively that to learn color harmonies in a day – or at least use Kuhler (by Adobe.) It is better to copy the text treatments of a particular section of a website than it is to figure it out. Now, believe me, I am not saying go copy websites. I hope you understand that. I am probably the first to tell you that it bothers me to see when somebody just completely copies a site. What I am saying is that you can “borrow” effective elements for your design from other concepts and places. In fact, every designer does that. We have a trained eye for grabbing colors from nature or from photographs or from experiences but is the same as doing it from other websites. Same thing with layout. The golden rule is based on nature’s aesthetics.
- BONUS TIP: Study websites. What does that mean? When you see a website that you like, look at it a little closer. Study the spacing that they used, the typography, the color the positioning, the relationship between elements and everything else you can. Take some screenshots and save them for later. Study, study and study. Don’t ever stop learning. The moment that you think that you are a complete designer you’ll find somewhere the humbling voice that says: there is still more to learn.
If you are an aspiring web designer I wish you great success in your path. Remember that building a house takes time to learn and also time to do. Same with websites. So be patient, and learn from everybody willing to teach you. One day you will wake up and you’ll be there: you will be a web designer – so don’t forget to enjoy the journey. Hope this is helpful for you – have a good one, until next time!
Alex_ @ merkados