Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    Request review of new design mockup

    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.

    Request review of new design mockup-design-5a.jpg

    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.

  • #2
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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.
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    I hadn't known CF would shrink the image. I uploaded the full-size image 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 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.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Further to my previous point regarding the main navigation, I've uploaded a new mockup 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?

  • #5
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    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.
    Last edited by Samhain13; 10-19-2008 at 09:42 AM.
    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **

  • #6
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    GARY

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    New refinement uploaded.

    @Samhain13

    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.

    @Graft-Creative

    Good catch on the logotype. I'm not much for typography... 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.
    Last edited by Grant Palin; 10-21-2008 at 09:52 AM. Reason: Amendment re layout

  • #8
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    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?
    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks for the feedback, there is a new image online.

    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. 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
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #11
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    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!
    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **

  • #12
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    I've posted another refined mockup. 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.

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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!

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    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, 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)

    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.
    Last edited by Grant Palin; 11-04-2008 at 01:53 AM.

  • #15
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hi Grant. I think you linked to the wrong image. I'm guessing it should have been 8a, 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!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •