Daily UI.

August 2020 - Ongoing

I have embarked on the Daily UI Challenge and as I learn, research, create and apply good practice my portfolio will be updated as a living project.

Momu Logo

Daily UI Challenge #1.

Materials/Software – Basic pen and paper and Illustrator.

Design and create a Sign Up page.

To design and create the sign up page I followed a number of steps to start the creative process.

  1. Research design topic – Creating sign up forms using best practice UI
  2. Research other designs
  3. Decide on a theme for the application
  4. Sketch ideas
  5. Transfer ideas by creating it on Adobe Illustrator

I decided to create a sign up page for the theme of mindfulness for women. The application is called Mindful Ladies. I designed an image of a lady in a meditation pose using curved lines like waves and I wanted tranquil colours that were inspired by ocean colours from my recent trips to the beach.

What did I learn?

This project was quite interesting as it prompted me to learn not only about the UI involved in creating a sign up form but also the user experience and accessibility. Some key learnings were:

  • Only use essential fields.
  • Use autofocus guides to indicate where to start or which field the user is filling in.
  • Use single columns to display each field.
  • Avoid placeholders as labels, place them above the fields instead and never use caps.
  • Keep in mind tactics for error prevention.
Daily UI #1 Image
Visual design components
Paper sketching Image 1
Paper sketching Image 2

Daily UI Challenge #2.

Materials/Software – Basic pen and paper, Illustrator and Photoshop.

Design and create a credit card checkout.

To design and create the credit card checkout the process included:

  1. Research design topic – Essential features of credit card checkouts
  2. Research other designs
  3. Decide on a theme for the shop
  4. Sketch ideas
  5. Transfer ideas by creating it on Adobe Illustrator and photoshop

I decided to create a credit card checkout for a cosmetic company. The website is called Unique Cosmetics and I designed the logo using the first letters of the company name 'U and C'. I wanted the design to be modern, simplistic, slick and stylish.

What did I learn?

I learned quite a lot from this project as to ensure consumers trust and feel safe to buy online the designer needs to build this trust by using good practice UI principles. Some of the things I learned included:

  • Keep it simple - Limit the number of fields and instructions.
  • Use autofocus guides to indicate the type of credit card selected and where to start or which field the user is filling in.
  • Have a secure symbol where the consumer selects payment.
  • Use radio buttons or tick boxes and avoid drop downs.
  • Make call to actions clear, simple and visible.
Daily UI #2 Image
Visual design components
Paper sketching image 1
Paper sketching Image 2

Daily UI Challenge #3.

Materials/Software – Basic pen and paper, Illustrator and Photoshop.

Design and create a Landing Page.

To design and create the Landing Page the process included:

  1. Research design topic – Essential features of landing pages
  2. Research other designs
  3. Decide on a theme for the page
  4. Sketch ideas
  5. Transfer ideas by creating it on Adobe Illustrator and photoshop

I decided to create a landing page for a pet grooming and washing buisness. I decided on this theme as my sister has been walking dogs and grooming them for people as a hobby. The website is called PawSpa and to design the logo I sketched many ideas relating to dogs, bathtubs, bubbles and soap. I didn't think any of the initial designs were appropriate for a logo so I decided to go for a simplistic approach and focus on the key words of the buisness PAW and SPA. I decided to create a Paw icon and combine it with a wave to create a minimal logo design.

What did I learn?

Although landing pages do not seem to have a complex structure I learned that getting it right despite this fact is not that easy to achieve. A landing page needs to grab the attention of the target audience and for buisnesses this is the first impression clients will make. The following are the main take aways from my research:

  • Simplicity, minimalism and whitespace are very important to create contrast so that call to actions stand out and direct the reader.
  • Colour psychology needs to be considered as the right colour combinations can set the mood of the page and promote a company's vision.
  • Strong call to action buttons provide access to the product and services.
  • Imagery needs to be empathetic and relate to the context.
  • The use of people and faces can create a personal connection and stimulate trustworthiness.
  • Gradients can give the landing page a smooth and elegant look or bring out boldness and strength when used effectively. It can bring dimension to the page.
Daily UI #3 Image
Visual design components
Illustrator iteration
Paper sketching

Feel free to contact me. I’m looking forward to working together and discussing new ideas.

Back to top ...