Making Your Website Stand Out

There are millions of websites out there. It can be difficult to stand out in such a large crowd. Here is a good article that gives some good advice about the subject, "5 Ways to Make Your Website Standout from your Competition." It shares some great tips:


Anticipating the Needs of Your Audience
You should less about want you want on your site and more about what your audience wants. By putting the user first, you can meet their needs and keep them coming back to your site.

Brand Yourself With An Inviting Logo
This is the first thing people see. It gives people a feel for your brand and what you have to offer. A good logo is a great way to catch attention and make your website feel professional.

Set the Stage with Good Design
A good logo isn't all you need. The site needs to designed nicely as well. Simplicity is a good rule for good web design. Use a good layout, nice typography, and plenty of white space to make your website feel beautiful and clean.

Entice Your Audience with a Compelling Message
Even if your website's gorgeous, you still need to have good content. You need content that engages the users, content that is interesting, but still concise and to the point, something that people will remember.

Allow for Mobility
Surfing the web on mobile devices is becoming more and more popular. Since so many people use IPhones, IPads, Tablets, etc. you should make sure your website looks good on mobile screens as well.

According to the points this Author made in this article, it sounds like making your website stand out is really all about good design. Its not about flashy elements, and new tricky CSS styles, but about taking the time to design your website well.

Lots of Cool Icons

While we're on the subject of icons, I'd thought I'd share a cool website, IcoFaves, that has all sorts of fun icon designs. Since I make icons at my job, I can really appreciate the beauty of these little images. There is some great inspiration on this site. I love the wall icons. What a clever idea to put icons on the wall. I may have to try this someday. The black and white zoo icons are great too. Its amazing how the artist used a grid system to create incredibly simplified versions of zoo animals.

Using Icons in Web Design

We've all seen plenty of icons throughout various websites.  Icons are a great way to add visual interest to your site, and can make click-able links look more appealing. I found this article, "20 Examples of Excellent Icon Usage in Web Design," that shares some websites that use icons in a beatiful and successful way. I love how these show that you can use icons in very different ways. Compare the looks of the icons. Some are flat vectors while others are hand drawn images, while others are photographs. Each look adds its own flavor to the webpage. Icons can be organized differently too. I like how the "IamTiago" site has them placed in a random arrangement. In all the examples, the icons add beauty to the sight and make the links more noticeable and make users more likely to click on them.

Beautifully Simple Ads

Here are some great ad designs from the article, "Memorable Minimalist Print Ads for Your Inspiration." I love how these adds get clever ideas across with such simple moments like a single image or a combination of just two forms. It's amazing how much can be communicated with just the right visual device. Take  the Piano piece for instance. It showcases a piano concert in memory of the World Trade Center. Just by taking the image of those two piano keys, something we see everyday and turning them upside down, they've created a version of the two towers. It allows the viewer to look a moment, and then feel that "ah-ha" moment. It's quite brilliant. And the McDonald Wi-Fries are just plain funny. These are truly inspirational:

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:

Stories from Bad Clients

A friend showed me this great site, "Clients from Hell." It shares experiences designers have had with bad clients. They're hilarious! For all you fellow designers out there, you can probably relate. Here are a few of my favorite stories from the site:


"Client: I want this to have minimal quality.
Me: Do you mean minimalist?
Client: I’ll tell you what I mean."

Client: My logo looks a bit green on my home computer…
Me: Can you please send me a screenshot?
Client: Here you go.
Me: It looks fine here. Are you using a laptop?
Client: I do.
Me: Can you try adjusting the angle between the monitor and your eyes?
Client: Yep, that fixed it. However, you should make it the right colour from any angle.

I had just finished programming a website and started to insert the final, corrected content I received from the client when I noticed two e-mails inside the text that were from their competitor.

Me: Is this content really the final version? It seems like it was a copy/paste from the competitor's  website, judging by the e-mails on it.

Client: Good eye! It actually is copied from our competitor. Just change the e-mails to ours.

"We’d like the banner to be less wide in terms of height, but keep the same length."

And the classic:

"I don’t know what I want, but I’ll know it when I see it."

Web Layout Ideas

I found a great article for Web Layout ideas: "10 Rock Solid Website Layout Examples" by Joshua Johnson. It shares examples of simple yet effective website layouts:

