If you missed the first part, you'll want to read it first.
After I finished with the lessons page, I began work on the content page. I designed the contents page next because students need this page to access lessons.
If you see 150+ lessons in a sidebar, you'll definitely get overwhelmed. So I chose to create a dedicated content page for the course. It's still a ton of lessons, but it feels more manageable.
I figured the best way is to present lessons is with a list.
Two points to note here.
h2. This style allows students to quickly understand which lessons are inside each module.
h2 also means I added a second layer of repetition across the page. This increases familiarity and unity in the design.
Second: I removed underlines from each link. Why? Because it's hard to read when everything is underlined. Ease-of-reading is always a priority.
The unfortunate side-effect is it makes links harder to spot for color-blind users. There's not enough contrast between normal text and links. But since this is a page of links, I don't think it's too much of a problem.
I designed the login page next. Why? Because I need students to log in to enter the course.
I got stuck at the login page at first, so I searched the web for inspiration. I found that most login designs include a Modal window of some sort.
I didn't want to use a Modal window for the login page. Modals make logins unnecessarily complicated. I wanted it to be clean and simple like Wordpress's login page.
But I also found the Wordpress's page boring. I wanted my login page to be beautiful. It should also speak boldly about the course. This meant I had to design the login page from scratch.
I realised that five elements were critical for a login page:
- A logo (so people know which course they're logging into)
- An email field
- A password field
- A password reset link
- A login button
I chose to work on the logo first.
The animating text doesn't suit the login page. I don't have to convince anyone to invest in the course anymore. So I removed the animated words and shifted the brackets up.
Here's what I ended up with after tweaking typography, sizes, and positioning.
Both email and password are text fields. When I design text fields, I start by inheriting typography from the rest of the page. This is as easy as setting
Each text field needs something to define its boundaries. There are three ways to create a boundary:
- With background-color
- With shadows
- With borders
I started with a 2px border first because I like well-defined boundaries. I tried playing around with different border colors and eventually settled with a light grey border.
I also rounded the borders to make inputs feel friendlier.
At this point, I knew I had to make two buttons:
- A primary button for the call to action
- A secondary button for less important actions
Most primary buttons contain a solid fill. This solid fill draws attention to the button. On the other hand, secondary buttons are usually ghost buttons (buttons with a transparent background).
Sometimes, secondary buttons have a white fill.
I decided to go for a solid yellow fill for the primary button.
Buttons are interactive elements. They need a hover state and a focus state. Both states need to be distinct because they represent different actions.
For hover, I decided to change the background of the button to the orange-yellow gradient. This reuses another element so it unifies the design even more.
For focus, I added a blue outline around the button. This outline stands out when you Tab onto it. I wrote an article about creating these kinds of outlines. You can find out more about the technique here.
I decided to use the same focus state on email and password fields. The difference is: I changed the border color to a dark blue to match the focus.
If I bring the elements together for the login page, they look like this:
It works, but it doesn't look great.
I tried to center-align every element, but it doesn't look great either. Something seems to be missing.
Here, I noticed Paul accentuated his login form with a thick border. This helps me focus on the text fields and login button.
So I stole this idea.
Then, I accentuated my form by adding a light yellow background. This allows the form to draw more attention.
Finally, I wanted to emphasize the login button more. It looks receded in the login form right now. I played around with a few options and chose to increase the
I wanted to give users feedback that they're logging into the course. The simplest way to do this is to add a status message that says "Logging in". I decided to add this status message to the bottom of the form.
This message can be easily changed to a failure message if the login fails.
That's all the considerations I made for the login page. Next week, I'll end the series with the Accounts and Components page. I'll also share some of my learnings from this experience.
Thanks for reading. This article was originally posted on my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.