Building upon my wireframes, I created initial designs for both the website and the apps basic layout. They take the layout applied in the wireframes, and add in real features, such as buttons, pictures, and the correct colour scheme to reflect the logo and branding.
The layout for Plan puts the focus on the Cosplays themselves. They are the centre of the website, and they instantly draw the eye towards them. The header features the Plan logo and has a menu bar that will allow the user to switch between the different stages of Plan. The Add New button will remain in the bottom left corner of the screen at all times, making it easy to add more cosplays even if the screen size has to increase. This is the same with the Play button on the right. This button is in the colour of the Play side of the website to show that it links to the other side of the website, and is not related to Plan.
The app features this same basic design, but in a smaller scale. This enhances the cross-platform experience for the user, as the navigation and design is the same across both mobile and desktop. This approach was taken with both Plan and Play.
The Play side of the website uses the opposite logo colour to Plan, to link it in with the branding whist keeping the two elements separate. The layout adds in basic elements as buttons and as social media posts. These outline how the website would look when working, and would feature multiple different posts. The Plan button will stay in the bottom right corner and move down the page with the user, making them able to switch to Plan at any point during their browsing.