Tobias

Geopark Website

By Tobias

   on Jun 30, 2010
4 Reviews1 Vote0 Favorites313 Views

Concept Reviews

  • Patrick Niebrzydowski

    Patrick Niebrzydowski

    Rank: 2 Titan

    3890

    • Design: 2
    • Purpose: 3
    • Originality: 4
    • Engagement: 3
    2 Votes
    Typography, consistency

    Posted on Jun 30, 2010 at 10:13 AM

    I really like the look and feel of the design, especially the first page (footpaths).

    The main thing that needs a lot of work is the typography. The tab indents should go, which actually would take you pretty far to improving the typography already. Some other tips would be to look at your alignment. Make sure all of your text alignment has some purpose. The travel info page, for example, appears to be indented as if it is an outline, but it's really a header, a paragraph and a bulleted list, and there is not really any reason for the appearance of an outline in that situation. Lining the bullets up with the paragraph text, and either the header text or left edge of header would make more sense.

    I think the font might be a little too soft as well, try using something a little crisper like a Franklin Gothic or even Arial (or something more exotic and less generic).

    The navigation links are extremely close together and need some room to breathe. There should be some way to tell which page you're on in the navigation as well.

    The idea of changing colors/background can be great for increasing engagement, but it can also be distracting. I would suggest using a color scheme that is a little bit less dramatic between pages, and keeping the actual content points consistent (i.e. use a dark green for header bars, etc) and then use lighter greens, browns, etc. Keep the scheme earthy as it fits the site purpose well. The yellow/orange on the travel info page seems a little harsh, and the blog might be a little too blue, earthy tones seem to fit this better.

    • Tobias
      Tobias commented:
      Posted: on Jun 30, 2010 at 10:50 AM

      Thank you for your very helpful review...

      I agree to quite a lot of detailed points you made, e.g. about the typography. We have to especially think what to do with the background, I agree that have a consistent look might be better for usability. Again, thanks a lot

    • Patrick Niebrzydowski
      Posted: on Jun 30, 2010 at 11:12 AM

      I do like the idea of having rotating backgrounds, but you just have to be careful when doing that. Using a good color scheme and keeping your content colors consistent is a good way to encourage usability while still getting that engagement as a result of dynamic background. For a more creative subject matter, going from red to blue to green to purple, etc would work ok, but for something with geopark in the title you have to be a little more consistent. I definitely think you can pull it off as long as you keep the rotation fairly subtle using browns, greens, etc.

    • Patrick Niebrzydowski
      Posted: on Jun 30, 2010 at 11:13 AM

      for example, footpaths to safety info is a very smooth transition and not harsh on the eyes. Really the blog and travel info are the only two that I think don't fit well currently. I think keeping the content consistent can be helpful though (not to mention easier on the developer and server).

    • Tobias
      Tobias commented:
      Posted: on Jun 30, 2010 at 8:49 PM

      Thank you! I see what you mean... Making it more subtle I think is a good idea. Maybe we can keep the changing colors but make the color choice somehow connected more. I agree that especially the travel info site is a little too strong..

  • Andy E

    Andy E

    Rank: 3 Superior

    4626

    • Design: 3
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    1 Vote
    header

    Posted on Jun 30, 2010 at 12:24 PM

    The general layout of the site is okay, but there are a few things that are holding it back from being a visually appealing site for your visitors:

    • The header. The translucent rectangle behind the plain white mountain doesn't fit. If your intention of the mountain is to show that this park is hilly and possibly located on a mountain, then I would restructure the header to either show a picture of the mountain or take it to the next step by cutting out a picture of the mountain as you sort of have here. This leads to the next comment on the background.
    • I think changing the backgrounds on each page is too distracting and could lead the visitor to think they left the site. Incorporate these geographic elements in the site instead. If you want to keep them abstract, then use them in a container that stretches the width of the main content container, but it kept short in height. You could then overlay the page title in white over part of the image.
    • Keep each page elements the same color.
    • Use a different font. if you want to get fancy with page titles, go for it, but keep the navigation and page text one of the standard web fonts. The current font makes the page look outdated and unprofessional.
    • For images within text containers, stick to 1 or 2 sizes that have some relationship to the grids in the site. For example, your 'large' image may be half of the width of the main left container. The 'small' image may be 1/3 of this width. The current sizes look quite random.

    Let me know if you have any questions.

    • Tobias
      Tobias commented:
      Posted: on Jun 30, 2010 at 8:41 PM

      Thank you! - The white square on the header was added as the mountain shape alone did not look very good... it was quite a rush at the time.. We have to think about something to do there..

      • I think thats a very good idea to solve it with a stretched container thanks a lot

      • Apparently everyone reviewing agrees that typography needs a lot of care and work

      • Right now there is not a lot of grid aligning, very helpful thanks

      All in all really helpful thanks!

  • Marina Novikova

    Marina Novikova

    Rank: 1 Elite

    238

    • Design: 3
    • Purpose: 3
    • Originality: 2
    • Engagement: 2
    1 Vote
    Color codes

    Posted on Jun 30, 2010 at 3:11 PM

    I've always being a big fan of color coding different sections of the website. I think it's a great idea that increases usability dramatically. But you need to finish this. If you color coded sections of the website you need to color code navigation items respectively. I highlighted them below.

    I would re-organize navigation items in following way:

    • Home
    • Places of interest
    • Footpaths
    • Safety information
    • Travel information
    • Library
    • Gallery
    • Blog

    I would also remove Links item completely. If you need to provide partners links pt them in the footer.

    Notes Added to Images   View

    • http://www.toya-usu-geopark.org/en/footpath
      • 1Green

        Because Footpaths section has a green background

      • 2Dark gray

        Safety Information section has dark gray background

      • 3Orange

        Travel Information section has orange background

      • 4Remove this item

        Put links in the nice footer

      • 5Blue

        For Blog section

      • 6Different color not green

        Just choose another background for this section and don't forget color code this navigation item respectively

      • 7Weired space

        I have never seen centering in navigation items before. These spaces on the sides look very weired. I recommend aligning them on the left and definitely give some space between them to "breath"

    • Tobias
      Tobias commented:
      Posted: on Jun 30, 2010 at 8:42 PM

      Interesting idea to have the navigation colored as well.. Quite contrary to the reviews above which recommend more of a unified look and desing

      Thanks for your review!

  • Yuriy Zaremba

    Yuriy Zaremba

    Rank: 2 Titan

    731

    • Design: 4
    • Purpose: 5
    • Originality: 4
    • Engagement: 3
    0 Votes
    background

    Posted on Jun 30, 2010 at 10:45 PM

    Love the header! Very cool effect and good use of opacity.

    Kinda iffy about that background, but otherwise looks great for what It's made for.