Dev Academy. Phase Zero. Unit 1. Week 2. Solo Challenge.

THE PLAN

The brief is to beautify our Dev Academy index page and customize it to "represent us".

The problem or function of this site is essentially how to effectively communicate a portfolio of our weekly challenges that demonstrate everything we've learned so far. Especially around responsive design, user experience and how effective our design and development is in these areas.

Given each week contains around 4-5 challenges the layout should be simply to accommodate what will be a high quantity of projects by the time we reach the end of the programme.

DESIGN AND DEVELOPMENT

I like circles. I am going to position my challenge links within circles for ease of navigation. I'm thinking through what would look best visually and I think 3 circles horizontally will ensure it's not cluttered. This is kind of inspired from Pinterest who use a boxing system to organize their content. Aside from these circle navigators there won't be a lot of further navigational content on the page, mainly as I don't think this is required for my index content page. Other than nav contact me buttons that will connect the browser to me via social media or email shall they choose to engage with me. I want this to be easy and to stand out, but not stand out too much. Other than my section consisting of circles with links to my portfolio projects I don't really have a need for a sidebar. In an ideal world if I have time I may include an aside section with a little bit about myself.

Photos. Last week in my technical blog I used a background image of a photo of a footpath I took when I was in Brugges several years back. I would like to continue aplpying my own photos as backdrops and I have one that I really like taken of a compendium in a New York hotel but it might be a bit busy and detract from the content. We'll see.

Colour. If I use my New York image which is a largely sepia themed with moss green and big bold typewriter text then I will need to incorporate simple, probably large blocks of colour to balance the busy-ness of the picture out. I'll possibly need to apply a transparent section behind my body content that overlays the background image, possibly box-shadow it too. This could overall be quite difficult on a coding level so I may have to opt for a simple background and I will probably just find something simple on Google.

Header and Footer. Bearing in mind my background image and overlaid section content will be quite busy I will need to balance this out with a clean header and footer to anchor and hold the central content and hopefully the user's attention. I'm thinking matching the background colours for both header and footer - likely black with white or grey or yellow font-colour to stand out.

HERE IS MY WIREFRAME

Check it out. To see where this wireframe ends up click here