Building a Login Page

Summary

Designed and prototyped a high fidelity design of a login page.

Prototype
Mobile

My role

Designed a responsive login. Prototype the page using HTML, CSS and Javascript.

Platform
Year

Website & mobile

2020

About the project

The client was launching a new app to the App and Play Store. They were also launching a desktop version so the prototype needs to be responsive.

We know how a login page works, so what's the purpose of a prototype? The login is a regularly-visited page. The client want to show a different quote whenever each time the page loads. The users are salespeople and according to the client, they like motivational quotes. The client also a different background image when page loads to generate interest.

Prototype requirements

Whenever login page loads:

  • Set a different quote
  • Set a different background image
  • Set a different font family

Process

Set a layout

Starting with the designs, I sketched some basic layouts.

Testing my earlier ideas

Based on feedback, I added a different font for each quote.

Final Design

Starting the prototype

Using HTML, I started with a standard desktop width. I find it easier to start with 1024px.

Learning javascript

Since it would take the most time, I started with javascript. I had failed many times with it in the past, so I knew I would need more time learning the concepts.

Looping through quotes, fonts and images

Each quote is stored as a string in an object. All objects are stored in an array. Since arrays are ordered, a randomise number is generated to link to an object. When a random quote is selected it's  stored in a variable. Then the variable is set as content a HTML element.

Randomising font and images also follow the same logic. So the code is repeated for those elements. There might be a better way to reuse and structure the code. This is my first foray into javascript, so I kept the code simple.

CSS is like a rollercoaster, there's a surprise at each turn

Like any fool, I thought CSS would be a piece of cake. How wrong I was.
Some CSS concepts I needed to learn:
  • Flexbox to centre items
  • Media queries for mobile responsive screens
I referred to w3schools, Chris Coyier's guide to flexbox and YouTube videos. First, I focus on understanding and working on the basics, like what "flex" does.  Then I started to build upon what I learnt, like the flex properties e.g. "inline flex".
One of the challenges was changing height of the quote card for mobile screens. The card was set to the default height but if the quote was too long then the card will cut off the text. There was a few ways to solve this:
  • Only use short quotes. Con: Users should have the option to use long quotes
  • Increase the height of the quote card. Con: there would be a lot of open space for short quotes
  • Make the card height flexible for different quote lengths
I chose to the third option. When I tried to set height to "auto" it didn't work and I didn't understand why. So I went to my trusted source, Stack Overflow. That didn't yield any answers. Perplexed, I thought it was an easy solution. So I asked one of the developers for help. Turns out it wasn't a CSS problem. I needed to wrap another div container around quote text.

Reflections

The code is used in production!

I thought I would spend the most time on Javascript. Turns out, CSS was styling was far more challenging. I had spent a lot of time searching through Stack Overflow for answers. Most of the questions I asked developers was about CSS. I'm not a CSS wizard, but my understanding is a lot better than when I first started.