The Web Design Process

At the start of designing a new website, there are a number of risk factors that we need to consider. Many times, designers and clients alike can fall victim to not thinking a design through. Why does this happen? For any number of reasons like deadlines to the excitement of jumping into a new project. To get the best end product for your client, it’s always an excellent idea to hash out the scope of the project, identify any problems, and evaluate your user before you start designing anything. How do we do this? By using a UX design process.

Step 1 – Define The Project

Defining a project can be accomplished by asking your client the following questions:

What type of website will this be? Marketing? Branding? Web App?

What are the main objectives of the website? Sales? Marketing? Education?

What’s the content? This one is a bit more a grey area. Someone might be a competent writer, but they might not know anything about writing for the web. Generally what I find works best is to have the client submit their content in point form (a rough draft will work too). From that draft, read it through and suggest some edits to your client that better gear the copy for the web. If you’re interested in learning more about writing for the web, I’d suggest reading Rockable Press’ How to write great copy for the web book or ebook.

At this point, you should also create a content plan, outlining who is responsible for what content. In some cases, you may have multiple people submitting content for a single website. You should also include deadlines for when the content is due.

Are there any reference materials for the design? This could include things like reference websites, colors, styles, and mood-boards.

Define a style guide. This is the last step in this section. It includes designing a style guide for the site that includes stuff like: types of page titles, style of copy, certain keywords to focus on for search, etc…

Part 2 – User Research

User research is the defining of your audience and market.

Who is the user group(s)? Web Designers? Bankers? Doctors? IT Professionals?

Define Personas. In many cases, you may have more than one user group. We use personas to create a profile for each user type the website will have.

Part 3 – Features

In the third step, you’ll define any special features the website requires.

What are the special features the website will have? Web Store? Video Player?

Prioritize your features. Which features are the biggest priority? Which ones are most important?

Part 4 – Wireframing

The next step in the process is to create a wireframe for the project. Wireframing is a rough outline of each webpage and the content on it. There are a number of different ways you can create a wireframe for a website. Some designers prefer to do it on paper, personally I like to do mine using HTML, while others prefer to user a tool like Omnigraffle.

Define your task flows or paths. Task flows are paths that the user will follow to complete a desired action. An example of this would be the checkout process in a web store, or signing up for a new account on a web app.

Create a sitemap.

A sitemap is a wireframe of all the website pages. A tool that I find really useful for this is the slickplan.com web app.

Part 5 – Design Comps

In the design comp phase, we start jumping into Photoshop and creating some rough comps for the website’s user interface. Once you have designed your comps, you should provide them to your client for feedback. Taking your client’s feedback, make any changes to the UI that they would like.

Create style guide documentation. At this point it’s always a good idea to create a style guide for the website. Using a style guide will help you keep the interface consistent across all pages. Therefore, optimizing the user experience.

Your style guide should include a list of all the styles that have been defined for the website. This can include a list of css styles, and a User Interface Design Kit. For an example of a UI kit, check out Freshbooks’ iPhone Application GUI Kit.

Step 6 – Coding

At this point, you are ready to begin coding your website. I’m not going to get into a long explanation for that as this post is supposed to be about user experience! Just follow your style guide and all should be fine.

Swiss Inspired Minimal Resume Pack $6 | Buy Now

What’s included?

Here’s a list of what’s included in the resume pack:

1. Available in six color ways: white, red, black, blue, yellow, and green
2. Uses Helvetica system font. Arial system font would also work
3. Letter size 8.5×11
4. Formats: Illustrator .ai, Illustrator .eps
5. Versions: Both formats saved in Adobe CS4 and CS
6. All colors contained within 1 layered Adobe Illustrator file, 1 layer per color
7. Available exclusively from graphicriver.net

Preview

Swiss Inspired Minimal Resume Pack $6 | Buy Now

Awesome

Basically anything I find awesome, from a cool web app to an awesome youtube.com video.

Code

This category kind of replaces the previous Web Design category. Under here you’ll find posts on css, html, php, and more.

Design

