Check out my latest file on GraphicRiver.net. It’s a Photoshop brush set of 33 grungey, marker elements. The download also includes the source tif files used to create the brushes for editing purposes. Head over to the file’s page for more info.

Yes, I know there is an option to upgrade to 128GB, but I’ve come to expect a little more from Apple. Perhaps, I’m simply expecting to much. The fact that the price point has dropped significantly is a pretty cool in itself.

Back to the storage issues, being someone who has an iTunes library measuring 63GB, the entry level storage option is not going to work. This got me thinking though, what type of external storage options might be out there to house my music? I’ve got a Time Capsule at home, so maybe that would solve my problem. Does anyone have any additional advice on how they have handled a similar problem? If you do, please feel free to leave a comment.

Techniques Covered

Here’s a quick summary of the techniques covered in the tutorial:

• Bitmap layer with noise
• Inner glow layer style
• Smart object with filter
• Pattern overlay layer style
• Noise in color layer style

You can also download a free PSD file for all the referenced tutorials. Go get it!

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.

New in CS5

There’s been some change to the Creative Suite on the fifth release. You now have 4 bundled options to choose from, which are:

• Adobe Design Premium CS5
• Adobe Web Premium CS5
• Adobe Production Premium CS5
• Adobe Master Collection CS5

Photoshop

There are now two version of Photoshop: Adobe Photoshop CS5 Extended, and Adobe Photoshop CS5. What’s the difference? I’m not entirely sure except for the fact that the Extended version is $300 USD more. There’s a comparison chart you can check out. Unfortunately, it only compares the CS5 version to previous versions of the software. Hopefully Adobe will release some clearer instructions in the near future.

Flash

There’s also 2 versions of Flash available, the first is Adobe Flash Catalyst CS5, the second and more expensive option is Adobe Flash Professional CS5.

InCopy

One new app being offered with CS5 is Adobe InCopy CS5. Read below for Adobe’s description of this new app.

“Bring publications to market quickly with Adobe® InCopy® CS5 software. The only editorial workflow program designed to tightly integrate with Adobe InDesign® CS5 software, InCopy helps writers and editors work in parallel with designers to accelerate production cycles. Powerful editorial tools significantly reduce review and revision cycles during content creation for print or digital publications. Used in combination with InDesign CS5, InCopy CS5 delivers a complete editorial workflow solution for any size publishing workgroup.”

Free Shipping

Until May 12th, Adobe is offering Free shipping on NEW Adobe CS5 suites with promo code: adobecs5. This code is valid for purchasing the entire suite of apps, or individual apps.

Complete list of CS5 software

• Adobe Photoshop CS5 Extended
• Adobe Photoshop CS5
• Adobe Illustrator CS5
• Adobe InDesign CS5
• Adobe Flash Catalyst CS5
• Adobe Flash Professional CS5
• Adobe Dreamweaver CS5
• Adobe Fireworks CS5
• Adobe Contribute CS5
• Adobe Premiere Pro CS5
• Adobe After Effects CS5
• Adobe Soundbooth CS5
• Adobe InCopy CS5

There’s an awesome article on Swiss Style Graphic Design over at Smashing Magazine. Swiss Graphic Design is one of my biggest personal influences, you can see that reflected in my Standard WordPress Theme, and Mini WordPress themes.

Check out the Swiss Minimal collection on graphicriver.net

“Also known as International Style, the Swiss Style does not simply describe a style of graphic design made in Switzerland. It became famous through the art of very talented Swiss graphic designers, but it emerged in Russia, Germany and Netherlands in the 1920’s. This style in art, architecture and culture became an ‘international’ style after 1950’s and it was produced by artists all around the globe. Despite that, people still refer to it as the Swiss Style or the Swiss Legacy.

This progressive, radical movement in graphic design is not concerned with the graphic design in Switzerland, but rather with the new style that had been proposed, attacked and defended in the 1920s in Switzerland. Keen attention to detail, precision, craft skills, system of education and technical training, a high standard of printing as well as a clear refined and inventive lettering and typoraphy laid out a foundation for a new movement that has been exported worldwide in 1960s to become an international style.”

