Tag Archive: color

Web Design 101

June 28th, 2013 Alina Guzman Graphic Design, Web Development No comments

Have you ever found yourself stuck in the beginning of a website redesign? Maybe you’ve decided to finally launch that website you’ve been thinking of. Or maybe you are ready to take your existing site to the next level. Whatever it may be, it’s likely you’re a bit stumped if you haven’t done it before or don’t have a designer on hand. I’ve certainly found myself in that position before.

I’ll take you through the planning process and the basic design principles (as well as suggest resources you can use) since tomorrow morning the WDI students will have a design workshop for nondesigners! I originally wrote this guide for Esvee Group when I worked there.

There are a few elements you will want to map out before diving into building your website. You will want to plan out your layout, color palette, and typography.


The layout of your website will depend on the type of website you are building. The basic types of websites are e-commerce, blog based, portfolio based, or informational. To help you figure out layouts, ask yourself a few questions,

  • What is my website’s purpose?
  • What do I want my visitors to focus on?
  • What information do you want to share and how many pages will your site have?

Your website’s visual hierarchy depends on your layout. If you want to show a portfolio or products, you may want to work with a full-width layout. If you have a blog, a layout broken up with sidebars is preferable. If you want your visitors to focus on your photography or store-front image, a featured photo and vertical navigation is preferable.

Color palette

Picking a color palette for your website is one of the most important steps in the design process. Colors will influence your website and give off a message to your visitors. Some things to ask yourself before diving in are-

  • What feeling do I want to give off?
  • Do I want to keep the colors fun or professional?

Your colors will greatly depend on your brand. Color is linked with emotion making it easy to distinguish between a fun website or a professional one. Once you answer these basic questions, finding a palette doesn’t have to be very difficult. There are resources available that give you pleasant color combinations and shades. My personal favorite is Adobe’s Kuler. You can input a color and a wheel will match others to it.


A font can easily make or break your website. There are plenty of Typography Principles I can bore you with but it all comes down to common sense. When mixing fonts, don’t use very similar typefaces. Opt instead for a bold contrast like a sans serif with a serif. When sizing, make sure the font is visible. Sans serif typefaces generally read better on the web but if you size a serif correctly, it can work. And one last tip – never use Comic Sans!

Here is a great post on 40 Best Typeface Combinations used in web design by Smashing Magazine. Decide if you want to purchase a font or download a free one. Dafont is a great resource for finding free fonts, it even lets you test text when you search.


Once you tackle these important elements, you are on your way to implementing your website design! If you have questions about anything raised in this article, please leave a comment below.

Tags: , , , , ,

Find me on…

What I’m Tweetin’