UX/UI – Design for Web & App in Context

As majority of apps out there have a website alternative which people are also able to use. I created a mock up of what this would look like as I thought that it was important to consider what the target user could use if their phone wasn’t available. On this webpage mockup I have tried to kept the same layout as the app, however, with the side menu being permanently accessed. I have also included a logout button in the top right hand corner to allow the user to simply logout of the app if required.

Screen Shot 2019-05-03 at 13.42.59.png
Web version of DOG GO

It was important to me that I was able to show the app in context when talking about it. I personally thought that it would allow the user to visualise what the app would look like better, rather than just having screenshot of the app. I completed this by downloading free to use photoshop product mockups then taking the screenshots of the app into photoshop and editing them into the mockups.

iPhone_XS_Free_Mockup_PSD_by_shortcuteiPhone_XS_Free_Mockup_PSD_by_shortcut 2Website mock upiphone-x-mockup-lying-on-a-wooden-bench-outdoors-a17484

MockupWorld (2019) iPhone XR on a Bench Mockup Generator. Available at: https://www.mockupworld.co/free/iphone-xr-on-a-bench-mockup-generator/ (Accessed: 2nd May 2019)
Dribbble (2019) Free iPhone XS & XR Mockup. Available at:https://dribbble.com/shots/5251437-Free-iPhone-XS-XR-mockup (Accessed 2nd May 2019)
MockupWorld (2019) Isometric MacBook Pro Mockup. Available at: https://www.mockupworld.co/free/isometric-macbook-pro-mockup/ (Accessed 2nd May 2019)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: