Clone-A-Week Challenge: Google Landing Page

So this week I got challenged by Mentor A to build a Google Landing page for my next clone. I was originally going to go with an airbnb clone but he promised me I would have a challenging time creating a faithful replica of the Google landing page.

So here goes.

Step One: Project Setup (10:18am)

I’ll be using the same project set up as my last project. It’s a Gulp-Sass-Jade-Jekyll workflow I learnt from Travis Neilson creator of DevTips (Yup, I linked to the entire channel, thank me later). I’ve got the workflow set up on my Mac and should be up and running by 2pm today.

Step Two: Wire-framing, Header (Day Two – 9:00am)

I did the wire-framing in my head. I analyzed the original page and decided how I wanted to tackle the alignment problems. With the header, I made everything exactly the same – hover effects, the padding around some linked icons and so on. If you go over to google.com and try to click the chrome app icon and the bell icon, you’ll find out that at about 3px out, those links become active. I’m sure it is a user experience choice because the icons are so small (which I’m sure is a UI design choice) and they don’t want the users playing target practice every time they try to click on those links.

I finished the header in about 3 hours and moved on the main content which is mostly the logo, the search box and the buttons. As soon as I had the HTML elements on the page, I understood immediately what Mentor A was talking about. Reproducing the elements themselves is not the challenge in this clone project, aligning them to stay in place while being responsive is the issue, and I’d have to think long and hard before writing any code, because a misstep at any stage could have me rewriting sections later on. This is one of the reasons why I have adopted the Gulp-Sass-Jade-Jekyll workflow. I write the code in sections, so barring any real major issues, I can focus on a section at a time and keep my code separate.

Here’s the work in progress so far:

Screenshot 2016-05-28 12.25.50

The header is almost pixel perfect, I might play with the margins a bit later on to try to get things in exactly the same space, though I suspect that as I am not using the same font as the Google page, the difference in the font kerning is to blame for the ~2 pixel difference in alignment.

Work continues today, I hope I can get the main body aligned and the hover effects sorted. Then I can wrap up with the footer – which seems like the easiest part – later in the evening.

We’ll see how it goes.

Step Three: Main content (Day Two – 3:08pm)

I am too brain-tired to write much of an update. I just finished the main content section. Here’s what it looks like. More on this later.

Screenshot 2016-05-29 15.04.01

Step Four: Finish The Body And Footer (Day Two: 5:14pm)

I’m done. Hosted it up on firebase at google-clone.firebaseapp.com. It was every bit as challenging as Mentor A said it would be, but it was a good exercise. It gave me a lot to think about in terms of alignment and arrangement of elements on a page and also that the size of elements don’t really matter even. Smaller elements could be more stressful to arrange than larger elements.

Here’s the finished product:

Screenshot 2016-05-29 17.14.19

 

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s