» Read the full article over at Smashing Magazine

Make sure you check out part 1 in the web design process series.

Make sure you check out part 2 in the web design process series.

Overview

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion

Dynamic content integration

This is the final step before any serious testing is done. Dynamic content integration includes stuff like: javascript, ajax, jquery, back-end tie-ins, and much more… Like I mentioned in part 2, it’s a good idea to leave an area in your coded comp where your developer can add in the dynamic stuff. Some examples of dynamic content would be: rollovers, image galleries, e-commerce, etc… Once you or your developer has added this stuff in, it’s time to do some site testing.

Browser testing

Browser testing can really be a nightmare. Don’t even get me started with Internet Explorer. I’d suggest doing the majority of your testing in Firefox, make sure you download and get familiar with Firebug. It’s a free tool that integrates with Firefox to help you debug your websites. I’d suggest ensuring your website works in the following browsers:

MAC
» Safari 4
» Safari 3
» Opera 9
» Firefox 3
» Camino 1.6.7

PC
» IE6
» IE7
» IE8
» Firefox 3.5
» Firefox 3.0
» Chrome 1
» Chrome 2
» Opera 9

Some of you might want to skip IE6, but I wouldn’t recommend it. Last time I checked 20-25% of internet surfers still use it – Doh! If you’re looking for a free service to check your website in several browsers, you should check out browsershots.org. Like I said, it’s free and it displays screenshots of your website in the browsers of your choice.

The other big thing to confirm is that your website is valid. Head over to the w3′s validator to check your code. They also have a free CSS validator. Valid code is very important for stuff like google ranking and load-time, so make sure you don’t skip this test. These are two of the biggest things you need to check, but there are tons of other items to review before you can launch your website confidently.

Launch Checklist

A launch checklist is list of everything you need to test before you publish your website. There’s no way one person could remember all this stuff, so it’s best to work off a good list. Several lists are out there on the web, but here are a few I’d recommend checking out:

» maxdesign.com.au
» notusable
» SmashingMagazine.com

Once you’ve fixed all your cross-browser bugs, validated your code, and run through at least one launch checklist, it’s time to take your website public!

Soft launch (beta)

What does soft launch, or beta, mean? To me it basically means taking your website public but not announcing it yet. Once you get your website live on your server in a public folder, you still need to do some testing. Is all your dynamic content working? Do you have any broken links? I’d recommend running through your launch checklist again when the website is live on the server. At that point, if you find anymore problems, you can quickly fix them and hopefully avoid your readers from seeing them. Beta testing is a great opportunity to invite some friends or colleagues to check out your website and see if they can break it, or find any bugs.

Launch and Promotion

This is the fun part. Your website is live, valid, cross-browser compatible. It’s time to tell the world and retire at 32. At least that is my plan. I hope you’ve found this series useful. Please feel free to leave any comments or questions below, and I’ll do my best to answer them all. Thanks

Make sure you check out part 1 in the web design process series.

Overview

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion

Photoshop Comps

Alright, time to dive into Photoshop and polish up your hand-drawn comp. Before we get to far, I would highly recommend using a grid and/or a CSS framework. I currently use the Blueprint CSS framework, which is a free download. I’ve also put together a photoshop grid template that will work with blueprint, which you can download here.

At this point I’m not going to get into tons of design recommendations. This post is about the process not the design. Once you have created your Photoshop comp, it’s time to review the comp before you do any coding.

Review comps to ensure the end goal has been met

Once you have finished your comp, let’s run through a little checklist to make sure you are on the right path:

» Did you achieve all the end goals you set up in part 1?
» Is your navigation clear and easy to locate?
» Is your sitemap and hierarchy in tact?

If your answer to any of these is no, you need to go back to the drawing board and create a new comp. Once again, don’t go with the first comp you come up with. Try a few different ideas until you get to the best concept. If your comps are looking good and meeting all your goals, it’s time to start some coding.

Coded comps (alpha)