This is a new category that will feature stories on graphic design, the grid, Photoshop tutorials, and Illustrator tips.

Freebies

I decided it would be better to group all my freebies into one category. This is the place to go for free WordPress themes, website templates, vectors, and fonts.

Freelance

This is another new category that will offer tips for freelance designers.

Hustlin’

The Hustlin’ category is inspired by Gary Vaynerchuk and his book Crush It!. Here you’ll find tips on building a successful blog and personal brand online. The first tip is easy, buy Gary’s book it rules.

Minimal

My minimal themes, templates, and posts have been some of my most popular content. Therefore, I decided to create a new category dedicated to minimal design.

Social Media

This one is straight forward, talk on Facebook, Twitter, and other social media websites.

WordPress Themes

This is the only category I’m carrying over. Here you’ll find free WordPress themes, from designers around the world.

How do these new categories sounds? Let me know what you think below in the comments. Thanks!

An Event Apart is put together by the good people behind A List Apart. If you don’t know, A List Apart is one of the longest running, and most respected, web design blogs. Early bird cost is $895, regular price is $995. They haven’t released that much info on the event yet but there is a list of speakers up. I’m going to try to make the Seattle event if time and funds allow.

Future of Web Apps
Miami February 22-24
Dublin March 6

This conference interests me the most as Web Apps are one of the quickest growing areas on the web. The conference is part seminar, part workshops. Some of the highlights include: The future of the browser, building a web app from a-z, moving from free users to paying customers, interface design tips, and many more. I’m hoping to make the Miami event in February. Current cost for the seminars and workshops is $695.

South by Southwest
Austin March 13-17

This is one event I would really like to attend. SXSW combines the best of emerging music, interactive and film. Panel topics cover everything from web design, usability, and blogging to wireless innovation and new technology business models. Other panels focus on more general topics that are nonetheless relevant to the digital creatives who attend SXSW Interactive. Registration cost is $425 until Jan 16, then it goes up again.

AIGA Design Conference
Memphis October 8-11

AIGA is the American Institute for Graphic Arts. This one isn’t as web design specific, it’s more design and graphic design driven. However, all good web designers still need to be good designers. This is one of the bigger events of the year and is definitely worth attending. The Registration fee is currently $700 (for non-members) or $500 (for members).

http://www.thegridsystem.org

Isn’t it great when you find a new website that just blows your mind? thegridsystem.org is one of those websites and it is also one my new favorites.

I’m a huge fan of using grids in your web and graphic design work. The Grid System provides you with all the information on using grids that you could ever want. There is articles on how to use grids and grid principles, grid tools, books on grids, templates, and a blog on grid related websites and links.

At this point, there are 6 free, downloadable grid templates you can grab. 4 for InDesign (print) and 2 for Photoshop (Web). That’s an awesome free giveaway! Also, don’t miss clicking on the “show grid” button at the top-right corner of the website. It will reveal the grid that the actual site is built on – it’s a cool little feature. Consider this one bookmarked.

One of the biggest mistake newbie freelancers make is under valuing their services. $100 for a logo an stationary package is not acceptable. If you choose to work for these types of rates, it is a slippery slope and you will always be working for below average pricing. Why would a client pay market rate to you once you have already lowered the bar? Not to mention, any possible referral work they send your way will also be expecting the same discount.

Trying to set your rates can be a confusing problem. My recommendation would be to charge what you feel you are worth. If they hourly number you quote makes you feel content with the work you are producing then that is all that really matters.

Hanoi Rocks – Decadent, Dangerous, Delicious

This is a 2-disc greatest hits package from one of my favorite bands. If you like Guns n’ Roses, you will love Hanoi Rocks. Some of my favorite tracks are: Malibu Beach Nightmare, Lightnin’ Bar Blues, and Tragedy.

The Lawrence Arms – Oh Calcutta!

The latest release from this Chicago band is bar far their best. Dueling vocals and amazing song writing are the strengths of this group. Check out the following tracks: The Devil’s Takin’ Names, Cut It Up, and Key To The City.

Smoke or Fire – Above The City

