Wireframing has never been my speciality but i have always enjoyed the trail and errors aspects, that leads you to your chosen design. I have included most saved imagery of my wireframing process, which will hopefully show you the lengthy and considered process that i go through when planning a sites development.
Below represents my quickly sketched wireframes for my homepage, this was the start of the my wireframing process. The main focuses of these wireframes are the menu and the content. They are better explained and hopefully understood in the next section.
Wireframe – Homepage 1
Wireframe – Homepage 2
Wireframe – Homepage 3
Wireframe – Homepage 4
Wireframe – Homepage 5
I have taken my wireframes of my homepage to the next level, by filling them with actually content, realistic imagery, the fonts i would like to use and similar colour schemes that i would like to follow through with.
This wireframe focuses on a navigation system that is positioned inline with the logo, but this may not be realistic with the actual length of the menu needed. There is a full width image slider and a three column content section.
This wireframe has the same concept as above but instead of a three column content section, their is only one content section.
The below wireframe has went back to the three column content section but the navigational section has been moved below the logo, positioning it here gives the logo more room to breathe and lets the menu have room for expansion.
At this point in the wire-framing process, i am happy with the logo and navigation positioning so i have decided to concentrate on the content section. I have split this section into four columns with room for a small image and text below it.
Below I have decided to daringly take away the content section and i have added text to the fading imagery. I like this look, but it simply isnt enough for this page.
I am still playing with my content section as i feel this page could be finished in so many ways, i need to try as many combinations as possible to help try and envisage the best possible choice.
Below I have combined a few of my wireframes, three column content section with text added to the imagery and the better solution for a navigational menu.
My last wireframe is something that is a bit more extravagant compared to the above wireframes. The idea behind it is, every image will represent a navigational menu link, the images shapes and spacing all trying to give the site a more modern and contemporary feel.
Other Site Pages
These wireframes represent how the rest of my pages will flow, i feel that these pages should be consistent and not have drastic changes.
The next two wireframes are the same layout but with additional adjustments within the image slider, as i thought i need to establish what is going to be the best size for the content/image mix.
Handheld / iPhone Wireframe
I would like to make my site responsive, if i do, i feel the below layout sould be a consistent layout for the entire site.