For me the coded comps, or alpha, phase includes the cutting up of your photoshop file, and your CSS and HTML coding. Make sure you start with your HTML file, ensuring your hierarchy is setup properly. Next move onto your CSS stylesheet. I don’t add any dynamic content at this point, like javascript. My preference is to get the frame of the pages up and running, test them, then to start adding the stuff like javascript, back-end tie-ins, etc…

If you have any dynamic content to add, I usually just leave an area (perhaps a box) in the coded layout with a reference to what is supposed to go there. Many times you might be working with a developer for the back-end stuff, so leaving notes in your layout and in the code are a good way to keep the process moving smoothly. Once you have finished off doing all your HTML and CSS coding, it’s time to move onto the dynamic content integration.

This is where we stop for today. I hope everyone is finding this series useful so far. Check back tomorrow for part 3 in the web design process.

Overview

I’m going to start by listing all the parts of my design process. Let me state here that there are many design processes, this just happens to be the one that I’ve found works best for me.

» Defining the end goal
» Navigation planning and sitemap
» Hand-drawn rough layout
» Photoshop comps
» Review comps to ensure the end goal has been met
» Coded comps (alpha)
» Dynamic content integration
» Browser testing
» Launch checklist
» Soft launch (beta)
» Launch and promotion

Defining the end goal

Before we even start thinking about designing a layout, I like to define the end goals of the website. A good way to get your brain working, is to create a list of goals you or your client would like to achieve. Narrow that list down to 3-5 main goals and you are ready to go. For example, if I was designing a blog, my goals might be:

Goal 1: Getting people to subscribe to my blog
This could be achieved by including a prominent “Subscribe” button in the header of my website.

Goal 2: Feature my best content
This could be achieved by including a sticky post to the top of my post feed. I could also create a sidebar widget calling out my most popular posts.

Goal 3: Getting my readers to sign up for my newsletter
A good way to do this would be to put the sign up form in a highly visible area; maybe the top of your sidebar.

Can you see how this is working? By setting clear goals before you start designing, you are letting your goals help determine how you will layout your website. This makes it much easier to figure out the hierarchy of your website, and improves the user experience for your readers.

Navigation planning and sitemap

We’re not quite ready to start designing yet. Before we get out the pencil and paper, we need to do a little information organization. One of the most important features of a well designed website, is a clear and consistent navigation. Here’s a few tips on designing a good nav:

» Place your navigation near the top of your page
» Make sure the navigation is easy to find
» Ensure the nav is the same on every page.
» Don’t move the location of the nav from page to page.

Once you’ve decided on your pages, you need to create a sitemap. A sitemap is like a roadmap for your website. Take a look at Apple’s sitemap for a great example. It also doesn’t hurt to sketch out your sitemap to make sure you navigation is organized properly. There’s many great tools out there that can help you, I’ve recently been using OmniGraffle to sitemap out my projects. Once you’re confident you have a solid navigation and sitemap structure, it’s time to move onto the design of your website.

Hand-drawn rough layouts

Alright, time to get the creative juices flowing and start designing. So far we have figured out a couple of main goals for our website, our main navigation, and our sitemap. With those items defined, we can start to put together a rough design. We’re going to want to feature our main goals in some way, add a prominent navigation at the top of the page, and ensure we include our sitemap.

At this point, we should also mention a sub-navigation. If you website is going to have sub-pages within each main navigation page, you’ll need to leave an area for the sub-page links to appear. A couple of good options would be:

» Add them to your blog sidebar
» Add them below your main navigation

Once you have that figured out, it’s time to start sketching out your idea. Keep it simple, boxes are fine, and make sure you try a few different layouts. Most times the best ideas don’t come out until you’ve warmed up your brain, and tried a few different things. I can’t stress enough to keep it simple at this point. Check out this initial rough verison for Twitter. All the important stuff is there, it might not look that sweet, but it doesn’t need to at this point.

Once you’ve hashed out a few ideas and have found one you like, it’s time to move into Photoshop. However, that’s for part 2 of this 4 part series on my web design process. Check back tomorrow to read part 2.