The Brief:
Exploiting the principles of balance and colour and the assets provided, create designs for an iPad app or Web app. This should comprise of a landing page and a product page for each of the three bikes.
Exploiting the principles of balance and colour and the assets provided, create designs for an iPad app or Web app. This should comprise of a landing page and a product page for each of the three bikes.
- One set of designs using symmetrical balance, another asymmetrical balance
- One set using a complimentary colour scheme, the other using a contrasting colour scheme.
- Use at least three images
- Create more than one 'final' set of screens
Research
www.figma.com/resource-library/difference-between-ui-and-ux/
User interface (UI) refers to the interactivity, look, and feel of a product screen or web page, while user experience (UX) covers a user's overall experience with the product or website.
UI design:
Successful UX design:
User interface (UI) refers to the interactivity, look, and feel of a product screen or web page, while user experience (UX) covers a user's overall experience with the product or website.
UI design:
- Page layout: organisation of a web page or mobile app screen should seem intuitive to users
- Colour scheme and font selection: carefully choose the colours and fonts on a digital product interface for consistency, accessibility and brand alignment
- Interactive elements: from button design to drop down menu, styled for the user
- Wireframe and prototype fidelity: transforming prototypes into high-fidelity, functional, interactive product mockups
- Consumer and competitor research: understand target audience by discovering what they like, what problems and pain points they're facing and how they behave online or while using an app or software
- Information architecture (IA): once user's needs and behaviours and understood, IA can be created for the product or site. This is commonly put into a flowchart template to map out key users flows and decision points
- Wireframes and prototypes: ideas turn into tangible models, such as wireframes and prototypes. These are used to test ideas, define requirements and set feature priorities
- Testing and troubleshooting: product mockup tools help see how features will work in practice and gives time for any issues to be resolved
- Ongoing updates: new user feedback and back-end analytics mean updates and improvements can be designed and implemented
Successful UX design:
- Is the site or product useful?
- Is it usable?
- Is it desirable?
- Have you made it findable - will a user know where to find what they're looking for?
- Is it accessible?
- Is it credible?
- Is it valuable?
Figma Basics
|
|
|
|
|
I followed the basic tutorial on Figma and found it to be quite easy and similar to Illustrator.
Apps
|
|
|
|
|
Screenshots of apps that I just had on my phone to get an idea of layouts.
|
|
|
|
Screenshots from my iPad to understand the differences in portrait and landscape layouts.
|
|
|
|
|
App presentations from Pinterest.
|
|
|
Specialised bike apps.
Colour Theory
|
|
|
|
|
|
|
|
|
Assets
|
|
|
|
|
Thumbnails
|
|
|
I started by drawing the basic frames of other websites to see how to layout changes between sizes of screens.
|
|
|
|
Getting Started on Figma
|
|
|
Simple starters to understand Figma some more.
|
|
|
Basic wireframes and colour scheme.
Landing page development.
Menu development.
Search page development.
Product page development.
Colour experiments.
|
|
Prototype testing and editing.
Design 1 Across Different Frames
iPhone layouts.
iPad portrait layout.
|
Web layout.
iPad landscape layout.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Interactive elements on the landing page.
Design 2 Across Different Frames
iPad portrait layout.
|
iPad landscape layout.
|
|
|
|
|
|
|
|
|
Mockups
|
|
