View Full Version : Request review of new design mockup

Grant Palin
10-15-2008, 02:26 AM
I have been wanting to put a new face on my site for some time now - the current look was intended as an interim one while I worked on a more defined version.

So I have built a mockup in Fireworks, resulting from multiple refinements on initial ideas.


At this point, it's an idea for an overall layout - I am already sketching ideas for content for various pages - home, resume, portfolio, etc.

I'm fairly happy with the look at this point, but would like to get some feedback on it.

I will say that I am uncertain whether the logo will stay - it is the same as on my site currently, but I am working on sketching ideas for something more relevant to me.

10-15-2008, 03:57 PM
I like the look and here are a few things I have on the design. Its a little hard to see with the image quality the fine details, so the items are rather open ended.

- The look seems geared towards a blog (Wordpress especially), are you planning on doing a lot to differentiate these sections or will they be a similar design?
- I see the menu laying on top of various backgrounds, and I find it a little distracting when I glance at the design quickly and play the game 'Wheres the navigation'. I know its the nav, thats easy, but I feel the items are a little bit disconnected from one another. Do you plan on leaving it this way?
- Do you have ideas on how to use header text or other typography in the main body? I believe that would spice up the inner content nicely.
- I like the logo, and the colors are quite nice.

Best wishes.

Grant Palin
10-15-2008, 10:37 PM
I hadn't known CF would shrink the image. I uploaded the full-size image (http://grantpalin.com/Design-5.gif) on my site. Hopefully you can get a better look at that one!

My site is primarily a blog (WordPress). But I have been wanting to make it more general purpose - blog, portfolio, projects, photos. That led me to the new design concept.

I think the overall layout - as you can see it now - will be the same from page to page. I planned to highlight the current page or section in the top navigation. I was going to forego the standard sidebar in this design, and add modules with content based on the current page.

I have been dancing around the appearance of the top navigation. I tried tabs, but they weren't great, and somewhat clashed with the bars above and below the navigation. I was thinking to try removing the smaller lower bar, and replace it with a solid navigation bar, containing each of the main sections.

