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:

New Features in Dreamweaver CS6

Here's some of the new features in the CS6 Version of Dreamweaver, from the article, "6 Reasons to Upgrade to Dreamweaver CS6" by Janine Warner:

Fluid Grid Layouts
This tool is great for responsive design for mobile and tablet devices. It allows you to create 3 sets of style rules for 3 various screen sizes and uses a grid system that handles the calculations for each. It is located under the File Menu or in the New Document Window.

Web Font Manager
This makes it easier to use web fonts, allows you to use the @font-face tag,  and allows you to add your own fonts to the font-family list. Find it under Modify > Web Fonts.

CSS Styles Pane with Text Shadows,

Gradients, and Rounded Corners
Creating these visual effects is quite easy with Dreamweaver now. They've technically been in Dreamweaver since CS5.5, but since they are very useful and easy to miss, they are worth mentioning. Find these under the CSS Styles Panel > CSS Properties Pane > Add Property. When your property is added you can click on the arrow that appears to open a dialog box that allows you to make very specific changes to your styles, such as corner radius.

CSS Transitions
Transitions show cool effects such as having images fade into other images. CS6 includes two new helpful features for transitions: The CSS Transitions Panel and the Transitions Category in the CSS Rules Definition box. Find the panel under Window > CSS Transitions.

PhoneGap
This feature allows you to easily make apps for smart phones. It was brought to Dreamweaver in CS5.5, but CS6 integrates the PhoneGap build service. This allows you to save your apps in the cloud and download them to put them on app stores.