Jeremy Davis » Design

Developing a Website Design Process

Jeremy — Fri, 15 Jan 2010 21:16:51 +0000

With the new year’s upon us and resolutions being made, I have one big goal of launching my pet project website that I’ve been kicking around in my head for a few months. The first order of business to get the site going is to define my process for designing and developing it. I’ve gone over my design process for making this WordPress theme, but now I want define my process for building a site from scratch.

I’ve spend the last few weeks reading through several posts/e-books that attempt to define a proper website design process or expound on a certain step in the process. I believe that I’ve come up with a good process that can work well for individuals or for small groups building websites. I’ve also included a list of resources used to help me define my process in case you’d like to delve into the subject a bit more.

The Website Design Process

1. Site Concept

2. Content Strategy

3. Technology Strategy

4. Abstract Design

5. Content Development

6. Prototype Development

7. Technology Implementation

8. Final Design Integration

Overview

This is a very high-level view of the process I will be taking. It is purposefully vague so that the process can be viewed without being distracted by the multiple subpoints under each process step. As I go through this process with my website I will write a post for each step giving detailed descriptions, examples and resources to give a full picture of what each process entails.

If you’d like keep track of my website design process, you can subscribe via RSS or you can follow me on twitter to get all the updates.

Resources

The Web Design Process
A collection of other’s posts defining their website design processes.
Web Style Guide
A detailed, web-formatted book defining and describing a complete website design process.
How to Create a Standardized Web Site Development Workflow
A website design workflow with details on each step.
Web Design and Workflow Process Comparison
A collection of other’s high-level website design processes.
The 3 Components of Good Web Design
A starter post giving an overview of three main components to website design.
The Website Development Process
The telling of a basic website design process through lego men. Very fun to look through, and yet very helpful.
The Nine Pillars of Successful Web Teams
Defines the different website design processes as pillars to be given to different team members.
6 Steps of the Web Site Design and Development Process
A website design process with details explaining each process step.

The Gorgeous Tea Packaging Design by Forte

Jeremy — Wed, 11 Nov 2009 03:38:56 +0000

While visiting a boutique with my wife I saw this tea from Forte and knew immediately that I had to do a post showcasing their amazing packaging design. Beautiful work in not only the package design, but the photography of their tea is stellar as well. Enjoy.

If you haven’t gotten enough of tea packaging design, perhaps you’d be interesting in some coffee shop and cafe logos to look at.

Designing for Failure

Jeremy — Tue, 29 Sep 2009 12:59:10 +0000

When any device, product or gizmo gets released to the world, it is the lovechild of the designer’s initial idea and hours of refinement. The refinement may come from the device’s physical makeup, the materials used for the manufacturing or the colors used for the aesthetics. It may also come from the addition or subtraction of features. But a majority of any refinement comes from removing all of the flaws, bugs and malperformances of the device.

Removing all errors from a device is an obvious goal. Some product makers don’t always seem to take it to heart as well as others do. But I can image that even for those more failure-prone devices there was some manager during the brainstorming session discussing how this product should work, with an assumption that frequent failures for the device isn’t an option.

But have you ever noticed a device that was designed for failure. Meaning that instead of fixing the problems that occur in the device, the maker designed the device to make recovering from failure easier.

It almost seems oxymoronic to do such a thing, but I recently came a device that does just that which prompted a few thoughts.

First, I’d like to give brief definition of what designing for failure is to me. Followed by my post-inspiring story of what device I came across that was designed for failure. Then I will dissect what criteria this device follows that could make it possible for devices to also be designed for failure. Finally, I will pose a few other thoughts that came to me about this whole idea.

And here … we … go

Designing for Failure: Definition

Definition: A device that the builder took time and money to implement a system to diagnose errors, report them to the user, and instruct the user on how to repair the device.

Rule 1: This must be a tangible device. Nothing completely digital.

Rule 2: This must be a moderately common device. Nothing too unheard of.

Designing for Failure: The Inspiration

Lately I’ve been making screenshot printouts for a web app demonstration at work by using my company’s mammoth printer. This is one of those printers that take up half a room, but can do pretty much anything it’s asked to do. Seriously, I saw a guy feed some dough into it one end and 10 minutes later a pepperoni pizza came out the other side.

As I’m printing the handouts, the inevitable happens and something breaks during the printing process. The paper runs out, the staple clip is empty or the paper gets jammed. Regardless of the reason this time, I’m not getting any more handouts until it’s fixed.

