OFLB: Bringing the layout to life

After sketching up the layout for the new homepage we moved to coding.
We wanted to see if it would work on screen or if we would need to rethink the composition of elements.

The mockup we came up with can be seen here. Don’t mind the OFLB logo in the header menu. It is just a placeholder for now. As far as browser compatibility is concerned we only checked it in Firefox and Chrome.

We created a repository to keep our HTML mockups.
Today we’ll be getting more into this:
the header menu needs more work as well as the footer, there is still information to be added to the page and a lot of other details.
Still we’re happy with the little jQuery touch in the ‘Font Tester’ feature.

This entry was posted in Blogpost. Bookmark the permalink.

5 Responses to OFLB: Bringing the layout to life

  1. The ‘font tester’ preview text input belongs with the font list, not the textual information on the right col; I suggest using the label “Preview text:” and placing it at the top of the font list column so the functional relation is made visible.

  2. The ‘» More «’ link at the bottom is very small and very much ‘body copy’ in the visual hierarchy, whereas that and the ‘Catalogue’ link in the header ought to be the #1 items in the visual hierarchy, and the font previews on the page ought to be #2.

    Therefore I suggest that the type is seen as black (#222) on white background rather than as shades of dark/light brown, and the labels and titles are colored light/dark brown. This will bring the fonts to the fore.

  3. I think you also want to change “Made in Aiki – Built by Fabricatorz” to “Made in Aiki – Built by Fabricatorz – Designed by Manufactura Independente”

  4. Pingback: OFLB: the homepage | Manufactura Independente

  5. Pingback: OFLB: Putting it all together | Manufactura Independente

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>