Creating a mockup of a fully funcitonal website, notably, one including a storefront.
For my mockup, I created a small music company named after myself, Matthew Brown. The company was established (somehow) in the year I was born, 2000. They sell both instruments and sheet music, and they're soon hoping to expand into music lessons!
This is the page that users will land on when they first open the website. It has a brief history of the company, and handy navigation on the left-hand side.
Here, users can see a list of all the prodcuts that Brown Music has to offer. Due to their slighlty different audiences, sheet music and instruments have separate lists which may be toggled between with the link under the "Instruments" header.
This is where users (when signed in) can view which things they have ordered in the past. It displays order numbers, order dates, and shipment statuses.
Here, users can chat with an expert (although, Dan here doesn't seem that great... we'll get on that) and try and get help with any problems they may have. This was where I chose to implement my chat feature.
This is the page where users can sign into existing accounts. This is meant to be an an overlay which displays when the user clicks the sign-in button. It would, in reality, darken the rest of the page underneath it while the user entered their credentials.
This is also where the social media integration lies.
Here's where new users can sign up for a Brown's Music account. This is just like the previous sign-in page, in that it is meant to be an overlay over the whole page.
As above, social media is also integrated here. Users can choose to create an account linked to another service.
iPhone X Interface
To make it easier to interpret, the iPhone's design comes with visual aids for the margins of the iPhone X. Otherwise it would look like it had far too much white-space - when in reality, that's how Apple wants it.
This is the page that users will open the app to. It's a simple little page, which mimics the landing page of the desktop.
Here is where users can see a list of all the products that Brown Music offers. To better accomodate the vertical real-estate, the list is actually a list on the iPhone, as opposed to a grid.
This is where users who are signed into their account can view which things they have ordered in the past. It displays order numbers, order dates, and shipment statuses.
Here, users get a much more familiar chat experience than on desktop. iOS' default keyboard is employed, and the messaging system mimics iMessage. Nobody should have a problem yelling at Dan for how useless he is now!
This is the page where users can sign into existing accounts. As on desktop, this is where users can sign in with their social media.
The same goes for the sign-up page. This time, however, the password criteria are in a separate popup menu, in order to prevent the user from having to scroll.
This is the nav-bar. It may be access from the hamburger menu in the top left of any screen in the app. It is the most important part of the app; on mobile, there isn't enough space for a persistent nav box. So, it is relegated to a sidebar, which holds links to access every page.
This is also where Brown's Music's social media links have been moved to.
Pixel 2 Interface
Everything mentioned in the iPhone X header also applies to the Pixel 2. The only difference is that, while it's higher resolution, the aspect ration is much less tall. So, some things were squished a little. Google also has much less strict safe-areas.