Adding Depth to Websites

An interesting way to make your website stand out is to add depth to it. It makes your site look distinct and unique while adding interest and excitement. This article, "Creating Depth in Web Design: 5 Design Tricks," shares some great tips:





1. Realistic Interfaces:
Making buttons look 3D with shadows and gradients is pretty common, but it works well. It can make your site feel more interactive and always looks sleek.

2. Wrappings & Ribbons:
Making ribbons or bars that actually wrap around behind the web page add space and depth to the page. It can look nice and add emphasis in areas where you want them.

3. Perspective:
Just like in drawing class, perspective is the classic way to add depth. Adding perspective can make your web page feel like its actually in an 3D environment.

4. Breaking the Grid:
Breaking out of your grid and allowing your design elements to overlap is an easy way to add depth with only basic flat objects.

5. Playing with Shadows:
Shadows are a simple way to show depth, but can be played with in all sorts of creative ways. Warping shadows being straight objects is a great way to make your elements feel 3D without having to change them.

Logo Inspiration

Every good website needs a good logo. A good logo should be simple and clean, yet also catchy and noticeable. It should be able to represent your brand in a concise and summed up manner. I found a great site, Logo Faves,  full of all kinds of logo designs for your inspiration:

SIngle-Page Web Design

I read this interesting article, "Exploration of Single-Page Websites," by Steven Bradley. It share some pretty awesome examples of web designs that only use one page:

Jess & Russ's website is actually a wedding invitation, and shares the story of the couple. You scroll downwards through beautiful designs and illustrations. It uses Parallax effects that have images scroll up as you scroll down, which add excitement and interest to the sight.

The Ballantyne site is also a single page, but has some navigation buttons as well as scrolling. It has three columns, as you scroll down the main center column the outer columns scroll upwards.

The UK Energy Consumption site uses the one page navigation, allowing the user to scroll down, and also has interactive buttons within its beautiful infographics. This is a perfect blend of good illustration, infographics, and web design.

Motion Graphics

Since I'll be taking a motion graphics class next semester, I surfed the web for some motion graphics inspiration. I found this great site full of awesome motion graphics pieces, Motionspire.com. It has all sorts of great stuff, from typographic films to stop motion films. Here are few of my favorites:

Creative Desktop Wallpaper Designs

Smashing Magazine has an ongoing project to have designers and artists create desktop calendars for each month. The calenders include beautiful illustrations and creative ways of showing the dates of the month, and they are free to download.  They are featured on this article,"Desktop Wallpaper Calendar: December 2012 (Christmas Edition)." Here are a few of my favorites for December:

Mistakes to Avoid

I recently read this article, "Top 10 Mistakes in Web Design." It gives some sound advice for what to avoid when making your sites:

1. Bad Search Engines:

There's nothing more annoying that not being albe to find what you're looking for on the web. When search engines don't account for typoes, plurals, etc, people will get frustrated and leave your site.

2. PDF Files:

These are fine for a link that needs to be printed, but when your site suddenly navigates to a PDF it breaks the flow of the site and causes usability issues.

3. Not Changing Color of Visited Links:

 This can lead to confusion, especially in larger sites, as people may forget where they've been and where they haven't.

4. Non-Scannable Text:

People on the internet don't want to sit and read a novel. Use headings, bullets, keywords, and short paragraphs to help break the text up.
5. Fixed Font Size:
Make sure to style your text so people can change the font size if desired. If not, it can cause readability issues, especially for older people.
6. Page Titles with Low Search Engine Visibility:
Consider carefully what you use for your page title, as that what search engines find. Make sure your most important words are in the beginning of the title.

7. Anything that looks like Ads

People have gotten used to ignoring ads. So, make sure your designs don't look like ads or users may not notice them.

8. Violating Design Conventions

Don't go too crazy and unique with your web layout. Keep consistent with basic web design ideas. That way, its more comfortable for users.

9. Opening New Browser Windows

New browser windows clutter the users computer screen and disable the back button.

10. Not Answering Users' Question

Make sure to present the info users need in an easy to access place on the site. If you don't give users the info they need they will leave your site.

Fun Design Blog

Here's a great site when your looking for some inspirations: "Design.org" It has all sorts of design, from graphic design, to web design, to interior design. You can view blog posts about various design projects, or you can go to the inspiration tab and see lots of works in different catagories: typography, architecture, etc.  It has some really innovative and interesting pieces. Here are a few that caught my eye: