5 killer web design tips that

will make your life easier

Illustration by Kristina Zmaic
We all want to have a beautifully designed website and yet, it’s surprisingly hard. So
what is it that great designers know that the rest of us don’t?
The key to great web design is really very simple: you’ve got to understand the universal
rules of good design and follow them, all the time.
Let’s make sure this never happens to you.
1. Learn the fundamental rules of type design
The key to good web design, says Ryan Shafer, Lead Digital Designers at MTV & VH1,
is remembering that the web is really just a bunch of text. “I encourage all budding web
designers to embrace that the web is fundamentally about typography design.”
And the great news is that type designers have spent the past five thousand years
perfecting text design, and there are a few golden rules that all websites should adhere to:
For headlines:

” says Mike Fortress designer at Oak Studios. and maybe something a little.” warns Mike. you want to maximize legibility:  For lots of text opt for a serif typeface  Make the font-size much larger than you think is necessary. “Be careful with that last color!” . 3. you know. Pick a solid typeface. “I prefer neutral palettes that use a strong accent color in a bold way. founder of Customer. whimsical. They probably won’t make a movie about it. give Proxima Nova a shot. but if you want a sophisticated sans-serif typeface that the lay(wo)man won’t recognize. Consistency is everything when it comes to creating a cohesive color palette for your site. “Proxima Nova has replaced Helvetica Neue as my sans-serif typeface of choice. don’t get us wrong. we love Helvetica as much as the next designer. Colin Nederkoorn.” Some other good choices are Montserrat and Merriweather Sans. graphic. we recommend 16 px at minimum  Lines should never be more than 50-60 characters long 2. When it comes to picking a font-face you want to pick something super easy to read.io says that recently. Make them bold and easy to scan  San serif typefaces are great for headlines because they are stark and easy to read at larger sizes For body text. But. and maybe one with a touch of whimsy Now. and a strong accent color (#4e5fff). a not. “Perhaps a white background (#fff). Pick a three-color palette & then stick to it! When it comes to picking a color palette the key is to pick it and stick (to) it.too-dark text value with a little hue in it (#45585f).

Considering using icons or images as alternative ways to communicate your point. don’t use it! 5. give it space The most important design tip is also the simplest: “Make sure your content has breathing room. Make sure your photos are the right size Remember. Nothing will tank your design faster than picking one design direction and then switching it halfway through.Check out Adobe’s Kuler tool for picking colors. give it proper margins will help with legibility and focus. it’s important to avoid overwhelming users with walls of text. Text is necessary so make sure to break it up with larger sub headings and legible paragraphs. “Too much text can be a bit daunting. the web is pixel based. “When you are looking for images on Google or iStock. When in doubt. says Kristina. “Photo clarity adds a lot of credibility to a site. . Consistency is key.” If there is one golden rule of design it’s this: pick your aesthetic and stick to it. or get inspired by the collection of palettes at Colour Lovers. so if your image isn’t large enough it’s going to look pixelated. even if they weren’t taken by you.” In particular. 4.” If the image is too small. make sure to get the proper size” says designer Kristina Zmaic.

blue areas got the least views and the gray areas. . Red indicates the area. where people looked the most. yellow areas got a bit less eye-action. people didn’t focus on them at all. well.Do you know what is the first thing that your eye is drawn to on a website? And in what pattern do people scan your website? There have been many eyetracking tests on this subject and I’ll give you 15 most useful facts you should know. The picture below shows 3 different websites and where people look on them.

Ads.As you can see. Readers ignore banners. 7. 6. Surprise. 4. Also headlines draw attention. So always try to place the most important information in the top part of your website. 8. Text attracts more attention than pictures. Big pictures attract more attention than small ones. Menu works best when placed on the top part of your website. the more they lose focus and start mainly scanning your website. 13. Short paragraphs work better than long ones. . 12. Ads. 1. White space is good! 15. Visitors spend more time looking at menus and buttons than other parts of your website. 3. 10. Lists are better at keeping your reader focused than large paragraphs. Fancy fonts are ignored. 5. People start viewing your website from the top left corner. get more views. People only scan the lower parts of your website. that are placed on the top or left part of your website. suprise. 9. Some people even completely ignore large chunks of text. 14. get the most views. 11. 2. that are placed inside or below an awesome piece of content. Here are the 15 facts you should know on how people view websites. the more people scroll down.

Web design is more than just a design. but a good reminder never hurts. compliance to the world design standards and multiple browser compatibility. it’s not surprising that web designers are in high demand. On the contrary. Another requisites of an effective web design are social media compatibility. Every website that takes longer than a few seconds to load is a failed design. This means that a webmaster who’s working with a project has got to have knowledge about web development languages as well as SEO principles. Some points from this list are pretty basic and elementary. So the next time when you’re writing an awesome piece of content. Visitors will simply switch to another site that doesn’t take that long to load.There you go. 2. Hopefully. With thousands of new websites being regularly launched live on the Internet. 4. . However. Everybody knows that Flash programming makes a website visually appealing and interesting for its customers. Flash is outdated. their performance in terms of SEO is very unsatisfactory. you’ll find them interesting. in the last decade Flash-based websites have lost a big number of its followers because websites with Flash applications take longer to load. keep these points in mind. 3. According to the recent study on the attention that visitors pay to different elements on the site. But in this article I’d like to share some interesting facts about this interesting field of work. ads were the most neglected elements of the site. One of its major components is search engine optimization. The most preferable photographs were the smiling faces of babies. 1. A few seconds to load is the time limit. people and birds rather than cartoon figures. researchers have come to the conclusion that web users like the pages with pictures of animals. You now have the knowledge – use it! Interesting facts about web design Web design is one of the most popular and profitable industry today. Besides. Lively images is what visitors like. or building your new website.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. a Latin professor at Hampden-Sydney College in Virginia.10.32 and 1. by injected humour. Lorem Ipsum comes from sections 1. or randomised words which don't look even slightly believable. content here'.32 and 1." Lorem Ipsum is simply dummy text of the printing and typesetting industry.10.32. A professionally designed website design is expected to feature the content as the most important part of the site. from a Lorem Ipsum passage.10. and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Contrary to popular belief. sometimes by accident. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero. Flashy animations. simply because it is pain. you need to be sure there isn't anything embarrassing hidden in the middle of text. comes from a line in section 1. injected humour.10. making this the first true generator on the Internet.. looked up one of the more obscure Latin words. It uses a dictionary of over 200 Latin words. written in 45 BC.. The generated Lorem Ipsum is therefore always free from repetition. consectetur. The concept of web design usually depends on the future goals of website owners. ads. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. etc. Rackham. who seeks after it and wants to have it. "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet. Sections 1.. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. combined with a handful of model sentence structures. and going through the cites of the word in classical literature. making it over 2000 years old. discovered the undoubtable source. accompanied by English versions from the 1914 translation by H. Various versions have evolved over the years. and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. The first line of Lorem Ipsum. "Lorem ipsum dolor sit amet. Lorem Ipsum is not simply random text. It has survived not only five centuries. but also the leap into electronic typesetting. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. making it look like readable English. but the majority have suffered alteration in some form. If you are going to use a passage of Lorem Ipsum.. Richard McClintock.5.which are placed in the center of the page can cause a rapid decline of the site rate. remaining essentially unchanged.. very popular during the Renaissance. as opposed to using 'Content here.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form. It has roots in a piece of classical Latin literature from 45 BC. when an unknown printer took a galley of type and scrambled it to make a type specimen book. . The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. This book is a treatise on the theory of ethics.". It’s got to be created with an end user in mind. consectetur. There are many variations of passages of Lorem Ipsum available. images. Design and its future maintenance. adipisci velit." "There is no one who loves pain itself.10. or non-characteristic words etc. sometimes on purpose (injected humour and the like). All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary. to generate Lorem Ipsum which looks reasonable.

you’ll find there are quite a few things that are quite funny indeed. Speed With modems and other low-speed internet connections. For example: Code Website design used to be all hand-coded. bandwidth and storage were expensive.Musings and Amusings About Web Design When you stop to think about designing websites. However. unless a site is designed to be humorous. when you take a look at website design from the right perspective. Today. Perl and other web intensive languages. you wouldn’t think there is much about web design that is funny. web design packages can take care of all the coding for you. with virtually everyone connecting to the internet with a broadband connection of some type and with huge bandwidth backbones and the ability to cross-link to sites such as YouTube. especially when comparing today’s website designs to historical (hysterical?) ones. engaging and fully interactive websites without entering a single line of code. Storage Speaking of hosting issues. building a fast website meant minimizing graphics and photos and such luxuries as videos were essentially impossible. sometimes being as little as 10 megabytes and sites that required lots of bandwidth because of the volume of visitors could run up thousands of dollars a month in . Also. If you didn’t fully understand HTML. with hosting space and bandwidth limitations. leveraging video and high definition photography into your website is a snap without worrying about speed or size issues. a “large” website was expensive. you were lost. Storage space was limited. Now. which means you can put together complete.

This meant completing a complex website could actually run into the weeks or even months category. manipulating new photos and graphics and getting everything to look “perfect” could take almost as long to do as building a new website. manipulating photos and graphics to minimize page load times and other website optimizations to have a fast. pre-made templates and modular designs means you can totally do a makeover on a website in a matter of a few mouse clicks today. a designer could spend days on one page. Having to re-code dozens of pages. With high-speed internet connectivity and all the great web design tools and resources available today. great looking site. especially with community connectivity with blogs and social media such as Facebook and Twitter and SEO evolution to consider. While there are still hoops you have to jump through today. . unlimited e-mails and unlimited storage for under $5 a month. well rounded website can be fully completed in an evening. truly funny. when you compare it to what you had to do in the past. all the hassles and all the hoops you had to do in the past is. Tools such as website designer packages.bandwidth fees. you can get a complete hosting solution with unlimited bandwidth. building a great looking. taking a look at all the expenses. Today. without a doubt. the humor factor definitely comes into play. Between coding. When you take a look at what you used to have to do for building websites versus what little you really have to do today. Time Designing and building websites used to take forever to do. Maintenance Website maintenance and changes could take forever as well.