You make a good point about headers to divide the body text. I put up a new mockup (http://grantpalin.com/Design-6.gif) with the content section appropriately divided up with headers.

I am glad you like the colours. It took some experimenting with different colours before I realized I should try using the one that was in the logo. Helps to tie the look together, I guess.

Grant Palin
10-19-2008, 01:21 AM
Further to my previous point regarding the main navigation, I've uploaded a new mockup (http://grantpalin.com/Design-7.gif) with an updated navbar. I decided to try a copy of the bigger bar above (containing my tagline) and base the main navigation around that.

It looks okay, but I think the two bars in close proximity are a bit too much. Any opinions?

10-19-2008, 09:36 AM
Good edit on the navigation bar as I was about to complain that the background image drowns the text in some places in the first mock-up. I'm still uneasy about that shade of orange(?) that you're using-- it's awkward when it's on the blue and it's barely visible when it's on white.

Also, perhaps giving another colour to your headings will improve things (not that they really need improvement, but who knows)?

Regarding the tagline and navigation bar situation, how about getting them closer together, to almost touching, so that the awkward space can be eliminated? Of course, doing that may leave "Grant Palin" a bit lonely. However, maybe you can make some positioning adjustments to it, like bringing it down a bit and moving it a bit farther from the left margin.

10-21-2008, 12:55 AM
Hi Grant,

You need to address some basic typography in your logo: the P and a in Palin need a bit of adjustment to kerning to pull the a closer to the P - looks a tad amatuerish as is.

I'm not a huge fan of the colours - they all seem to occupy the same tonal range which gives the design a muddy, lacking in contrast feel.

Did any of the previous iterations of the design have a sidebar? I think it could be worth trying - bring the categories etc up from the footer into a sidebar, it would also help break up the long horizontal lines of text you have.
As it is its a bit - top to bottom, left to right - which is pretty boring layout-wise.


Grant Palin
10-21-2008, 09:49 AM
New refinement uploaded (http://grantpalin.com/Design-7a.gif).


I've changed the headings to a different shade of gray: #666. The body text was already at #333. To my eye, it creates a subtle difference to separate headings from normal text. I'm not sure what else I could do with that, as I don't want to bring in too many colours.

For the header section, I decided the upper bar is redundant, and removed it. The logo and tagline stand well enough on their own. I moved them down and a little closer to the centre. There's some spacing around the two now, I may need to reduce the header height a bit. I think I will move the search form to the footer, the feed icon and link would probably be better in the header.


Good catch on the logotype. I'm not much for typography...:o I tightened up the spacing for the whole text, not just the "Pa".

The colour situation has been tricky. I started this design with some shades of blue, as I like that colour, and wanted to create a design with that group. White was a natural match for the body section. I thought to use the orange from the logo as a contrasting colour for text links. Lighter in header/footer, darker in content. I'm still not sure about the other two sections, but I added some different colours for links in the body text (see new image). Do any of those look better to you? Yellow is out, as it is too light, and green would not match either.

I know the layout isn't anything special at the moment. I'm sketching ideas for different pages so far as how they will get laid out. But what I am looking at, right now, with this design is the overall look. I decided to skip the standard sidebar, and add "modules", which have content specific to different pages. Some pages will have them, some won't. I want plenty of room to display code and photos.

10-22-2008, 08:38 AM
Hello Grant,

I think losing the upper bar was a good decision. I also notice the change of shade in the headings, and I think it's alright-- just enough to keep some separation between them and the body text.

I think that moving the search form to the bottom is worth a try too. Although with its current form, I can't see how it's going to fit with the bottom part's overall look-- it must be that semi-transparent button that bothers me.

Regarding the link colours in the body text. That shade used in "Nunc vehicula" has something going for it, but it seems to be off from the rest of the page. "euismod pharetra" seems to agree more with the scheme but it's a lot less obvious as a link than the first one. Perhaps underlining it will improve things?

Grant Palin
10-22-2008, 06:22 PM
Thanks for the feedback, there is a new image online (http://grantpalin.com/Design-7b.gif).

I made the headings a bit lighter, to #999 this time. They are still readable, and stand out better from the body content. As an experiment, I made the bottom two headings the same shade of blue as the second text link in the content. I'm thinking the blue version would be better to keep the design colours cohesive. Have you an opinion?

I decided the search form is unnecessary in the heading, and moved it to the footer where it is out of the way but easy to find. I moved the RSS feed link to the header under the tagline, where it is more prominent.

I can't believe I forgot the standard link underline. :o I've added that in for the content links, and they stand out more now, especially that blue one. I like the shade of red for the fourth paragraph, but it may be one colour too many. On the other hand, between the blue, orange, and red, I may have the colours for the link states - normal, hover, visited.

Appreciate the feedback! Any other opinions, please say so! I'll start a mockup for the homepage today.

10-23-2008, 01:07 AM
As far as the links I like the orange ones best. It's an easy plus that your links in both your navs are orange. They are clearly discernible as links.

I will agree with Gary about the long lines of text. Your looking at 950px long lines. If you don't want a sidebar maybe knock around the idea on columnizing your text. There is a WP plug-in (cant find it right now) that will do this for you. I wrote some code that achieves the same effect but it splits the columns based on the number of paragraphs. http://tinyurl.com/63avk7 it can be a tad tricky but it works.

10-23-2008, 09:11 AM
The underline really did give the links more definition, including the orange that I earlier complained about. Nice! I guess the final link colour will be up to you now as they all seem to make better sense to this casual observer.

Good edit on the search form too. But how about giving the text input box a bit more padding on the side so that "text" will not appear too close to the left edge?

Cheers! :)

Grant Palin
10-31-2008, 06:28 AM
I've posted another refined mockup (http://grantpalin.com/Design-8.gif). I made all the links in the content to be that orange colour, with underlines, as I think that will be the best colour to use. I also added icons to the top navigation, to give a better at-a-glance idea of what each link is for. I think the visual aid is useful, but the icons may need to be a bit more subtle.

Overall, I'm happy with the look. I've been working up mockups for various pages using this as the overall layout. Fireworks CS3's pages feature makes this an easy process.

10-31-2008, 08:28 PM
I know I'm showing up late to the party, but I think from start to finish so far you have made moves in the right direction.

One point of criticism I would offer (and it might just be my monitor or looking at the JPEG instead of seeing the real thing) is that the headlines and text in the body of the page seem to blend a bit with the background. As Graft-Creative said, this leaves things a little "muddy."

While neon colors and high-contrast pages often create visual abominations online, I have found through my days of bumping around online that pages with too low of a contrast (or too muted a range - like this) between background and text are equally taxing on the eyes no matter how much you like the colors. Just try to read that gray part of my previous sentence a few times casually. It's not easy!

I eventually find myself highlighting large blocks of text just to force a contrast and ease things up. At a glance your page seems just fine but... as it is, I don't know that I could spend very much time reading content in that environment.

Even a plain white background would improve the readability, though if you like the feel of the "graph-paper" background you may want to consider punching up the color of the font just a bit. The same general colors would work, but just use a touch more vibrant form of them maybe?

This is just my "2 cents" though. This already looks far better than anything I've put out there so far.

Oh and, yes, go more subtle on the icons! :thumbsup:

Grant Palin
11-03-2008, 12:20 AM
I appreciate the readability concerns - I too experience this on the web, sometimes encountering sites where there is just not enough contrast between background and text colours.

I put up a new image (http://grantpalin.com/Design-8.gif), which has the middle paragraph set to straight black (#000). The other paragraphs are a very dark gray (#333). The gray was suggested to me by an acquaintance I showed the design to, and I thought it a good idea at the time, as black seems a bit too harsh on white.

(edit: correct link here (http://grantpalin.com/Design-8a.gif))

Does the middle paragraph look better to you? I might fiddle with the colour a bit, try to find something in between the black and the dark gray. I would like to keep the grid, as I think it reflects my "techy" nature - as has been commented by people I know - but I will try to tone it down a little bit.

The readability thing may be due to how Fireworks renders the image, in which case a web browser may render the text in a more readable fashion. We'll know once I get the design sliced and coded - currently a work in progress.

11-03-2008, 08:59 PM
Hi Grant. I think you linked to the wrong image. I'm guessing it should have been 8a (http://grantpalin.com/Design-8a.gif), maybe? This does make it a bit more legible. I also think putting the RSS link in bold is an improvement.

As for the grid background, I have a clear bias against patterned backgrounds for some reason. I just prefer solids or asymmetrical design for backgrounds. This might have influenced me. Even so, if you can find another way to project techy-ness my personal taste would be sated.

Nobody ever said you had to make me happy though! :thumbsup:

Grant Palin
11-04-2008, 04:27 AM
Hah, well spotted. I fixed my previous post to include a link to the relevant image.

A new image, again (http://grantpalin.com/Design-8b.gif). I reduced the size of the icons in the navigation bar, so they are a little less noticeable. But they still seem a bit too colourful. I may need to try to make some two-tone icons that would look better in there.

I realized the headings were the wrong font and weight - they were supposed to be bold Century Gothic, but they weren't, so that's fixed. I also changed the colours to have some shades of blue for the first two headings. I think I will try some progressively lighter shades for descending heading levels.

11-04-2008, 10:42 AM
I never would've thought that the background would look so good - graph paper, wow. But, how would images with a white background look? You pretty much have to do transparent gifs for those, and that might be a hassle.

11-04-2008, 05:30 PM
Much better look for the headings (particularly the first one).

I may need to try to make some two-tone icons that would look better in there.

Ooh, yes. I think you are on the right idea with this. I hadn't even considered that suggestion... That could look really slick!

ETA: If you do the two-tone version of those images you could probably go back to the larger size...

11-04-2008, 11:53 PM
I'm going to differ and suggest that if you have icons that they are larger. I like icons when I can see them, and when they are very obviously connected with the link. I'm not so sure about the Blog icon though.

I would darken the orange links in the main body slightly, help them to be fully readable.

It could be the image, or it could be your design, but I would think all of the regular text in the body should be full black, some of it looks lighter.

I would make the headers with a little less margin on the bottom, so give the headers a connection with the text itself.

While I have always liked how the photographs break out of the header, it still seems to give it a slightly unbalanced look. It also seems to ruin the visual quality of the images with a huge bar through the middle.

My thoughts again...

11-05-2008, 07:13 AM
I was gonna say it too, there isn't enough contrast - everything's just blue and grey. I agree - black text is worth a shot.

Grant Palin
11-07-2008, 09:57 PM
Yet another update (http://grantpalin.com/Design-9.gif).

This is coming along rather well I think. I've set all the body text to be straight black, although when I code it I might make it just off-black and see how it looks. The black looks a bit too harsh in the image. I also darkened the content text links a little bit, and they stand out better now.

I've also added new icons for the navigation, a home-brewed set this time. What do you think of the look now? They may be just a bit too large.

I'm busy working on coding this thin up, so soon there will be something live to take a poke at!

11-07-2008, 11:56 PM
I like the new icons better. They are definitely more in keeping with your theme. I think they might look a little nicer if you didn't frame them up in that darker blue-gray color. The detail inside of the icons works well as that color (like the inside of the photo or address card) but I'd make the outer regions transparent unless you want to border them (say 2px in off-white or that muted orange you use in the logo up top) to give a clearer definition.

I actually think the icon size looks pretty good on the whole. You could maybe go a touch smaller on the "home," "portfolio," and "photos" icons since their structure makes them look larger than the others (even though they are the same size) - but this would be strictly optional and it might look goofy anyway once implemented. Just a thought.

Can't wait to see the real thing! (and see how badly my IE butchers it :thumbsup:)

Keep us posted...

11-08-2008, 12:05 AM
Icons are fine, but they bump directly against the text. Let them breathe and they will look less awkward. I agree they look great in the style, and that its time to make this a coded version. Good luck.

Grant Palin
11-16-2008, 07:48 AM
Well, it's taken a while, but I've put together a live version of my ideas - I'm done with mockups at this point!

Past experience has shown me that when doing a WordPress design, it can be easier to do a static version first, get that right, then break it up into the necessary template files. That's what I've done.

I've put up a set of pages for review (http://grantpalin.com/review/). Feel free to have a look and critique. I made some small changes from the last mockup discussed, but nothing major.

Most of the links are nonfunctional, except those in the top navigation, and the following:

* On the About page, you can use the link to the Resume page.
* On the Portfolio, you can use the links to view the various entries in detail (that is the intent, anyway! I am not yet decided just how those pages will end up).
* And on the blog page, you can use the link for the latest entry to view a page with some dummy content, with various elements added.

Yes, the Photos page is empty. My photos are on Flickr, and I intend to make use of the API they provide to display my photos on this page.

I like the way the look has evolved, and barring any major changes, I expect the final result will be much the same. The site appears and works fine in Firefox and Opera on Windows. Internet Explorer 7 handles it fine for the most part, there are some little inconsistencies here and there, but surprisingly not that many. No idea how IE6 will do with it - I'm not sure I want to know!

So, overall, there's a basic site with some dummy content in place. I'll start building the WP templates, but I would appreciate any feedback for the test site.

11-17-2008, 11:27 PM
Not a lot of time to review just now, but right off the bat I'm struck by the horizontal scroll bar that pops up if my browser window isn't maximized. That's such a little pet peeve of mine! :)

The links in main navigation bar don't fully occupy the block. It would be handy not to have to have the mouse over top of the text in order to click the link. And yes, I know how lazy that sounded even as I typed it...

Also, that's one monster footer. Not sure why I didn't notice it before. Plus you have the same navigation on the bottom (under "pages") as you do on the top navigation bar. I think you could stand to lose the redundancy. Overall, trim some fat from this hog!

Why not make your other link sections ("categories," "recent," and "elsewhere") into a separate drop-down bar just below the main navigation banner? It might tidy up the presentation a bit.

The portfolio presentation looks pretty good on first run through. I'll take a more thorough look at this whole thing a little later...

11-18-2008, 04:20 AM
It's pretty good. It looks complex, though. I can tell it has taken you a while to get to the point you are now.

- The grid theme makes me think of those self-healing cutting mats. I do like the idea of incorporating things like that into your design, but I don't think you should have it all over.
- The color scheme is a bit drab.
- I'm sorry, but I find the logotype to be hideous. Even if you were completely set on the typeface, I'd still recommend using one color throughout. If you owned GP.com, then I would understand. That isn't the case, though, and it serves no purpose.
- Not a fan of the Skip to Content and Return to Top links.
- I think there are some text padding issues to work out, namely you want a little more space from the containing div edge.

I hope that helps you! :thumbsup: