Wireframes are an integral part of the design stage, these are all of the wirefreames that I created for the php based site. Take into consideration that because the designs were created for a php based site, the functionality came before design, therefore the design is nice and simple to allow me to spend the majority of my time spent coding on the technical php.
The final stage of building the site was to open Dreamweaver and actually create the site. as you can see below, I reached an almost complete site with a html file linked with a css file. As I was working and writing up the alt tags and the meta data I realized that it was limited for the search engines to find my site and that my listing would be compromised due to the lack of these. I thought before I continued, I would research the downsides of pageless design and then decide whether to continue with this design, below is the progress I have made so far.
Understanding the importance of file hierarchy took an important role of setting up the site, I knew that should anyone else need to come and work on this site, they would need to understand what all the files were. Therefore I made sure my files were labelled correctly and tidily. You can see the structure below;
The site is constructed correctly so that the layout is fully in order, I used Lorem Ipsum as filler text to begin with as that is a fine detail that can be changed in a later stage. The images in portfolio section of the page have a rollover feature so that you can see what the property looked like before the work was done. This was done using a <table> element to allow the images to be laid out correctly on multiple screen sizes. I set up code to allow the user to press the “Contact Us” button on their phone and would automatically start calling from their phone. These were both two things I do think work really well, so these will definitely be staying in the design.
There are two faults I have made so far though, In the .textbox div that overlaps the people on the roof, I have made the mistake of using attributes (position:relative and top:-250px;) This is a specific fault as you shouldn’t use these as it will mean the following content will not follow it’s normal flow, therefore, I must research an alternative method. The same can be said for .textbox2 but this one hasn’t been adjusted to the full extent to be over the top of the image.
This means I need to research an alternative method, which doesn’t break rules of html and css code, my research indicates that an z-index attribute would create a layer over the top of the other sections of the page, this is exactly what I need so I will be researching Z-Index.
This is evidence of the website I created;
DESIGN
HTML
CSS
A wireframe is like an architects ‘blueprint’ but instead of a building its of a webpage. It is the general hierarchy of the content, it excludes the images, buttons, colours, style, colour and graphics an focuses solely upon the functions, hierarchy of content and the different scenarios the site can be seen, desktop, tablet and mobile. Much like designing a logo for the first time, you must make sure it works in both black and white. The wireframe is drawn up in black and white, this can be done in multiple ways, there are many resources available for developers and designers on the web but you can also draw on paper, whiteboard or even a mockup within photoshop itself. Due to the simplicity of the concept of making wireframes, they are very quick therefore allows you to create many concepts in a small amount of time.
I also created physical designs with colour and images to help me visualise and decide which one would be best. I used colours that would best portray the business based upon the colour research, to provoke certain emotions in the user.
Here are my three wireframes & their physical design…
Number 1.
This wireframe gives the user something relate to, it tells the story of someone who comes home to discover their roof is leaking, then called acorn roofing to get it fixed. You get to see as as user the result of using the company, this tries to my brainstorm researching the sales techniques, having interested the user, now at the end of the page, a telephone number to contact the business. This method works in theory but comes across as cheesy, childish and unprofessional. I decided not to use this as my design.
Number 2.
The most professional and easy to follow wireframe, this is the one i decided to take through and actually design as a final website. It gives the user what it wants, a description of the company, confidence with using their services because of previous customer’s comments on the work that had been done and finally the contact details. This wireframe cuts to the chase and gives the user what it wants.
Number 3.
Very similar to wireframe number 2 in the sense that it is designed to cut out clutter and give the user what it wants, its style is also very similar. The drawbacks of this wireframe is that the ‘above the fold’ section of the site is simply an image with the logo and contact details which doesn’t particularly entice the user to scroll. The contact section of this page seems to be quite messy also.
References:
http://en.wikipedia.org/wiki/Website_wireframe
http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399
http://uxmovement.com/wireframes/the-importance-of-tying-personas-to-wireframes/
http://wireframes.linowski.ca/wp-content/themes/darwin/images/PersonaTemplate.pdf
As our first task we were told to recreate this site (http://dynamic.artdesignhull.ac.uk/shared/framework-03/home-page.php)
With a few visual aspects that were due to my photoshopping skills on the buttons and the actual images i chose to include, there are very few differences between the two sites as you can see, they are almost the same.
Original;
My Version;
I understand a few things are very important when designing websites. Firstly, keeping your code tidy so you can hand off the work, I believe I have done that with both my HTML;
and my CSS;
Secondly a keeping your hierarchy of files tidy and in order, I believe I have also done that;
Featured Image: http://cdn.wonderfulengineering.com/wp-content/uploads/2014/04/code-wallpaper-2.jpg
akbrodie.wordpress.com 