- Strategy
The strategy stage of this design process involves outlining overall objectives for the site. The purpose of my Digital Media site is to be an easy to navigate site with as much relevant information to the course as possible being available without overloading information into it. This is why any pages on my site that are static (e.g. About, Resources) are efficient in the way they display their information and any links on those pages’ lead to external pages and not subpages. I didn’t want to have parent pages that lead into multiple subpages, as I think this would complicate the simple aspect of the site and straight to the point method of presenting the information on it. In Fig. 1 you can see how before I started the project I outlined the needs of my site.
- Scope
This stage is about the functionality I want to include into my site based on my objectives outlined in the previous stage. I use WordPress to create my site as it has easy to use functionality for blog posts and I can install plugins for forum use. This means that on the forum and blog pages the methods of delivering these functions are refined and tested already. They can be easily incorporated into my site with commenting and posting already connected to a user’s WordPress account. There is also a Calendar function in the footer that allows the user to find blog posts from a specific date. By using WordPress, I can make use of the dashboard which is an admin tool made available to me that allows me to efficiently write blog posts and edit pages in an easy to use environment and these changes will automatically be incorporated into my site without much work on my part. Users will also be able to comment on my site and create their own forum content.
- Structure
This stage of the process is about how I’m going to structure my sites so that any user interaction is designed and the site is navigated in the way I would like it to be. In my site there is are 5 pages on the navigation menu, and then any subpages are automatically created when I post a blog entry or the user goes into the forum. This is very simply managed by the functionality automatically included with the WordPress blog functionality or the Forum plug-in (WPForo) I used. This site is not information heavy so I don’t want the user getting lost in pages and pages.
As my site is purposefully not complex, this structure of navigating the information should be easy to follow for the user and includes all functionality of the site coherently.
- Skeleton
This stage of the design process is about how my sites information is presented and laid out. The way I position my interactive elements for the user. It’s important that with such a simple site the skeleton is consistent between pages so that the user is not being reintroduced to methods of navigation during continued use of the site. Below are wireframes of the site. Static elements are shown in green, dead space in white, interactive elements in orange.
In this assignment I’ve been tasked with designing and creating a website for the UWE Digital Media course following Garrett’s 5 Layer Design theory. This is a process of designing user interaction in a website from the ground up and ensuring that my site is efficient in its use and anything the user would be able to do on my site is intentionally included.
The skeletons of these pages do well to facilitate all the functionalities I outlined in my plan, in an easy to read and consistent layout. There are elements of each page that continue into the next and are found in the same location on each page as to not confuse the user and keep a consistent design. This is simple yet effective.
- Surface
The surface layer of the Garrett 5 layer process is about the visual design of the site and how this fits in with the fundamentals outlined in the previous stages. WordPress is a tool that makes this stage simple but also allows for deep customization of the visual design. I found a theme that I liked created and uploaded for use by a 3rd party, and then I altered the pre-set theme to fit around my site.
It’s important that interactivity is clear to the user, hyperlinks should stand out in a way that the user doesn’t have to think about how to interact with elements on the site.
The theme I used is called ‘Argent’, by ‘Automatic’. I chose it because it presented the information in a simple and clean way, which coincided with the structure and skeleton I wanted to use for such a functionally-light site. The menu at the top is separated from the main body of information or static elements of the site so that it is clear to the user where it is at all times. The position of the menu and header does not change. The image I used in the header is a free stock photo from www.pexels.com . Using a stock image like this one is useful because it adds a graphical element to the site without taking the user away from the information. The footer is also consistent throughout the site and the theme helps to accommodate this. WordPress makes it easy to implement widgets like calendars into my site without much customisation required from me in order to keep it coherent.
I used a Black/White/Red colour scheme and keep this consistent throughout, and the stock image conveniently enhances this colour scheme. The way colours are used to present interaction/information is consistent throughout the site. The Dark grey or Black is used for static elements of the site, any text displayed in a bright white is usually an interactive element (e.g. menu bar, calendar, other hyperlinks in the header/footer).
As you can see below any hyperlinks presented in the main body of a page is a light grey, this offsets it from the static text that may be surrounding it, this is important in these areas of the site where it may not be in the header/footer. Another good piece of design related to this is that when you hover over these interactive hyperlinks they change to a darker grey and underlines the link, this just enhances to the user that it is interactive, common in interactive design.