Headline & Gallery: a grid of images with title.	Three Boxes: 1 large graphic and two smaller ones.
3D ScreenShots: headline with stylizes previews.	Full Screen Photo: Full image background with opague bar for content.
PowerGrid: Complex grid, boxes within boxes.	Featured Graphic: simple layout with large graphic.
Five Boxes: 1 large image, 4 small images.	Fixed Sidebar: vertical navigation on side of page.

Website Wireframing

With our final project coming up, I'd thought I'd look up an article on wire-framing. It's called "A Beginner's Guide to Wireframing," by Winnie Lim. It offers these tips:

Get Inspiration: Find inspiration from other wireframe or sites. I  Heart Wireframes is a great source.
Design Your Process: Find the process that works for you. A few examples are: Sketch then Wireframe then Visual then Code; Sketch then Code; or Wireframe then Interactive Prototype then Visual then Code.
Pick Your Tools: Choose the program to create your wireframe. This could be the Adobe programs like Illustrator or Photoshop, or there are available wireframing tools such as Balsamiq, Omnigraffle, or Axure.

Setting a Grid: Define a grid to help you layout and structure you elements.

Determine Layout with Boxes: Begin drawing your wireframe by drawing boxes to represent different types of information. Think about how you want it places and what information is most important.
Define Information Hierarchy With Typography: Next, add the type. Make your information clear and define clear hierarchy.
Fine-tuning With Grayscale: Then add shades of grey to better understand the way the website is going to look.
High-definition Wireframe: This is optional, but if you want you can add even more details like body copy or images.
Translating a Wireframe into a Visual:
Send your wireframe to a program like Photoshop, where you can complete the entire visual.

Grid Design For Web

In my graphic design classes, we learn that grid-based design is essential  to creating good page layouts. Grid-based design also applies to websites. Columns, gutters, alignments, balance and composition are just as important on the web as they are on the page. I found a great article about grid-based design for websites called "Grid-Based Design: Six Creative Column Techniques," by Sean Hodge. He shares some good advice:

Embrace Disharmony
Don't keep to your grid all of the time. Let some elements break it. Allow for some randomness here and there.

Joining For Variety
Incorporate more rows into designs. So many websites have vetical feels with plenty of columns, that a more horizontal website feels more refreshing. Try joining columns together or varying the number of columns in the layout.

Utilizing Angles
Using slanted and angled elements can add interest and excitement to your page. While some grid have the whole thing angled, its more practical to have some elements angled for emphasis.  Using images or Flash are great ways to accomplish getting your elements slanted.

 Escaping Boundaries
Break out of your grid boundaries. Int erupt the visual flow by cross the grid lines you have established. Pull quotes are an excellent example of this. It create a nice break in the flow and brings emphasis.

Illustrating Areas
Allow your illustrations and images to break the flow of the grid. They can add a lot of interest and variety from the grid.

Energizing Spaces
Energize the white space in your web layouts by balancing all out your elements in an asymmetrical fashion.

Genius Web Marketing

 I recently found Pixar's website for their new movie, "Monsters University". Check it out here. For a movie website, its one of a kind! It resembles an actual college website, and is fully functional! You can learn about admissions, academics, and campus life, just like a real college website. It is so hilarious! I thought I was at a real college site until I saw the monster photos. What really makes this so impressive is all the detail that has been put into the site. You can access a map of the campus, read faculty profiles, look at the academic calendar, and see student policies. It's filled with typical college information, except with an added monster twist. Take the class titles: SCAR 101: Intro to Scaring, SCAR 206: Disappearing & Hiding, and SCAR 431: Advanced Scream Types. Or look at the sororities and fraternities: Gamma Roar Roar, Omega Howl, Jaw Theta Chi, and Slugma Kappa Theta. There's even a store where you can buy real Monsters University merchandise that resembles actual college merchandise. This is such a clever marketing technique! It's far more interesting than the usual movie website, and really helps boost excitement for the movie. It goes to show how smart web design can really help market your product.

Comic Sans Comedy

I found this hilarious article by Ray Vellest, "Brands from a Parallel Comic-Sans Dimension". It showcases the project by Oleg Tarasov; a re-imagining of famous brands and logos in Comic Sans type. They are quite entertaining, or maybe completely offensive to some designers. This is what the world would look like if Comic Sans took over: