Building This Website
I approached building this website very similarly to how I approach any other build. I sit down and read the brief, trying to grasp what is fully required and all the necessary elements that will make up the website.
Once this has been done, I sketch out a few basic layouts on paper. These layouts contain no details on colour or specific sizes, just basic sizes and positioning of the main website elements such as the header, navigation, logo, main body of content and the footer.
I next head over to Photoshop and open up a pre-saved template file. This file contains no design or layout; it is purely a 1020 pixel wide blank document with pre-formatted guidelines. This helps me when designing as I design for browsers that are 1024 pixels wide - so I know my limits in terms of the width of the website. It also helps me to keep things positioned neatly and aligned on the website.
I design the whole homepage interface in Photoshop, including background textures, logos, text, font sizes, borders and spacing. One key thing I take into consideration is the accessibility of the website. I ensure that colour contrasts between backgrounds and text is readable and that font, image and logo sizes are readable by the visually impaired. I ensure that the spacing between elements such as text and images isn't making the page seem squashed or crammed.
Once finalised and I have had several opinions made on how visually appealing it is, I move over to notepad and start writing xHTML. Unlike previous projects, I made the decision to start learning HTML5 and to code my assessed coursework this way. It was certainly challenging but I am confident what I have learned during this process will benefit me at a later stage.
When coding the layout I also tried to use some useful CSS3 effects. This was also a good learning experience - such as using CSS3 to achieve things like rounded corners and background gradients that I would normally use a Photoshop repeated background or image instead. During the coding stage I have several browsers open to ensure cross-browser-compatibility.
When the layout is complete I cut everything in the header and paste it into a header.php file and the same with a footer.php file for the bottom of page code. This allows me to make small changes to the header, footer and navigation across the site by only editing one page rather than many.
From then on out, I completed the sub-pages of the website. Notably the contact page took the longest as styling the contact form to make it both visually appealing and accessible took some time, however I am satisfied with the end result.
Accessibility and Usability of This Website
As part of the coursework brief the website had to have a two column layout. Whilst this did not specifically state that the navigation links had to be in a sidebar, it seemed logical to me to place them there.
I also chose to place a few key navigation links in the header alongside the website logo. This allows the user to grab access to the key pages such as the contact page easily, as they may be used to doing in many other websites that follow this principle.
As the background colour in the header was quite a dark shade of blue, I chose to have white skip links so they stood out easily. I also placed a blue arrow icon next to them to highlight their presence to the user if necessary.
The three top navigation links to the homepage, blog and contact pages were given lighter background colour and rounded corners to make them both visually appealing and to allow them to stand out. They were given a large clickable surface area to allow for users who are not accurate with a mouse to be able to click them easily. The background colour and font colour also change when the user hovers their mouse over them. They also go from having no text decoration to being underlined to allow the user to see when their mouse is over them.
All the three heading - h1, h2 and h3 tags were given large descending font sizes to make them clearly visible to the user. These did not look out of place on the website yet were still easy to read. For example a large h3 tag was used stating 'navigation' above the websites left navigation bar to easily guide the user to the key pages they may wish to visit.
The navigation link themselves were slightly larger than the body text, and were again given a large clickable surface area and a changing background colour to alert the user easily when they were being mouse-overed.
Attention then had to be paid to the body text on each page. The contrast between the body background texture and the font color were good. I used a good-sized font and chose Arial as it is well known and easy to read. I ensured the padding between paragraphs made text nicely spread out, and that the text was not squashed against the right margin or the left navigation bar.
Finally, the footer featured a darker background colour than the main body of the page so the user would be aware that is was actually a footer and not a continuation of the content. The links in the footer were white and again easily stood out.