Logan Cameras

This is my first case study that I made in Figma doing a course in UX / UI Design Essentials.

Client
Case Study
Service
Web Design
Year
2024

Design Brief / Task Flow

I used random project generator to give me a brief about the name of the company and what they sell. Using the design brief I created a task flow so I knew how many pages they wanted and what info they would like for their web page.

Wireframing

Using the description of the brief I created a wireframe. This provides an overview of the page structure/ layout.

Animation

I used variants to create a cool background animation for the welcome screen. I drew shapes and changed the colours, I also added text to appear on the screen with a delay affect.

Colours and Sizing

I used these colours throughout the app because they create a good colour scheme. The plugin I used for the measurements was DesiginDoc this was a useful tool because it shows all the spacing and sizing when making the layout.

Final Design

For the final design I made sure that every page was responsive, for example I made it so that every icon on the website links it to the right page. I am happy with the final design because it's what I had in my mind when making this event app.

Problems

  • The event cards - Making sure it draws people in by having info including date and price,  It took me a little while to be happy with how it looked.
  • Scrolling - It took me a while to figure out how to make the page scroll with the parent.
  • Welcome Page - Making the welcome page was challenging but also fun to make because having to make different shapes to interact in the background while the animation for the text appears, Also having to make button components for login and sign up made the process take longer.

Solutions

  • Event Cards - Having images and a good colour scheme with all the info about the event will make users want to find out more about the event.
  • Scrolling - To make the page scroll I needed to make it scroll with parent and have the overflow set to vertical using scroll behaviour on prototype mode.
  • Welcome Page - To solve this problem I made the button components first so all I had to do is make the animations using shapes this will save time.

Tools I used

  • Figma
  • Components and Variants
  • Color Libraries
  • Plugins - Iconify , Pexels , Unsplash, Content Reels, Invert Color and DesignDoc
  • Auto Layout
  • Prototyping

Logan Cameras

This is my first case study that I made in Figma doing a course in UX / UI Design Essentials.

Client
Case Study
Service
Web Design
Year
2024

Design Brief / Task Flow

I used random project generator to give me a brief about the name of the company and what they sell. Using the design brief I created a task flow so I knew how many pages they wanted and what info they would like for their web page.

Wireframing

Using the description of the brief I created a wireframe. This provides an overview of the page structure/ layout.

Moodboard / Style Guide

I use a moodboard to decide the overall visual direction of the web page. The style guide is great resource when designing pages for example when I was making the product details I wanted to have different colour schemes to differentiate between that page and the homepage.

Making it interactive

I used prototyping to animate between the pages so that it becomes interactive when users navigate through website.

Final Design


Problems

  • Icons- It took me a while drawing the home icons because of the shape it had to be.
  • Columns - I did't really know how to use columns but I learnt that it is used for aligning objects on a page.
  • Colours - Choosing the right colours for the design was difficult but once I created the style sheet it was a lot easier.


Solutions

  • Icons - Drawing the outline from a plugin.
  • Columns - Practicing using columns through different projects.
  • Colours - Making a style sheet helps when choosing the right colour scheme.


Tools I used

  • Figma
  • Plugins - Pexels, Unsplash, Color Levels Generator.
  • Auto Layout
  • Prototyping
  • Components and Variants.