5 fundamentals every web designer needs to understand

We all know intuitively what makes a website look bad: overused bevel effects, corny clip art, overcrowded layouts. These annoyances are easily corrected by developing with design fundamentals in mind—the same principles used by professional designers and artists alike.

Great websites bring together form and function. In fact, well-designed websites are seen as more credible, according to a Stanford study and are actually easier to use (as studied by researcher Don Norman). So here are five fundamentals to help you keep quality design at the forefront of your practice.


1) Follow the rules…mostly

In design school, they’ll give you a list of principles to abide by that assign rules to beauty—elements like layout, order and symmetry. But as you advance, you’re then told to break the rules a bit to create places for a viewer’s eyes to look by employing elements like variety, tension or contrast.

Here’s an example of a page I did in Edge Reflow CC. Can you spot the different design elements being employed, then played with?


2) Use imagery and icons to communicate when possible

There are some universal icons that people are trained to respond to. The magnifying glass (search), the house (home page) and floppy disk (save) are ingrained into your users already. Take advantage of those visual shortcuts; all those road signs should be immediately recognizable to you.


3) Color as a design element, not as decoration

Color makes all the difference, especially as our screens get better on our phones and tablets. It’s a facet of design that can be a really key part of the story your website wants to tell. Just use color to support content, not decorate a page. And often if you’re using a photo, the colors in the design should be sampled from the photos used so your design has a nice unified feel.

I quite like pulling color examples with color swatches – and the Adobe Kuler Web app is a great way to play with different themes and then import them into your design tools. One of the best rules to go with is to use complimentary colors. Which is basically using warm colors and cool colors together to provide balance.


4) Choose fonts that support content

There are literally thousands of fonts to choose from.

It’s up to you to mix and match – but remember that it’s best practice to use only up to three fonts at a time—a nice headline font, one for the main body of text, then one for any sort of call-out you might need. Often, that means using a sans-serif for the body copy, and for headlines you can get more interesting with either serif or sans-serif.


5) Help from others

All right, you’ve got your basic design elements, with pretty icons and pictures, with a sound color scheme and fun fonts. What’s next?

Getting help from others, of course! And not just random people on the street, but constructive critique from people who really know their stuff, like other designers/developers. This can be instrumental to go from an OK website to one that really pops. If you’ve never used Behance to post a work-in-progess, I recommend giving it a try. The active community will do more than just tell you “to make the logo bigger” – but give you advice that can make the difference between a good website and a great one.

To dive deeper into how to apply design elements to web development, check out my presentation from SXSW:

  • http://www.miraclegroup.com/ Jasonsmith21

    Web designing is the most important aspect while building a website. Whole website is dependent upon the design. The designer should also follow some fundamental rules in order to get the work done more efficiently.

    • Lee

      till it falls over due to bad code. user experience is as important as design.

      • prestonjones

        There isn’t one area that’s more important than the others. Any part of a project can bring down the whole thing if it’s done poorly.

  • http://www.designfacet.com/ Sean Jamshidi

    Web design is an art, an expression, means to communicate, to create excitement or emotion. Web programming is a skill that involves logic and structure, it communicates to the machine. The two are very much different but work together. Web design/programming should not come cheap.

  • Scott

    Great article and even better video. Much appreciated. Thank you.

  • Domenic J. Licata

    Started watching with interest, until I read that the author is Senior Worldwide Creative Cloud Evangelist for Adobe, at which point he lost all credibility. Creative Cloud disempowers designers by forcing them into a subscription model that must be maintained ad infinitum if the designer wishes to edit her files. It effectively triples the cost of usage of Adobe products over the longterm while removing choice and flexibility from the designer. Having to subscribe to one’s tools is wrongheaded and could only be attractive to stockholders. The Department of Visual Studies at the University at Buffalo will not be upgrading to CC, and recommends that its students not purchase CC subscriptions. The University has removed Adobe products from it Virtual Lab services, as has SUNY Stony Brook. http://visualstudies.buffalo.edu/vsFacilities/2014/01/10/recommendations-to-students-regarding-adobe-creative-cloud/

  • http://www.7eyetechnologies.com Kristina Roy

    Hi Paul Trani,
    You really shared good post about design tips. You shared some critical points about design that were difficult to discuss. It helped me to increase knowledge about designing. Your all tips are really nice and helpful to everyone. Thanks to share such useful tips. I am going to follow these suggestions to give new height to my designing career.

  • Mike

    Great video, really well done and very helpful. I find it very useful to put these 5 items together into a cohesive plan for designing new sites. It’s not necessarily that anything is new, but it’s helpful to put it all together the way you have.

  • http://wpy.me/en Wappy Web

    Choose fonts that are optimized for web (Typekit, Google fonts …) and don’t use too many. You’ll annoy the user and the web developer (optimization reasons).