___v0-2

After considered the successes and failures of version 0.1, I decided to keep to a stronger production plan within this next version. All ideas will first be initially drawn up in my note book and then reviewed for publishing. This separation between ideas and creating content directly to Hotglue should help me to verify and adjust my design.

Retrospectively looking back at version 0.1 there was a lacking consideration for any production planning since all design choice where made directly within the Hotglue editor. This was a poor choice of execution which is why I have decided to adopted a common scheme of work which splits the design process into three constituent part of Content, Structure & Presentation. By following this scheme of work will help me to separate my ideas into different categories which can be later referenced whilst designing my site within Hotglue.

CONTENT

By reading the released assignment brief I was able to gain a better understanding of what objectives needed to be met as well as what content needed to be included. I also had access to future lesson plans via the ‘Web Design Studios’ virtual learning environment (blackboard) which gave the projects more context. Working from both these sources, I could now write down all content requirements for the site (Figure 2). This process involved allot of content pruning as I initially wrote down all possible content features and then after created another finalised version, shortlisting all of the items to be included and in which page they would reside.

STRUCTURE

In order to create an effective navigation system for the user to traverse through the site, I needed to think about the structure in which pages would relate to each other. The most effective way of planning this was to draw-up a hierarchical diagram (Figure 3) to show the different page priorities and order . Although my website will follow a web/mesh structure, it is allot easier to visually represent the site structure as a hierarchy within the diagram. Knowing what pages would be included from my content requirement page made this a much easier process.

PRESENTATION

The two main parts of the website presentation I focused on was the page layout and the visual content to be included. First I drafted several annotated wire-frame diagrams (Figure 4) for the page layouts, representing how each of the pages content might fit within the view port. From the draft version, I then converted it into a second digital format within Hotglue using divs which made it easier to deploy content after.

For the visual side, I used most of the visual elements from v0.1 as well as creating some new content. I found it extremely difficult to determine design choices on paper so I adopted a similar approach to v0.1 by visually designing elements within the Hotglue editor. For each of the pages I imported a background template (Figure 5) which standardised where the navigation buttons are placed as well as the background colour. Individual buttons could then be imported as firework slices with transparent backgrounds and layered of the template. As formatting css is not something that is easily accessible within hotglue, it was easier to keep all the pre-set font styles.

Figure 3: Hierarchical Diagram

Figure 2: Content Requirment

Figure 4: Wire-frame Diagrams

Figure 5: Background Template

Being a continuation from v0.1 I still feel like there are still many issues with the design which should not have been carried over in the first place. I found that I was primarily using Hotglue as a place to store my documentation without any consideration for formatting it to improve the aesthetic feel. One of the reasons for this may have been partially due to the design not facilitating the addition of new content. Below I have listed some of the good and bad points that came up as a result of personal evaluation.

Good
- Colour separating different primary areas of the site
- A good balance between the number of images, image size and amount of text
- Font size remains constant

Bad
- Unnecessary elements (current project update/projects which aren’t included within this assignment)
- The navigation is not direct enough (Whole pages dedicated to navigation)
- The navigation size is to big
- Content varies in amount between pages
- Space is not being used effectively (A good designer is confident with white space)
- Lacking standardisation between pages
- Elements which are meant to remain stationary between pages move about
- Not all pages are accessible due to broken links
- inconsistent page names which makes editing difficult (stick to a format)
- large blocks of test which makes I difficult to read

Before it becomes too late I have decided to go through a complete re-design of page layout and navigation. I will be considering all of the points listed above when designing the next portfolio iteration.

Once I had reached a point where my website was fully functional I could begin testing various elements on different devices. I used a ‘Testing & Evaluation Table’ (figure 6) to record my results which helped to indicate the compatibility of each feature. Reoccurring problems where often due to the changing screen resolution and user interaction methods (touch screen input).
A solution to resolution issues would be to create a responsive layout using em and percentages to set element attributes instead of using pixels. This is something I will experiment with in the next version of my site.