OUGD504 - Design for Screen - Wireframing and Task Flows

In order to start visualising what my app will look like and how it will function, I have started creating a few wireframe drawings.

What is a wireframe?
A wireframe is a visual representation of a user interface, stripped of any visual design or branding elements. It is used by UX Designers to define the heirachy of items on a screen and communicate what the items on that page should be based on user needs.

I started off by creating a basic task flow of how the app would function/work step by step.

1- home screen
2 - loading/opening app
3 - app homepage
4 - product page
5 - selected product page
6 - basket



I also played around with different variations of layouts for the opening/loading page of the app, experimenting with how images and text will be arranged for optimum user experience.

I started to refine this a little bit more by looking deeper into the elements that would be included such as; 

-logo
-menu
-basket
-search bar
-likes/favourites/wishlist
-my account



I also had a quick look at potential website layouts if I were to take that route, but I do prefer the app idea.



I decided to take these ideas through onto some digital wireframes using a basic pen tool. This helped me better see how it would fit the screen as I was able to set the actual size of the artboard to the correct dimensions.





I also had a go at wireframing the more refined designs on the software.