MOCK-UP FROM WORKSHOP

I thought I'd give it a shot just to mock-up the 'scamp' we did earlier on this afternoon, to see how it would roughly look. It made me realise that you have a lot of sketching and planning to do before you even think about getting on the computer as I did this mock-up without even any dimensions and a grid planned out and it was way more time consuming than the finished mock-up looks.

Sketch ^^

Mock up >

In this case I just took work off my Behance page to mock-it up. I tried to go with the mock-up and following Edmondsans Bold 14pt Black.

Home page you'd land on. Work clearly on show and a shape coding system on the right, so hopefully you'd know the triangles are packaging projects and so on.

How a rollover could look, with the red overlay. I think this is a bit too bright and in your face to be honest

When you click on a project it automatically scrolls down, so the project titles nicely at the top of your screen and you can go through the project. I'm not yet sure if the interaction with the project is a slideshow format, or a scrolling down format. 

Good thing with the slideshow format is you don't have a lot of material to scroll back up from to navigate to a different project. I tried to keep it in the same grid layout. with the project information on the right in line with the 'Key' section for the shape coding when you scroll up.

So, yeah... designing websites isn't easy. I think that's why I did these mock-ups so I can just see the kinds of issues that arise when laying out a webpage. Not easy at all! This website doesn't look nearly as good in reality as it does how I specified on paper.

Got that out of the system now, moving on I guess...