This album was a bit of a hidden jem for me. I heard the band on a Fat Wreckords comp and decided to buy the album. Possibly the best $15 I’ve ever spent – or maybe not but still damn good and worth picking up. Best songs are: California’s Burning, Filter, and Delawhere.

Izzy Stradlin – River

I’m kind of surprised I didn’t put this #1 as Izzy Stradlin is probably my favorite musician of all-time. Since his departure for Guns n’ Roses in 1992, Izzy has continued to release a steady stream of amazing material. It’s tough for me to pick one album but this is a great place to start. My favorite tracks are: River, Far Below Me Now, and Jump In Now.

The Loved Ones – Keep Your Heart

My brother turned me onto this band after his band toured with them a few years back. This is by far my favorite album of 2006, bonus points for great artwork. Top tracks include: Suture Self, Player Hater Anthem, and 100k.

Matt Mays & El Torpedo – Self-Titled

Canadian Content! Matt Mays was another artist I was lucky enough to stumble upon. His band is probably my favorite Canadian group at the moment. If asked to describe him, I’d probably say he is a less commercial version of Sam Roberts. His latest album Terminal Romance is also worth picking up. Some of my favorite tracks are: St. George’s Lane, Time of Your Life, and Travellin’.

Screeching Weasel – Weasel Mania

This is a must for anyone interested in what pop-punk sounds like when it is done right. These guys were one of the originators and still one of the best. This is a greatest hits album with 34 tracks on it! It’s hard to pick favorites but here you go: Hey Suburbia, I Wanna Be a Homosexual, and My Right.

Huey Lewis & the News – Greatest Hits

Is my age showing? Whatever! Huey Lewis rules! This is his latest greatest hits record and it’s great if you wanna kick back and reminisce with some great 80′s rock n’ roll. Best tracks include: The Heart of Rock n’ Roll, If This Is It, and Hip To Be Square.

The Bronx – The Bronx

Feeling lazy, need a little motivation? Just throw this record on, it will get you motivated. It’s definitely the hardest record on this list, and it will get you rocking in all the right directions. Oh and bonus points again for an awesome cover. My top tracks are: Heart Attack America, White Tar, and They Will Kill Us All.

Teen Idols – Self-Titled

Another awesome pop-punk from back in 1998, before the mainstream explosion of the genre. Straight ahead, fast, catchy, melodic punk rock – just the way I like it. My favorite tracks are: Come Dance With Me, Porno Shop, and Lovely Day.

blockquote

blockquote is one of the styles where you can have a little fun and do something interesting. I’m kind of a minimalist so I generally prefer to just add some padding and a background color. This is displayed in the blockquote below. Feel free to customize this any way you like.

blockquote {
padding: 20px;
margin: 0;
background-color: #ebebeb;
}

.alignright

The .alignright class effects images in a post that have been set to align right. You should add a bottom and left margin around the image(s) so they display nicely in the flow of the post.

.alignright {
margin: 0px 0px 10px 10px;
}

.alignleft

The .alignleft class is the opposite of .alignright and refers to images in a post that have been set to align left. For this class I would recommend adding a bottom and right margin as below:

.alignleft {
margin: 0px 20px 20px 0px;
}

ul

All of the list properties are most likely an obvious edit but I thought I would include them anyhow for any beginners out there. “ul” is the name for an unordered list – so any list that is not numbered. A couple basic styles that are recommended are margin, padding, and list-style-type. I would set your margins to 0 in most cases. Padding can also be 0 unless you would like to indent the list items or pad them vertically. list-style-type will tell the browser if you wish to display bulletpoints (and what type) or not. I generally set this to no in the ul and define it in the li. Here’s an example:

ul {
margin: 0;
padding: 0px 0px 10px 0px;
list-style-type: none;
}

li

The li property refers to the actual list item line. If you would like to include a bullet point for your list, this is where I usually will define it. Adding square to list-style-type will, yes you guessed it, produce a square bullet point.

li {
list-style-type: square;
}

ol li

