Tales of a Designer

Design the Home Page Last

The home page plays a very important role in most websites. It’s the few seconds that you have to grab that users’ attention to keep them on the site. This is why much thought needs to be put into the design. The best way to effectively plan out the home page design is to save it until last.

I know it can be hard to wait. When I first started designing, I always tackled the homepage first. But this was the wrong approach. Most home pages aren’t content heavy, and since content is key, start off by focusing on the important parts.

After analyzing the content, design out all of the inner pages. That way, you learn about the important parts and information architecture. You know what information will be the most relevant to the user experience. Since the home page reflects what content is in the site, designing the inner pages would be the best strategic move to make.

The home page has certain goals, and without getting an understanding of the pages behind that home page, you can’t effectively design for it.

Focus On What You’re Good At

Last year when I was in the market for a job, I used to stumbled across tons of job sites that seemed to be looking for the jack of all trades type of designer/developer. In my experience, thus far, it is rare to find a person who execute a great UI design in photoshop and handle everything through the major programming. Those types are few and far between, and I might only know two people with that type of skill set.

Companies that write these bloated job descriptions filled with unnecessary buzzwords tell me two things: either the company has no clue what they want, and/or someone person in human resources wrote it.

After getting my first job, I realized that I didn’t need to be that jack of all trades. I decided to focus on a few things (UI design, XHTML, CSS) and do them well. When you try to put everything on your plate, some things will start to fall off, ie, certain skills will suffer. Focus on what you’re good at, and let your team members do the rest.

On all the teams I’ve ever been on, everyone had their niche that they focused on. Some dabbled in other areas, but when you needed help with a certain problem outside of your own niche, you knew where to go. This is what builds great teams.

Of course this doesn’t mean that I am completely in the dark when working with javascript, PHP, ASP, etc., it’s good to have a working knowledge of them and also makes you a better developer. I am actually trying to learn more about other areas to increase my skill set a little, however, I will always know the areas that I’m strong in, and will keep them as my primary focus.

Use Real Content When Designing

For the longest time I’ve been used to using lorem ipsum when working on new designs in photoshop. It was always the quick and easy way to see what content actually looks like in a design. As of lately, this has method has given me a false sense of how to execute a new design.

Working with real content (if possible) while designing mockups in photoshop gives you a very accurate look at how the content will look once a site is on the web. It helps you gauge how your layout needs to be coded, whether that be widths, heights, margins, etc. It also effects the type of wording you plan on using when designing the user interface, especially for web applications.

“Using lorem ipsum dolor reduces text-based content to a visual design element (a “shape” of text) instead of valuable information someone is going to have to enter and/or read.” via

Using real content can also help answer questions that clients may have when seeing these mockups before anything is coded. You want to give clients the most authentic view of what their site is going to look like. The content is the most important part of any website, so make sure the client sees that.

Of course, it’s not always possible to have that actual content when it’s time to design the site. It can definitely be a hassle trying to gather the content. But when it’s available, the only way to make sure that it’s web-ready, is to get it in a mockup, and go from there.