graphic design

Designing a website isn’t about just picking a nice color, throwing together a few navigational menus and hoping for the best, a great web designer will tell you that your design should brand your website and fit the industry you are targeting, while each part of the site must work together to form an “identity” that users will immediately recognize through your use of graphic design.

When developing a new property there are several aspects that I always choose to setup before attempting to dig into the deep design elements of the website.

Choosing Website Colors

The color(s) you choose for your site should fit the industry you are attempting to attract, for example a site about celebrity gossip will likely be served well by purple, pink and other colors that appeal to a mostly female demographic, while sports sites tend to do well with bold colors such as dark blue, dark red and even black. Knowing your demographic can help you determine which colors will work well for your purposes. I personally use Colorschemedesigner.com to find colors in the most efficient way possible.

Once you’ve chosen which colors you want to use on your website it’s important that you blend those colors throughout. For example, let’s assume you chose hex color code #3B5998 (Facebook blue), it’s important to include that color in your logo, navigation bars, highlighted links and even sidebar titles. When your users see your sites color scheme they should immediately associate that color with your product. If you don’t want a very bold color on your navigation bar a simple black bar with text or hover highlighting with your sites color scheme is also a nice solution.

Choosing Website Typography

The font you choose for your website is one of the first ways users will experience the content you provide. Just like choosing a color you want to make sure the typography on your website matches the type of content you provide. For example, looking back at our celebrity website, a “fun” font with slightly more curved lettering would be a great way to show off titles on a page. If you look at popular entertainment site TMZ.com they provide bold curvy titles that attract users with sensationalized headlines. When it comes to the actual content on the site however it’s a good idea to choose familiar fonts that users can associate with, for example Arial or Helvetica are both commonly used in the graphic design of websites and are easy to read since our eyes are trained to read them. You want your unique content to stand out among your sites colors, ads and other features, but not so much so that it distracts from your overall branding design elements. To find generally accepted free fonts I recommend google.com/webfonts. Once you have chosen your font type make sure to stick with that font throughout your sites design to create a unifying element.

Blend Social Media Options Into Your Site

Branding your site from a graphic design point of view doesn’t simply mean placing nice social sharing and follow icons on your site, if you want your product to stand out you need to develop icons that match your sites content. For example, if you use the hex code I highlighted earlier, it wouldn’t hurt to have Facebook, Twitter, Digg and other icons created in those colors or perhaps you can use basic sharing buttons but wrap them in a box border that matches your sites background or logo color. After you’ve blended in your social networking icons make sure to customize your Twitter, Facebook and other pages to match your sites color scheme, for example change your Twitter background color to the same color code as your sites logo. Many users will first view your content on social media sites before they click through to your site, if you make those social profiles feel like part of your final website product you can brand your website even when users are not actually on your property.

Website branding from a graphic design perspective comes down to understanding that all of the elements on your website need to work together and that work needs to be consistent. Before you design a website or higher a design consultancy firm you need to ask yourself what you want your site to say and then figure out how you want to deliver that message graphically both on-site and off-site.

No, these websites aren’t just for the little ones, but their designs certainly have a child-focused appeal to them. Check out the elements that make up a Kid-Friendly look on this week’s Friday Focus.

Designs of the Week

One page sites usually employ a storybook approach to the design and content, and this is a perfect example: playful hand-drawn illustrations, bright colors, large text, and animations.

Kids prefer books with lots of pictures in them. Never skimp on illustrations, even with icons; it’s so much easier to skim a site than a book and those will hold your visitors’ attention.

This may or may not be intentional, but the ruler in the background and the giraffe instantly remind me of those height measurement charts. Clever and refreshingly unique metaphor.

My favorite part? The candy cane style arrows!

A little too wide for my screen, but all the details are stunning, especially the buttons.

An otherwise straight-laced gets a touch of whimsy with some Disney pixie dust. Still looks professional, but with a more interesting color palette.

I like how practically everything in this design is custom, and it’s just the body text that needs a little tweaking. The moving background gives depth.

An abstracted version of building blocks that behave like sheets of paper when hovered over.

There are different kinds of interactivity, but this is probably the most fun: letting you scroll through content using the milk delivery truck. Excellent typography and other detail.

This reminds me of those video game maps where you move from one location to another each level. Using sailboats as navigation markers is utterly brilliant!