This printer has one very nice feature that makes correcting the problems a breeze. When something goes wrong, the printer shows a video on the display instructing the user how to fix the problem. Also, there is a small amber light next to every door, tray or imaginable place where something could go wrong. When the video starts playing, the corresponding lights turn on to help guide the user to the problem area.

For more complex problems, such as removing sections of the device and removing paper jams, the printer can follow the user’s progression though the problem solving steps and change the video and lights to the current step.

While waiting on my printouts, my mind began to contemplate, as it’s prone to do, this printer’s design and its implication on design as a whole. So I’d like to take some time and analyze this designing for failure idea.

Designing for Failure: Criteria

Although this printer is currently the only device I know that is designed for failure as I defined it earlier, here are my criteria for when a device should be designed for failure. The overarching question that these criteria are trying to answer is ‘When should a device be designed for failure?’

1. The device fails often.

The device must break regularly before it would be cost effective to design a diagnosing and reporting system.

We have all pushed the print icon on our computers, gotten up to get our print to find that the print failed for whatever reason. Printers fail and they fail often.

Let’s assume it’s simple to repair a standard oven. Well the standard oven only breaks once every 3-5 years. There’s no reason to waste R&D time and money to implement a design to guide users in step-by-step instruction on how to repair their broken ovens. If it breaks twice a day, then that’s a different story.

2. The repair is a simple, but not immediately obvious, one.

The repair should not be so simple that most people will be able to solve the problem without assistant, but also not so complex that it requires any extensive amount of time or training.

An average person can open up a printer tray and add more paper to it. He or she should also be able to see the paper jam next to the glowing amber light and remove it. Repairing a printer requires no tools or advanced training.

Another device that is designed for failure, but the method to repair it isn’t relayed to the user, is an automobile. Error codes are captured with information detailing what the problem is, but that information is kept from the user. The mechanic on the other hand can plug into the car to retrieve the error codes in order to repair the automobile’s problem.

Users aren’t privy to the diagnostic information because the repairs aren’t simple. A how-to video and amber light indicators won’t cut it when it’s time to rebuild the carburetor.

I added the “immediately obvious” clause because of this often failing, yet simply repaired device, a toilet. This device fails more often than I wished, but the solution is simple. With a clogged toilet you can basically do one of two things. You either pull the clog out with a plunger or you push it through with an auger.

3. The device is on-demand.

Necessity is the mother of invention.

-Plato

The device needs to be repaired in a timely manner with as minimal downtime as possible.

If waiting a few days for a printer to be repaired were acceptable, then I doubt it would be designed for failure. But who prints his or her important documents out a week before being needed. I have many memories of running around my college campus in desperate search of a working printer minutes before my term paper was due.

A printer is designed for failure, because, frankly, failure is not an option. The print is needed now, and waiting even an hour is unacceptable in most cases.

4. The device relies on uncontrollable variables.

The main reason why a device could be designed for failure is when there are a number of external variables that the device isn’t able to properly account for or it cannot easily fix those externally introduced errors.

Printers suffer from a large number of externally introduced errors. The person loading the paper could have put the wrong stock or size sheets in the tray. The paper itself could be wrinkled or dog eared so that it doesn’t go through the printing process correctly. And even though it might be simple to qualify which types of errors occur most frequently in printers, I would imagine it would be very expensive to build the printer to check for and correct these errors. These types of external variables are the main reason why a printer is designed for failure instead of being able to be designed without failures.

Conversely, the Xbox 360 is the one of the most failure-prone devices around, but that’s designers fault. The failures came from the manufacturing process and has nothing to do with external sources. Why would they build the device for failure when they are in control of the failures to begin with? Showing a video on how to solder some joints or how to install an extra heatsink onto a chip would be ridiculous, because Microsoft controlled all of these problem areas back in the assembly process.

To start an always loved Apple vs. Microsoft debate, a huge reason why Apple products don’t fail as often as Microsoft products do is because Apple controls almost every stage of production of its devices, both hardware and software. Microsoft typically only controls the software and must account for an insane amount of variables that come from hundreds of different hardware vendors building for a Microsoft platform. Yes, I am aware that the Xbox 360 is both hardware and software controlled by Microsoft. Feel free to make any assumptions about what that means about the quality of the company’s products.

