#1: How I designed a Book-like Website

Here's a UI?breakdown?of?How?I?designed?the?website?header?of?toheeb.com. I'll be sharing?the?Goal,?Concept,?Inspiration,?Composition,?Iterations,?Flaws,?and?what?next.

My aim with this series of articles is to give you an insight into the design process. A process that will always be improved on for the dynamic nature of the users & brand.

Let's start with the website's goal:

Goal

A very large percentage of web designers are self-taught. Like I was. And one of my biggest challenges, as with anyone is the question: “NOW WHAT?” when it comes to UI or coding it?

You see, It's quite overwhelming these days with?where to start from & what to do Next. The web ecosystem is very vast and it is sure that we get lost in it. Some don't find themselves back. That's why Tutorial Hell is a thing. And at the end, you wonder about your takeaway.

This site focuses on organized resources on web UI engineering based on the core languages of the web: just HTML, CSS, and Javascript.

Concept

Being?a?resource?website,?I'm?like...?why?not?make?it?look?like?a?book??Rather?than?readers?scrolling?through?the?pages,?they?flip?them.?That?sounds?interesting and unique.

Inspiration

After?looking?through?book?covers,?I?realised?cover?designs?could?be?composed?of?text?or?images.

Being?a?fan?of?Typography,?I?decided?to?constrain?myself?to?compose?with?Type?only?and?catch?some?fun!

Meaning,?it?takes?a?click?to?read?pages?instead?of?dragging?the?scroll?thumb. That sounds?Cool!

Composition

For?the?front?cover,?serving?as?the?site's?header,?there?are?3?elements:

1. Author:?Toheeb?Ogunbiyi
2. Heading:?Learn?Web?UI?Engineering?using?HTML,?CSS,?&?Javascript
3. Description:?Build?a?core?foundation...

Initial Prototypes

The first draft like always is always very boring. But thing is, we need to offload them to get the creative juice flowing. Here's what the first mockup looked like. Don't say I didn't tell you.

For the second iteration, I used Libre Baskerville, a serif with varying stroke width. Making it look more interesting. I also used the "&" glyph of Bold Laila Font as decoration.

Getting better. Still,?the?composition?looks?noisy?to?me. So, I?tried?a?2-line?“Web?UI”?phrase.?It?manages?the?space?better?to?project?itself.

Good.?I?decided?to?tread?this?path. I?chose?“Mr?Bedfort”?as?a?font?family?for?“Engineering”.?It?has?a?rare?-ve?slant?that?aligns?to?the?1st?diagonal?of?“W”?in?“Web”,?following?its?wave,?Nice.

With “Web UI” as the anchor & centred to the page. My next mockup is shown below:

Below are the details:

• italicised “Learn” to diverge the angle.
• applied a -ve indent for 2-line italicised “Toheeb Ogunbiyi” to align to the stem of “L” in “Learn”
• “HTML” aligns a bit off of the left corner of “W” in “Web”
• “A” of “JAVASCRIPT” aligns to the 1st diagonal of “W”
• “using” hangs off “HTML”
• The description block aligns to the left of “HTML”.

Then, I used the Glyphs “*”, “&”, and “?” to fill up the spaces.

The next mockup (shown below) has a few changes

• 2nd diagonal of "M" in “HTML” aligns with “W” of “Web”
• “Javascript” which ends the block aligns at the right of the page, like Engineering. Same as Description which is now right-aligned
• lots of decoration with glyphs!

And, yet another iteration:

This time, Mockup C is like B, but with a left-aligned Description.

Anyways, the type composition of Mockup A looks cleaner. I was convinced I have a structure now.?

Last?Iterations

????Dropped?the typeface Libre?Baskerville?for?Cormorant.?Cormorant has?higher?contrast which makes it look more beautiful. In addition, it has?intersecting?diagonals?of?“W”?in?“Web”,?like?that?of?a?spider. Which makes sense as a word play for Web. As in Spider Web.

????Lowered?the?opacity?of?the?decorations. This way, the eyes focus more on the most important elements - the heading and description.

Still,?I?feel?the?decorations?can?be?more?than?some?random?characters.

So, Below is what I came up with:

Let's skip the content below for another article. Below is the details of changes I made on the header:

• 9's?terminal?to?cup?the?bowl?of?“b”?in?“Web”
• 7's?stem?(both?top?&?bottom)?take?cue?of?rotation?from?the?keywords?“Learn”?and?“Web”
• 7's?(bottom)?terminal?to?aligns?with?the stem?of?one?story?glyph?“g”?in?“using”?& 3rd?diagonal?of?“W”?in?“Web”
• ?i,?has?its?ball?as?a?bullet?for?“using”,?and?its?stem?as?a?left?brace?for?the?Description.
• ?y,?has?its?diagonal?stroke?aligns?with?1st?diagonal?of?“W”?in?“Web”
• j,?horizontally?reflected?as?the?book's?ribbon

Here's a Youtube Short with animating guidelines:

Flaws

Design is an iterative process. There'll always be things to improve. While?this?looks?good,?it?sounds?bad.?No,?worse!?

If?you?try?reading?out?the?webpage?with?a?screen?reader,?you?won't?understand?it. That's not fair for Blind users trying to interact with the webpage.

Anyways,?I?optimized?this?and?will?push?an?update?tomorrow.?I'll?write?about?it?afterwards.

Here's a link to the site: toheeb.com

If you want to see those animating lines, visit this link: toheeb.com/?show=guides

That's it for today. I appreciate any feedback! Kindly use the comment below or send me a DM.

Available for freelance too! Get in touch.