I’m going to skip over talking about ol on it’s own. It is essentially handled the same way as a ul for basic use. ol is short for “ordered list” or a numbered list. We just need to add one line to our style sheet to have the numbers appear.

ol li {
list-style-type: decimal;
}

h1-h6

I’m not to going to list examples for each of the header tags. Instead I’m going to recommend you use a number of properties to reset the values (so you can set them to your liking). As well, it’s good practice to have the h1 as your biggest point size title, with the size decreasing as you move down your header list. I don’t always follow this method but rules were made for breaking (slaps self in the face – bad cliche). Here is an example on setting up a couple of your header tags:

h1 {
font-size: 24px;
color: #09c;
font-weight: bold;
margin: 0;
padding: 0;
line-height: 36px;
}
h2 {
font-size: 18px;
color: #09c;
font-weight: normal;
margin: 0;
padding: 0;
line-height: 24px;
}

Ok, that’s it. Make sure you download the sample posts from wpcandy.com. Hopefully this has been of some help to all you wordpress theme designers. If you think I’ve missed any critical styles, please leave a comment below.

Commit and be organized

If you want to be successful at freelance design, it needs to be your main focus. The easiest way to commit to your new found freedom is to quit your day job. I know it might sound scary but if you aren’t comfortable quitting your job, you probably shouldn’t be freelancing. Another crucial aspect to freelancing is to be organized. You are now in charge of not just design but accounting, sales, marketing and other various small business responsibilities. A good way to keep your projects organized is to use a project management service like Basecamp. Also, it would be a good idea to pick up a copy of Open Office to keep your accounting organized. There are a number of other personal accounting systems out there so search around for the best fit for you. A final exercise that is a good way to keep your business growing is to dedicate a set amount of time each week for marketing your business. Whether it be through google ads, social media websites like Twitter, or simply checking in with your clients from time to time to see if they need a hand with any projects.

Don’t sell yourself short

Do not, I repeat do not ever work for free! If you are a qualified designer, you have spent several years building your skills and it isn’t fair to be expected to work for nothing. Aside from the personal aspect, it cheapens the design industry and helps to spread the notion that design isn’t a valid trade. If you are fresh out of school or only have a small amount of experience, you should be charging $25/hr minimum for your services. If you are an experienced designer, you should be charging $50-$100/hr. It comes down to what you think you are worth – I understand that working for free or cheap when you are starting out may sound like a good idea to get your feet wet. However, if you start working at a rate of $10/hr, you will always be working at that rate. Why would your client pay anymore once you have established that rate with them? As well, any referral work they throw your way will be expecting the same discounted rate. “I know this great designer that works for peanuts! You should really give them a call.” Believe me, that is a headache you don’t want. Most of the time, clients that offer low-ball pricing are not businesses you want to work with in the first place. They generally will push you the hardest and pay you the least. Remember the following quote as it has helped me immensely:

Fast, Cheap, Good. You can have two of those terms but it will cost you the third. For example, if you want it fast and cheap, it isn’t going to be good.

Keep it legal

One of the great advantages of freelance design is the ability to register your own business. This is allows you to take advantage of business expenses that you can write off against your income. Therefore, paying less tax at the end of the year. I’m not going to pretend I’m an accountant so I would recommend you find yourself a good accountant to do your taxes for you. You should also look into registering your business as a sole proprietor.

Now that you are an official business person, it is time to start acting professional. What does that mean? NO PIRATED SOFTWARE. This is your full-time business and you should invest in it. If you are using pirated software and your client(s) find out this could negatively impact your company. As well, we are trying to be professional here and pro’s don’t steal software. This also holds true for fonts, vector artwork, and photography. If you expect to be paid $50/hr for your services, don’t ask a photographer to do a photo shoot for free. One of the most important things you can do as a freelancer is act professional and provide excellent customer service to your clients. If you hope to one day work with the nikes of the world, you need to project an image of success and professionalism.

This is just a start. Freelancing is a continuing learning experience and experiment. In the near future, I’ll plan to write more about freelancing. If you are interested in the specific details of registering your business in Canada, please leave your questions below in the comments.