Designing for Failure: Questions

Is this acceptable?

If a product meets all four guidelines above, is it acceptable (or even necessary) to design the product for failure?

Is the failure still the designers fault?

Even though the major reason for the failures comes from external variables, should the device be designed to eliminate all possible failures? We were able to send a man to the moon over 40 years ago, can we seriously not create a printer than doesn’t get paper jams? Is the printer manufacturer designing for failure as a cop out because its accounting team ran some numbers and found out that it’s cheaper to design for failure than it is to reduce the number of failures.

I understand that my printer scenario has a classic quantity vs. quality dilemma. Do you want a printer that prints 100 pages per minute with a high frequency of errors, albeit easily fixed ones, or would you like a printer that prints 10 pages per minute but never has errors? But does this dilemma still give the maker an excuse to not build a better device.

What other products are designed for failure?

I tried thinking of other devices, that met my definition, that obviously took the time to instruct its users on how to repair the device when it breaks, but could not come up with any other commonly used devices. This alone is a main reason why the idea of designing for failure was so intriguing to me in the first place. It seems very odd for this design pattern to not be repeated elsewhere. Is a printer really the only common device that it makes sense to design for failure?

Alas, I don’t have a large enough of twitter followers to properly crowd source the idea as I would have liked. Help, me out in the future and follow me on twitter.

I would love to hear any opinion you might have about this Designed for Failure situation. The idea is very new to me and I would love to get other’s thoughts about the matter.

The What, How and Where of Favicons

Jeremy — Wed, 29 Jul 2009 03:58:40 +0000

While working on my current blog theme I got so caught up with doing all the larger design aspects that I forgot about adding a favicon to my new theme. So often this little site element gets forgotten when it shouldn’t. It’s presence is important to help brand a site and make it recognizable when viewing lists of sites in bookmarks.

So in honor of our little friend that is oft neglected, here’s a good resource for all things favicons.

The Whats of Favicons

What is a Favicon

A favicon is a small icon used to represent a site. Ideally, a favicon should be similar to the site’s theme or logo in order to be quickly recognized and associated with the site.

When visiting a website with a favicon, most browsers will display the icon next to the address bar. Browsers with tabs will also display the favicion next to the site’s name in its tab. Favicons are often displayed in lists of websites such as in bookmarks or feeds.

What does favicon stand for?

Favicon stands for Favorite Icon.

What are a favicon’s dimensions?

Most favicons are displayed at 16×16 pixels, with a few cases where sizes up to 48×48 are displayed.

What format should a favicon be in?

The safest format for a favicon is still the .ico format. Most modern web browsers will accept GIF, PNG and JPEG formats, but Internet Exploder Explorer only reads the .ico format.

The Hows of Favicons

How to create a favicon from an image?

Since a favicon is a perfectly squared image, images being converted should also be square. If it isn’t the favicon could look skewed from the original.

There are a few more robust desktop icon convertor such as GConvert 5, but it is overkill for converting a simple favicon.

There are several web-based favicon generators that can get the job done quickly. I used the one from Dynamic Drive, but there are others such as favicongenerator that seem to do just as well. Here’s a post featuring 20 different online favicon generators.

Upload the image to the site and download the converted .ico file to use.

How to create a favicon without having an image?

Creating a custom favicon that isn’t derived from a pre-existing image is made easy from a few nice web-based tools. The nicest one I’ve seen is favicon.cc. It has a 16×16 grid that can be painted on. It gives a live preview of what the favicon would look like in an address bar. The custom favicon being painted can be downloaded and saved as a favicon.ico when the favicon is complete.

There is also a similar favicon creator at favicon-generator.org.

How to put a favicon on a website?

Now that the favicon.ico image is ready it’s time to get it on the website.

In the of the HTML, put the following

There are a few variants to this, but this should be the safest.

Be sure that the favicon.ico is in the correct path listed in the href attribute. In the example given above the favicon.ico file is in the same folder that the HTML file is in, which is typically the root folder. If the favicon was in the images folder, then the href should be href=“images/favicon.ico”.

The most compatible method is to put the favicon.ico in the root folder of the website, since most browsers will be looking there for it.

The Wheres of Favicons

Where to find more information about favicons?

A natural first would be the Favicons Wikipedia article. It details some more information about the format debates surrounding favicons as well as showing more ways to link to favicons in HTML.

Answers.com Favicon topic has a very lengthy article about them and even a video detailing how to make a favicon.

Really those two articles are about all one should need to know about a 16×16 image.

Where to find galleries of favicons?

There are a few sites dedicated to showcasing favicons from all over the web.

Here are just a few:

Where to find Best Of Favicon Collections?

There were a few notable posts from blogs that featured some of the nicer favicons.

Smashing Magazine did a 5 part series on them:

I also enjoyed this favicon collection from DeltaTangoBravo.

I hope this post could help you with some favicon issues you might be having. Do your best to not take the little guy for granted. Being able to pull off an effective branding message in just a small 16×16 square is quite a feat, but it’s worth taking the extra time to get it right.

39 Grunge Websites

Jeremy — Thu, 22 Jan 2009 03:24:21 +0000

Here’s a collection of websites that exemplify dirty, torn, distressed and grungy.

This is a follow up to last week’s 39 Grunge Resources Post.

Dirty Pretty Things Band

Have a good day.

39 Grunge Resources: Tutorials, Textures, Fonts, Themes, Brushes and Icons

Jeremy — Wed, 14 Jan 2009 12:32:06 +0000

A collection of tutorials and resources useful when trying to accomplish the grunge, worn and dirty style of design.

DESIGNING GRUNGE

Tutorials about designing the grunge look

GRUNGE RESOURCE COLLECTION

Sites focused on grunge design or good posts that deliberate on grunge design and give examples

Grunge Style in Modern Web Design – Smashing Magazine gives a full writeup on grunge design with website examples, grunge fonts, icon sets, and textures.
Ultimate Resources for Grunge Design a Massive Collection – Design Shard gives a huge list of grunge design with tutorials, brushes, photography, textures, fonts and Wordpress themes. Excellent list.
Grunge Style Blog
GrungyBit
The Secrets of Grunge Design – An absolutely fantastic post explaining grunge design in detail. It shows the elements, colors and websites of grunge design.

FONTS

Good typography for grunge designs

BRUSHES

Grunged out Photoshop brushes

Grunge Ink Splatter Brushes
Splatter, Spray and Watercolor Brushes
15 Scratch Splat Grunge Brushes
Grungy Textures Photoshop Brushes
200+ Free Grunge Photoshop Brushes
12 Grunge Brushes
Grunge Corners and Edges Photoshop Brush Pack
33 Subtle Grunge Textures and Effects
Journal Brushes – Not exactly grunge but they have a nice distressed look that could be useful in grunge design.

TEXTURES

Grunge textures such as rust, dirt or paper

ICONS

Mostly social media icons given that trendy worn effect

WORDPRESS THEMES

Collection of grunge Wordpress themes

The Typography of the Quantum Of Solace

Jeremy — Tue, 18 Nov 2008 21:03:59 +0000

While watching the latest James Bond flick, the Quantum Of Solace, I couldn’t help but notice the beautiful typography used throughout the film. Whenever visiting a new location in the film there would be a short intro shot showing you where the events are taking place. Enjoy.

I feel like I’m missing one of them, if I find it I’ll be sure to add it.

What I Hate About Becoming a Designer

Jeremy — Wed, 11 Jun 2008 13:03:20 +0000

It’s been a year since I started to get more into the design aspect of computers but I’d like to share some things that frustrate me as I make this push.

1. Seeing Everything Through a Designer’s Eyes

This is the biggest change for me. The more I get into and learn about design the harder I find it to enjoy simple things. Now I try to analyze everything in a critical manner seeing what could be done to improve upon it.

Here’s a few examples of how my thought process has changed.

Playing a Video Game

A Year Ago – Kill the Covenant.
Today – I really like this color brown for the Master Chief, this soft blue would compliment his armor well.

Watching a Movie

A Year Ago – Opening Credits -> Movie Logo -> Movie -> The End.
Today – Opening Credits -> Movie Logo What font is that? Is it scalable? Would it look good in greyscale? It might be better if … -> Movie -> The End.

Seeing Comic Sans in Use

A Year Ago – What a cool looking font! I like how they used it in 5 different colors and with 10 others fonts also.
Today – A little smile comes across my face as I remember my previous reaction, I roll my eyes and quickly turn away.

Taking a Picture

A Year Ago – Point -> Click
Today – Point -> Check my framing. Apply Rule of Thirds. Any distracting elements? Check depth of field. -> Click

2. Keeping Up With the Jones’

In this designer/blogger world there are always newer, shinier toys to be purchased and other people doing some amazing things that you would like to be doing.

Buying a Computer

A Year Ago – I can just get a few parts and upgrade my PC.
Today – I need an iMac for the house, a MacBook Pro for serious work, and a MacBook Air for taking to cafes.

Darren Rowse, David Airey, Elliot Jay Stocks, Brian Clark, Naomi Dunford, Crystal Clayton, Collis Ta’eed, Maki, Lisa Bettany, Seth Godin.

A Year Ago – Who?
Today – I hope to one day meet these people that have educated, entertained and inspired me. And maybe even do the same for them.

3. Time Management

Time is one of those things that you never have enough of. Since makings strides at being a designer I find myself spending a large portion of my free time doing some design or blog related things.

Free Time

A Year Ago – Watching a movie or playing some video games
Today – Reading RSS or design book, working on a project, chatting with a client or potential client, blogging.

New Website Visits

A Year Ago – Usually takes about 2 minutes to accomplish whatever it is I needed.
Today – Now it takes about 10 because I now thoroughly critique all aspects, Color, Navigation, Usability, Standards Compliance and Logo Design. If I like the design I bookmark and tag it. If it does something that I’m not familiar with I dissect the code until I understand what was done.

Feeds to Read in My RSS Reader

A Year Ago – 0
Today – 95 and counting

Domains to Maintain

A Year Ago – 0
Today – 9

I Don’t Actually Hate Being a Designer

If that were entirely true it’s not something I would be working hard at. Thus far it has been very rewarding and I look forward to my future, but it is a lot of work. I don’t have as much free time as I use to but I also feel much more profitable with my time than a year ago. I use to spend hours a day playing an online role-playing game. I haven’t logged onto my character since Christmas. I might not be the world’s greatest Black Mage because of this decision, but I have gained so much more by learning new skills and meeting great people.

I truly believe this is only the beginning and that the best it yet to come.

How has becoming a designer/blogger/writer changed you?

20 Coffee Shop, Coffee House and Cafe Logos

Jeremy — Fri, 01 Feb 2008 02:51:39 +0000

While looking through the logo idea books at my local bookstore, I noticed that many of the examples come from the coffee industry. I thought it might be nice to see some of them grouped together, so get your caffeine on.

Seattle’s Best

Java Jungle

Blue Dog Coffee House

Ritual Roasters

Tully’s

Spike’s Coffees and Teas

Perk’s Coffee

Gloria Jeans Coffee

Mocca Lounge

Black Dog Coffee House

Perks Coffee

Beginning SEO: 5 Basic Tips

Jeremy — Wed, 23 Jan 2008 20:54:13 +0000

These are just a few SEO tips I’ve learned while trying to become a better designer.

Use your Headers

The header tags (

) are designed to structure your site’s content based off their importance. Don’t use custom CSS tags for things like titles of pages or subtitles, modify the existing

and

tags instead.

Hyphens vs. Underscore

Use hyphens to separate words in directories and file names. This is because search engines treat hyphens as spaces whereas underscores are not.

Example:

File Name	Search Engine Sees
my-keyword-loaded-picture.jpg	my keyword loaded picture
my_keyword_loaded_picture.jpg	mykeywordloadedpicture

Use your TITLE tag well

Use keyword-rich titles to help promote certain search terms for your site. Also the title tag is what used for your sites name on Search Engine Results Pages. If you were searching for puzzle and the top two results were Bob’s Store | Homepage and Andy’s Puzzle Warehouse :: Puzzles, Games, and Toys. Which one would you think is more likely to have what you need? Also try to keep the title to around 7 words to avoid looking like spam and to give your chosen keywords more weight.

Generate a Sitemap

Sitemaps are files that contain the basic heirarchy of how a webpage looks. They are used to organize the links and type of data on each page. Google, Yahoo, and MSN all support the Sitemap 0.9 protocol. With sitemaps, search engines can now more efficiently find all your website’s pages and how each page links to others.

Content Hierarchy

Search engines read HTML. Sites only get fractions of a second when first being indexed by search engines, so the higher up your main content is, the more accurate the initial indexing will be. Even after your site has been fully indexed, search engines give higher priority to content higher up in your HTML. Luckily the wonder of CSS makes it possible to structurally put your content first put visually move it around to different parts of the site.