SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [LAYOUT] Critiques required on layout, font and colours please.

    Have been tasked with redesigning our work website. I last did this in 2005 and as I had little skills ended up using Mambo and adapting template.

    This is the original http://www.purplegriffon.com.

    I Came up with a quick mock-up which everyone liked. http://www.trial.mlweb.co.uk/imageview.html however this did not contain enough information so I did the following rough mock-up http://www.trial.mlweb.co.uk/imageview2.html and yesterday took that rough mock-up and have arrived at the stage I need feedback on to go further. http://www.trial.mlweb.co.uk/purple/image2.html).

    I am trying to give a clean look that presents a lot of information with out looking cluttered. I really like the look of many of the web 2.0 sites and have incorporated some of these elements into the design. This is my fourth proper design and the first 2 are live here and here. I have read several sitepoint books since those first 2 sites and they have inspired me so much, especially Ian Lloyds 'build you own website the right way' which should be mandatory reading before anyone attempts their first web site IMHO. Still a little green with css layouts (especially making sure they are cross browser compliant) but I think I can pull this one off.

    Comments and criticism will be gladly taken on board
    hm
    Last edited by handyman103; Aug 17, 2007 at 04:03.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All the mock link is not working and as for the last 2 url. Those colors that are used on the page are colors that were used when the web was first born. Its terrible. Give some live to the site.
    My Network
    Deluxe Web Directory
    FontCubes Free Fonts

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Links fixed.

    I agree Grumps, 1st one was a freebie with little time to spend on it plus it was my first site coded from the ground up in notepad. Previous to that I have butchered templates to fit. Client (my sister) was over the moon with it however. For the 2nd Site the client wanted it to fit in with their new brochures so I aped the colours of a dreamweaver template and used tables to lay things out.

    Now after reading up a lot of css I am starting to be able to express myself more.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try going through some CSS Gallery, its really inspiring. Its time to kill those pure colors. Go for lighter blue instead of pure blue.

    Mock #1
    Pinkish purple doesnt really suit a business theme, probably for a personal blogs.

    Mock #2
    Its just like the two older links that i have mentioned above.

    Mock #3
    More colors now but everything is too bright. Fonts weight used on that page are all bolded. With everything in the page bolded, it is hard to read the content and it hard to make the title stand out.
    My Network
    Deluxe Web Directory
    FontCubes Free Fonts

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mock2 was really just a very quick layout tool. Colours where just used to break it up a bit and make it easier. I find it harder to layout in fireworks (I cant afford photoshop) because the fonts just don't seem right. I often stick in Trebuchet for titles and Verdana for body text and then when I get the site running in css I then change the styles of the fonts to the final version.

    It is an odd way of working but it suits me. The problem with the brightness is that things have to match the purple which is the corporate colour. I tried to balance the green and blue to match. The blue also follows on from our accreditation bodies colours.

    I can try play with the colours and dull them down a bit and may see how that goes.

    Thanks for the feedback so far. Any comments on the layout?

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A quick update..

    Have changed the logo at the top and formatted the news section as a table removing the image.

    http://www.trial.mlweb.co.uk/purple/image5.html

  7. #7
    SitePoint Member
    Join Date
    Jul 2007
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by handyman103 View Post
    A quick update..

    Have changed the logo at the top and formatted the news section as a table removing the image.

    http://www.trial.mlweb.co.uk/purple/image5.html
    I think you can shrink the page a little..
    _______________
    Change doesn't come overnight

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hello,

    I'll be honest, I think you need to start again on paper.
    A good design leads the eye to the section of the page you want the user to look at, with your design I have no idea where to look - those Big purple headings are shouting for my attention making it unpleasant to look at.

    --

    With a pencil at the ready make at least 4 completely different layouts, don't get stuck on big banner / 3 column.
    The rule of thirds is a good place to start.
    Using just the rule of thirds as a grid for your layouts is not limiting - you can still come up with many different designs.

    In your design the navigation is the most discreet thing on the page - It needs to be the most obvious.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The web site is mainly to be used for the online booking of our training courses. The navigation of these courses on the right hand side is the most important item for us. Also the latest courses, featured courses and special offers are very important. Faq pages and contact us are of little importance and are linked to as a secondary part of the site.

    99% of the users of the site will be looking for the ITIL training course dates and course information.

  10. #10
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You may want to look at some griffon logos
    http://www.isidore-of-seville.com/griffins/9-2.html
    The Eagle/Lyon griffon logo may want some minor changes
    It's your logo so your idea but I thought you might want to see some others
    The wings are not clear on this one
    nice site
    hope this helps
    falcon

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers for the link. The Griffon is one thing that I have no control over. It was chosen 5 years ago as the design and adapted to suit our needs by one of the founding directors. When I started he was quite a rough looking fella and it took some re touching to get him as he is today in a nice flat colour.

    Funny thing is whilst the company is called Purple Griffon, the logo on our letterheads and other stationary is white. I did do a cut out large Griffon on the blue background in one of my mock-ups which was my favourite one. (see here)

    I did do a mock-up for a large pop-up banner stand (the big curved types) for an exhibition we attended that was plain flat purple with a zoomed in large flat white griffon. I believe it would have looked very striking. Again I had 4 votes against wanting the purple beast.

    Also still working on the site, this is the point I'm at at the moment . A couple of the links even work though I still have plenty of work tweaking the template to get it to something we can use.

    http://www.trial.mlweb.co.uk/purple/wireframe/

  12. #12
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your meta description and keywords:
    <meta name="description" content="ITIL training, ITIL Service Management courses and consultancy for best practice in IT Service Management together with msp, Prince2, ISO/IEC2000 and ISO 27001, Purple Griffon provides high quality Service Management Training and Consultancy solutions. Specialising in ITIL training including V3, we offer the entire range of accredited courses including Overviews, Foundation, Practitioners and Managers., Get ITIL V3 Foundation &amp; conversion training from Purple Griffon. Also available ITIL V3 Overview / Awareness courses." />
    <meta name="keywords" content="ITIL, ITIL Training, ITIL course, best practice, service management, configuration, change, capacity, availability, risk, iseb, bcs, foundation, practitioner, bs15000 iso20000, ISO/IEC20000, prince2, mof, msp, microsoft, training, acreditation, iso27001, News, Latest News, Training and Consultancy, itil, training, ititl training, itil v3, itil refresh, News, Latest News, ITIL V3 Launched, itil, v3, version3, itil training, itil foundation. new itil" />

    May want to check up on keywords:
    http://inventory.overture.com/d/sear...ry/suggestion/
    http://tools.seobook.com/general/keyword/
    http://freekeywords.wordtracker.com/

    sometimes it is important to place the most popular keywords first and sometimes the best keywords are not what you think
    Also search engines use the first part of your description in listings
    you may want to check up on that and choose the best for visitors and potential customers
    hope this helps
    falcon

  13. #13
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah this is something on my list to complete after getting the template design finished. The current site was plagued by being a hacked mambo install. This new site is proving a joy to work with and gives me so much control. (ok so it's tough learning to code as I'm going along).

    One thing, when I launch the new site I'm going to be redirecting from the old content to its new locations. How long will it be before Google picks up that the old site is no longer and starts indexing only the new?

  14. #14
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    QUOTE:
    One thing, when I launch the new site I'm going to be redirecting from the old content to its new locations. How long will it be before Google picks up that the old site is no longer and starts indexing only the new?

    I started with a free site then obtained a pay site with my oun name.
    I quite working on the free site over a year ago.
    Google has both sites indexed and still does.
    That's over a year (good or bad, I don't know)
    hope this helps
    falcon

  15. #15
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    I think the mock that is image5 is my favorite.

    However, one of the most unpleasant things for me is that the main text looks bold. Choose either a different font or make unbold it if it is. Thin, crisp lines are nicer to read when you are reading lots of information.

    Also, what if you tried toning down the color and brightness of the menu headers, and gave them some color backgrounds or formatting make it look more like navigation instead of just another list of content.

  16. #16
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your quick mock up looks better than the original
    The rough mock up looks like a second page
    Stage I looks better but the text writes into the newspaper image
    and space intentionally blank
    wireframe - good, you got rid of space intentionally blank
    and got rid of the newspaper
    links do not work (menu left side)
    may want to add mouseovers to them with a background color
    may want to increase the text size a little and decrease the header size a little
    Looks great - great improvement
    hope this helps
    falcon

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks good. I would adjust the line height in the top right - either condense it or space it out so it take up the entire blue field top to bottom.

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by samanime View Post
    However, one of the most unpleasant things for me is that the main text looks bold. Choose either a different font or make unbold it if it is. Thin, crisp lines are nicer to read when you are reading lots of information.
    Did the design work in Fireworks which by default applies anti-alias to text giving it a bold look. At that stage however I was just playing about with the look of the site without getting into specifics which I find easier to do with css.

    Quote Originally Posted by extravaganza View Post
    Looks good. I would adjust the line height in the top right - either condense it or space it out so it take up the entire blue field top to bottom.
    There is space left at the bottom for me to add in a search box ;-)


    The website has not moved on much as I have been busy but things are creeping towards completion.

  19. #19
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by navyfalcon View Post
    good, you got rid of space intentionally blank
    That text was there to stop people asking why it was a blank blue box. I will be adding a quick contact form over the blue.

    Quote Originally Posted by navyfalcon View Post
    may want to add mouseovers to them with a background color
    I'm struggling with color a little on the tabs and also what to try out for the mouse overs. I want it to be subtle as to keep the number of different colours down on the page.

    Also this is far from a working page template, almost all of the links go nowhere yet.

  20. #20
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by handyman103 View Post
    I'm struggling with color a little on the tabs and also what to try out for the mouse overs. I want it to be subtle as to keep the number of different colours down on the page.

    Also this is far from a working page template, almost all of the links go nowhere yet.
    here is an example of mouseover with background color
    a:hover {
    color: purple;
    background-color: white;
    font-weight: bold
    }
    this would reverse the color of the tabs
    now tabs are purple text is white
    hope this helps
    falcon

  21. #21
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have done the rollover img bit and I like it.

    http://www.trial.mlweb.co.uk/purple/wireframe/index.php

    however in FF on safari the price list and schedule links images now have a rollover, I have added text-decoration none to the class they use but it is still there. IE7 works fine.

  22. #22
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Give them background-color: none;

  23. #23
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers

  24. #24
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    As much as I love the W3C buttons, I think how you have that single one at the bottom looks like it was just tacked on as an after thought. Maybe you should try and bring it up into the text that is with the content, so it feels more a part of the site and not just an image that adds a few more pixels of scroll.

    It looks quite nice other than that.

  25. #25
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Moved it onto a seperate domain for further testing.

    http://www.purple.mlweb.co.uk/index.php

    @ samanime
    Not sure I'll leave the w3c link there or move it. Its just stuck in the footer so I can validate as I create the site.


Bookmarks

Posting Permissions

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