Overview:
This project required a small design of a men’s fashion blog called Thred. My task was to design a set of responsive screens that would help illustrate how the site would look
Problem:
I had been given the word ‘stylish’ as my main characteristic for this project. The project must, above all be stylish, the rest was free for me to play with.
Solution:
I created a set of responsive screens (mobile and desktop), 4 in total. One screen set showed the landing page, and the other represented a ‘typical’ blog layout for the site.
Process:
I wanted to design something a little different with this project, so I used the steps below to help me plot my course.
My aim was to complete the following:
Moodboard
Sketching ideas
Wireframes
Style Guide
Wireframes:
My aim here was to design mobile first, allowing me the room to grow and adapt my design for desktop. These wireframes gave me the basic framework for the design (as I saw it), the later design processes would allow me to iterate and refine upon these.
Lessons Learned:
From this project, I have learned to build upon my already acquired knowledge of UI Design. My aims here were to consider accessibility through my style choices.
I have instilled the value of mobile first design, to allow me to scale up, and how designing with grids helps keep a product consistent.
Mood Board:
A visualisation tool to get me thinking about my design process and collate reference of UI that works (and doesn’t). This allowed my to free up my mind whilst having a goal in mind.
Design & Iteration:
I iterated these designs to find the right fit, this process was lengthy but, it allowed me to play with certain elements but with the freedom to fail.
Overview:
This project required a small design of a men’s fashion blog called Thred. My task was to design a set of responsive screens that would help illustrate how the site would look
Overview:
This project required a small design of a men’s fashion blog called Thred. My task was to design a set of responsive screens that would help illustrate how the site would look
Problem:
I had been given the word ‘stylish’ as my main characteristic for this project. The project must, above all be stylish, the rest was free for me to play with.
Problem:
I had been given the word ‘stylish’ as my main characteristic for this project. The project must, above all be stylish, the rest was free for me to play with.
Solution:
I created a set of responsive screens (mobile and desktop), 4 in total. One screen set showed the landing page, and the other represented a ‘typical’ blog layout for the site.
Solution:
I created a set of responsive screens (mobile and desktop), 4 in total. One screen set showed the landing page, and the other represented a ‘typical’ blog layout for the site.
Process:
I wanted to design something a little different with this project, so I used the steps below to help me plot my course.
My aim was to complete the following:
Moodboard
Sketching ideas
Wireframes
Style Guide
Design and Iterate
Process:
I wanted to design something a little different with this project, so I used the steps below to help me plot my course.
My aim was to complete the following:
Moodboard
Sketching ideas
Wireframes
Style Guide
Design and Iterate
Mood Board:
A visualisation tool to get me thinking about my design process and collate reference of UI that works (and doesn’t). This allowed my to free up my mind whilst having a goal in mind.
Mood Board:
A visualisation tool to get me thinking about my design process and collate reference of UI that works (and doesn’t). This allowed my to free up my mind whilst having a goal in mind.
Wireframes:
My aim here was to design mobile first, allowing me the room to grow and adapt my design for desktop. These wireframes gave me the basic framework for the design (as I saw it), the later design processes would allow me to iterate and refine upon these.
Wireframes:
My aim here was to design mobile first, allowing me the room to grow and adapt my design for desktop. These wireframes gave me the basic framework for the design (as I saw it), the later design processes would allow me to iterate and refine upon these.
Design & Iteration:
I iterated these designs to find the right fit, this process was lengthy but, it allowed me to play with certain elements but with the freedom to fail.
Design & Iteration:
I iterated these designs to find the right fit, this process was lengthy but, it allowed me to play with certain elements but with the freedom to fail.
Lessons Learned:
From this project, I have learned to build upon my already acquired knowledge of UI Design. My aims here were to consider accessibility through my style choices.
I have instilled the value of mobile first design, to allow me to scale up, and how designing with grids helps keep a product consistent.
Lessons Learned:
From this project, I have learned to build upon my already acquired knowledge of UI Design. My aims here were to consider accessibility through my style choices.
I have instilled the value of mobile first design, to allow me to scale up, and how designing with grids helps keep a product consistent.
Back to UI/UX Design
All rights reserved. Designs by LBK Draws.