Link to my client website design!
After completing the ‘specification’ for my client website, I went about considering the CAGES framework in order to start the process of creating a structure for my website. The CAGES acronym stands for:
- Content
- Audience
- Goals
- Entities
- Stakeholders
For the CAGES framework, I sketched out my ideas on paper using bubble diagrams, so I could quickly write down any ideas I had without having to think about presentation at this stage. I have included photos of the bubble diagrams below.
After having created a series of bubble diagrams using the CAGES framework, I went about designing some simple wireframes for my client website, as I could know start to think about how the site needs to both look and function, having completed the criteria for what content the client needs to have displayed. When creating my wireframes, I took a few different factors into account:
- How should the site look? How can I design the site so that it looks professional and well-maintained?
- How do I make it easy to navigate? How can ensure that the user can navigate through content with as few clicks as possible?
- How do I make sure the information on the site is appropriate? How do I ensure all the necessary info is included without any clutter?
Considering the first factor, I decided I would use a theme that had a simplistic layout, making use of a good amount of white-space, so as to not make any text difficult to read, and containing only the necessary design elements that I would need to make it fully functional, including a navigation bar, image header, a search bar, and two widgets that would display both Facebook and Twitter feeds of the client’s social media accounts. I felt that utilising a simple design would benefit the client itself, representing them as a fully professional organisation.
For the navigation element of design, I decided to include all navigation elements (e.g. links to separate pages and search bars) at the top of the home page, so that they are clearly visible to the user when they first visit the site. Additionally, I implemented a simple typeface that would display page links in a clear and readable fashion.
As for the information element of the wireframe, I opted to include a small text area in order to avoid overloading the pages with big blocks of text, and prioritised the information that I felt needed to be included and omitted any impractical information, in order to keep the amount of reading the user has to do to a minimum, whilst ensuring that they are fully informed. Below, I have included a photo of the first wireframe I sketched out.
As you can see in the above image, I have given a rough idea of my my finalised client site might look like, including page links, header image, and where the social media feeds would be implemented. I decided to sketch the wireframes out on paper as it was a much easier way to quickly put down the ideas that I had at the time, rather than spending time making a neat wireframe on the internet. This initial wireframe utilises a grid system, which I chose specifically to optimise navigation and layout of information. I have included a photo of my second wireframe design below.
I have modified this design slightly from my original wireframe, mainly in the sense that I changed the position of the social media feeds (including poorly drawn Twitter logo..) in order to make more space available for the text area, as I felt that there needed to be sufficient space to display the content of the site, without dominating the page. I also decided to include space for the client’s logo, so that the site is instantly recognisable as the client’s own and maximises promotion.
After having sketched out some rough wireframes for my site, I went about creating the site using WordPress. I started by choosing a theme that would fit into my criteria of being simplistic and easy to navigate, and decided to choose the ‘Oxygen’ theme. This gave me a clear typeface and a colour scheme that contained nice, subtle tones. I felt that the content of my site fit nicely into this theme when I was creating the site. I found a series of images of Stokes Croft through a web search, and chose specific images that I thought would best represent the PRSC’s intentions, which were images that I thought conveyed the idea of Stokes Croft being a very cultural and urban environment, and images that displayed the strong sense of community that is present within Stokes Croft.
I went on to develop the client site further, creating a page that would contain the contact information of the PRSC organisation, as well as a screenshot of the PRSC’s main office location on Google maps, in order to make it easy and convenient for people for become part of the organisation. All of the information on this page was referenced from the client’s current site. I have included a screenshot of the contact page below.
The third and final page I created for my client site was a page that would show the collection of projects that the PRSC has undertaken over the last decade or so, but as I am only creating a representation of what the site would look like, I have only included info on one of their projects. A screenshot of the site is included below. I have purposely included information from the client’s site in all three pages as to ensure that the representation of what the finished would look like as accurate as possible.
Web Design Portfolio 