mockup posts

Samba: Mockups in HTML

in

In building a website for a client, one usually builds clients, one usually builds a few mockups with different themes to give the client an idea of what the site will look like with one of a few options. They can tell the designer what changes they want, which can be made relatively easily to the mockup before the theme is actually built for the site.

The mockups are supposed to be quick and easy to build and modify, allowing designers to avoid dealing with all of the nuances of CSS and HTML at this early stage. Designers shouldn’t be held to any limits at this point: They design what they think the site should look like, and figure out how to build it later.

Traditionally, this might have been done in Photoshop. The layout would later be cut up and positioned on the site with CSS. I did three mockups for the Stearns Homestead project in Photoshop. They were a pain, with maybe a hundred layers to handle two pages of the site for each mockup. Managing multiple elements of the same type is not easy there. Photoshop doesn’t allow any easy management of multiple blocks of typography at once, so changes are difficult. Now that I’m not using school computers, I don’t have access to a newer version of Photoshop, and none of my image editors have layer folders or some other useful features, which had helped me out a lot.

Continue reading post "Samba: Mockups in HTML"

Stearns Design Mockup Chosen

in

On Monday we met with Debbie to show off our design mockups.  Wednesday Debbie came back, bringing in three board members who would need to be involved in the decision.  They discussed various things about the site, including what it will be including and what they have for it.

They also were ready to make a decision on the mockup they wanted.  They had done some user testing of the mockups.  Rocki’s was chosen.  It has a picture of the front of the farm in the header, which they liked because it would be the first thing you’d see if you went there.  But they did want some changes to it.  They wanted a lighter brown for the wood grain that makes up the other part of the header.  They wanted a more solid navigation menu rather than the hanging signs currently in use.  And they wanted a less cluttered appearance for the home page.

They gave Jason’s second place.  His was very clean, also using a wood grain and a horizontal drop-down menu.  His drop-down seemed to be more along the lines of what they wanted, so something like that may be placed into Rocki’s.  Many of us were thinking that Jason’s would be chosen.  But you can never be sure.

So finally we will get to start building the actual site.  This should be the fun part, certainly the part that I have more experience with.  The site will be built using WordPress, so there won’t be a lot of actual programming most likely.  We may need to figure out how to interface other data with WordPress and add admin pages for it.  We will certainly need to figure out how to use “feeds” to get the information we want where we want it.  We’ll need to figure out how to set everything up so that it is easy for them to update.  Most of this should be doable within WordPress or using plugins, no hardcore programming. We’ll see though.

A lot of time will certainly be spent turning Rocki’s Photoshop theme into a real WordPress theme.  Then of course there is the insertion of the pages and filling them with content.  It will need to be organized in a way that will be easy to update for the Stearns people.  This may be hard.

I’m looking forward to some fun and some learning.

Stearns Site Design Mockups

in

Over the past couple weeks we’ve been working on our mockups for the site design for Stearns. We each picked one or two of our wireframe concepts and have used Adobe Photoshop or Fireworks to create the fleshed out, full color and image versions of them.

I used Photoshop, since I’m familiar with it and have never dealt with Fireworks before (hadn’t even heard of it till this class).  As a non-designer, it took me a long time to do.  I tried to keep every piece separate and organized to make it fully modifiable.  This can be painful in Photoshop though, especially since you can’t modify some aspects of multiple layers at once.  And with all those little bits, they really bogged down even the powerful computers at school at times.

My version of Photoshop at home is old (7), so I couldn’t really work on them there.  Some of the stuff from CS4 didn’t fully translate, I don’t have all the fonts, and Photoshop 7 didn’t have the nested layer groups and other benefits that I was heavily using to keep organized and work on this thing.  I had to spend extra time at school and at my parents (my Mom has CS4).

Next time, I think I’ll be faster at this, as I know more what I’m doing, how to deal with all those pieces and what not.  Hopefully also I’ll be better at making a good design.  I’d like to learn that Fireworks, as it looks much better for this purpose.  I think it even makes it very easy to convert the mockup into actual HTML and CSS for the live site, which could save a lot of time with that.

So finally, my mockups.  I did two of my ideas, plus a modification of the one.  There are two pages for each.  They all have very similar (copied and then slightly modified) content sections.  They were all designed to be about 975 pixels wide and with 600 pixels as the above the fold height.  They have an additional 200 pixels of width to show the sides and as much as 600 pixels below the fold of height for content.