Published on | Prototyping: From UX to Front End — Medium Serah

This is the first UI prompt from Daily UI. I will be documenting my processes and learning points on this little space at Medium.

So I’ve decided to take a shot at the creative prompts by Daily UI.

My background: I’m not from design school. I’ve had some experiences with Adobe Photoshop, HTML and CSS but that’s about it.

I’m not sure how this UI practice thing will go. I feel that it is naive to think that I’ll be able to hone UI skills with the challenges, especially without constructive feedback from a mentor experienced in UI research and design. Nevertheless, I will try this out to see how it goes!

The first challenge was to make a sign up page. I wanted to work on a sign up page that already exist as my goal was to improve, but not create, an existing UI. My choice was Gmail’s sign up page.

Gmail’s current sign up page — It slays with its sharp edges.

When brainstorming of ideas, I thought maybe some illustrations could be used for the sign up page. I mean, wouldn’t it liven up the pages? *chuckles*. I gave the idea a second thought and decided to do away with illustrations. The presence of illustrations could very well take the user’s focus away from the goal of this webpage: To sign up for an email. I wanted to stay true to Google’s minimalistic, user-centric approach to design, so this was what I came up with:

My take for Gmail’s sign-up page.

What I’ve learnt from this practice:

Height of B > Height of A

The importance of space
While I was doing the mock-up on Photoshop, I realised that it was important to distinguish the space between the label and textbox of the same field (space A, see figure above) and the space between the label and textbox of a different field (space B, see figure above). This subtle difference in space makes a difference in the user experience, allowing user to better associate the labels to their respective fields.
Rounded corners do look better.
One thing I felt compelled to modify was the sharp edges of the ‘sign in’/ ‘next page’ buttons of the current Gmail design. It looked unfriendly and intimidating to click. After doing a search, I found out that rounded corners take less cognitive effort to visually process. No wonder!
Contrast Matters
I think Google did a good job in bringing out the sign-up form with the its dark grey background, which contrasted with the page’s white background. It brings focus to the form.
A clear AND concise web copy is easier to read.
While designing, I felt that Google’s web copy was slightly repetitive: One account is all you need / One free account gets your into everything Google. Notice how the words ‘one’ and ‘account’ were repeated. So I decided to take things into my hands and then summarised them into one sentence. I thought, maybe it’ll sound better to write it like this instead: One free account is all you need to get into everything Google. There, settled in one sentence! However, after a second look, I felt that it’s a real mouthful and also difficult to digest when compared to the original copy. I have learnt that a good web copy is short, concise and clear.
It’s time to try new UI apps
Photoshop is meant for photos but many designers have been using it for graphic design and website mock-ups. Okay, that was the past. Now, there is Sketch, InVision, Figma and MarvelApp. One of the problems I face is that I am always resistant to learn such new apps. It could be that I’m too comfortable with Photoshop. I think it’s time to learn those new UI apps because I believe that it will help in the workflow and conceptualisation of UI.

Afterthoughts

I (still) think it is difficult to improve without critical feedback from experienced designers. There is only so much I can do to critique my work; being from a non-design faculty doesn’t help.

However, I would say I’ve learnt quite a bit here and would be continuing with further UI prompts. There’s still a lot I need to do to brush up my skills and I’m excited to be on this journey to do so.

Thank you for reading till this far!
Any comments and feedback would be greatly appreciated. 🙂

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

UI Practice: Sign up Page was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

UI Practice: Sign up Page

Cool stuff, every week

More Articles