Category: Uncategorized

After creating the Plan and Play pages, I planned to create a page about events that are happening related to cosplay. However, I felt that this didn’t fit into either of the existing categories of pages I had. This lead to me creating a section of the website based solely around events.

For this page, I combined the two colours of the other parts of the website. As they are yet to happen, and can be planned, future events are shown in the colour related to Plan. Past events can be discussed and pictures from them can be shared, making them social, and thus in the colour of Play. The events page can be reached from either side of the website via an icon that features in their headers. Both sides of the website can be returned to from the events page by the buttons in the corners, or by clicking the logos in the header.

For individual events, I wanted people to be able to say they were going to an event, and talk about it with other people who said they were going. On each specific event page, users can see how many people, and how many of their friends, are going to that event, and discuss the details with them. In order to show information about each event, the main details are shown at the top of the page. There is also a link to the events website, allowing users to find out more information about it. A map showing where the event is, allowing users to work out if and how they can get to the location, also features on the webpage. This links into google maps, making it simple for the user to interact with.

Development of the Play side of the website was conducted in the same way as the Plan side, with the main page coming first, and the additional pages coming afterwards. This allowed me to see what pages had been edited and completed, and which ones still required working on.

The main page of Play was designed to show each of the different types of posts that can be shared on the social media. Again, as user submissions cannot be added to Muse, a social network cannot be fully functional. However, by using personal images and images of friends; for which permission was gained, I am able to show what the social network would look like once fully implemented. By having all the types of example posts, the user will be aware of the content that will appear on the page.

As the Play home screen is a long page, I had the button that links to Plan stay in the bottom right corner. This was done by pinning it to this corner, allowing it to follow the user as they scroll down the page; allowing them to switch to Plan at any point during their social surfing. The header also follows the user down the page, keeping the brand identity. By using layers, I was able to make it so that the header moved in front of the content, making it always accessible, even whilst scrolling.

The Profile page was split into different categories, allowing all of the information to be present, without a single profile page becoming cluttered.y using a master layout, I was able to ensure that each section of the Profile remained the same, over than the key content that needed to change. By adding a button in the bottom left corner also made it easy get back to the Play homepage, but clicking on the logo in the header at any time will also take you back to the main page.

When beginning the creation of my website, I began working on the Plan side of the website. By splitting my development process, I am able to focus on each part as a contained unit. Plan was then split into a further 4 parts, one for each menu button, and each of these categories was worked on individually.

The layout for each webpage builds upon its wireframe counterpart. However, when testing the webpage, changes had to be made in order to keep it simple for the user to use. As user submissions cannot be added in on Adobe Muse, I used my own personal cosplay ideas to fill out the website. This allows me to show how the website will look when used by real users, but cannot be edited by each individual. The structure and layout of each webpage can be seen and interacted with as if it was made by an actual user of the website. This example acts as an accurate outline, and can be tested to see what elements work, and which need to be altered for the final product.

Each part of Plan was given its own master layout. This made it easy to add in additional webpages to each section, whilst keeping the main part of it the same. The uniform design, and similarities between all sections make it easy for a user to use all parts, and understand how the buttons work, and where they will be taken. By building each section under its opening link, what was required for each part was easy to keep track of, as it was all linked together. The site map allows me to track my progress through each section of the website, and see how many pages I currently have, and how many more are required for the completion.

In order to build my website for my final realisation, I plan to use Adobe Muse. However, I have no experience using this software. I order to practice, I followed a guide in order to make a trail website about Katie’s Cafe. https://helpx.adobe.com/muse/how-to/create-website.html

http://katiescafegrant.businesscatalyst.com/contact.html

The guide showed me how to add in different features in Muse, and link them together to form a coherent website. All of the assists were provided by the tutorial, allowing me to focus on just using them in Muse. Button options, footers and headers, master pages, and other features were explained and trailed throughout the course of the tutorial. By learning the basics of the software, I was able to make a start on creating my own webpage.

When more advanced techniques are required, further research in how to use them will have to be undertaken. However, by creating a basic webpage for Katie’s Cafe, I have been able to learn the software and develop my own project using it.

The completed R&D file has been submitted. It contained 24 pages of different categories from audience research and competition research, to logo development and wireframe site maps. This document contained all the relevant information outlining the research process around Plan/Play, and how it has developed from this research to the stage it is at currently.

From the information collected in this file, a full prototype website will be created, with an app t0 follow, time permitting. The website will be created in Adobe Muse, and will build upon the wireframe site map to create a full version of the product.