January 2007

Macworld Expo 2007

by Karen on January 23, 2007


More People at the Apple Booth
Originally uploaded by kayjummac.

The only trade show we go to is Macworld Expo in San Francisco. There are many reasons for this, my husband and I are both long time mac users, he’s a computer consultant, I make my living using my mac to make web sites, we can get free tickets to the expo floor, and it’s in San Francisco, one of our favorite cities.

There were some dark years when the mac market was shrinking, companies were trying to force even their graphic designers onto windows pc’s and no one knew what an ipod was. During those years, Macworld Expo shrank from two halls down to a portion of one hall in Moscone Center.

Those years are definitely over. Of course, every third booth was showing something off for the ipod, but I’m an ipod owner, so I didn’t really mind. There was plenty to look at for digital photographers and I managed to scrounge a single web development presentation (on Ruby on Rails).

What did I learn? That lynda.com offers some really great online training, including a full set of Russell Brown Photoshop presentations, which are really cool. You can access the entire training library at lynda.com for a month for $25. That’s something I’m going to look into.

Other than that, most of the expo floor is a blur in my memory. I did see some of the Windows emulation software, that looks very cool for me so I can view my web sites in Internet Explorer for Windows right on my Mac. Oh and I played Lego Star Wars II (the original trilogy) and I am getting that as soon as it comes out from Feral Interactive.

To get an idea of what the show was like, you can check out our photos in our Macworld Expo 2007 photo set on flickr.com.

{ 0 comments }

Stage 2: Page Layout (Anatomy of a (Small) Web Design Project)

by Karen on January 2, 2007

I’ve figured out the site organization, including how many pages we have and what goes on each page, now it’s time to start designing the actual pages. In this stage, I create the page layout in Photoshop (I’ll be putting up a post about the tools I use during this whole process later) and it’s the first time that the clients sees an actual page.

Basically, I want to show the client where the navigation will go, what I’m going to use for site branding (usually in the banner across the top), and what colors and fonts I’ll be using.

To Wireframe or not to Wireframe

I’ve read a lot about wireframes, which are pictures of web pages showing what goes on the page (navigation, content, etc), but not the graphic design (colors, photos, fonts, etc). See the Design page on usability.gov for more info. I don’t currently show wireframes to my clients, though I may make one up for myself with I start my page layout, to make sure I have everything I need on the page before I start playing with different buttons and different colors.

My experience with sharing wireframes with clients is that they don’t get what they are, so I used to go straight to a jpeg of a my Photoshop layout that looks like a finished page. I found one problem with that process, which may be due to this finished looking page layout: my clients sometimes come back just before site launch with changes to the navigation.

I suppose that shows that they ignore the navigation on thee page layout, just as most users ignore the navigation on a web page. After all, the content is what I want them to see, not the page frame, but at this point in the design process, I need the client to sign off on the page frame (the banner across the top and the navigation). So, I’ve changed to a hybrid wireframe/page layout which shows the page frame in great detail and leaves the content and some other parts as colored blocks (see the first example).

How Many Different Layouts?

If I have a good idea of what the client wants, I create several different layouts. If I don’t have a very good handle on what the client wants, I put a page together and use that as a starting point for figuring out what the client wants.

Example 1: 3 Choices

Here are the wireframes from a project where I had a pretty good idea of what the client wanted in graphic design, so I gave them three variations on a theme:

Version 1

Version 2

Version 3

The only difference here is in the look of the page, not the navigation or site branding. You can see where all the parts of the page go and I’m paying particular attention to the page frame: the header and navigation.

Example 2: Starting Point

On this project, we didn’t have much of a starting point for the page layout, so I put the first one together, then through discussion with the client, wound up with the second one as the final layout:

Version 1

Version 2

Note in this version that the photoshop document extends beyond the web page edges. That’s because this site is a fixed width site (the main area doesn’t change with the size of the browser window) and I want the client to get an idea of how it will look in a larger browser.

{ 0 comments }