The simplicity of Google’s home page had much to do with its success. For my first challenge, I am replicated the infamous google homepage. How hard could it be?

‍

For each challenge, I explore the pixels on the screen, and its greater role in the business.  

‍

User & goals

In 2012, 1.17 billion people used google search. With more people connected to the internet, that number is likely to be much higher today. I would imagine google must design for everyone. As the world's leading search engine, Their user's goal is to get answers.

Primary affordance

All elements in the center of the screen is related to searching. Whether it's focusing on the search bar to begin typing, or turning on the microphone for audio inputs. In addition, if you're located outside of English speaking countries, google may recommend switching languages.

Secondary affordance(s)

Visitors of google.com visits for many reasons because of Google's large product ecosystem. Based on what is present on the google homepage, the secondary affordances include redirecting to Gmail, sign into a google account, access google account (if logged in), access other products made by google. I consider actions afforded in the bottom navigation to be tertiary!

Learnings & findings

• Responsive design practices. Even before I started replicating google.com, I struggled with what resolution my frames/artboards should be. I documented that process on What resolution should I design in?
• Cursor, Finger tips, and hitbox. Having never designed for touch devices, I never really considered hitboxes for buttons and icons before. Today, I learned to specify what hitbox for icons and how that affects designs.
• Naming conventions. Using inspect element, I can peak into the terminologies/naming conventions of elements that has been used. This is certainly more rigorous than the small scale projects that I am used to.
• Solid outline inside or outside? Google.com uses outside stroke. This affects the how the spacing between elements are measured. According to a quick research on forums, just like naming conventions, as long as they are clearly communicated and agreed with developers either should work. I will be paying attention 👀 into how other companies address this!
• Google Material color system Sometimes google.com uses rgba(0,0,0,0.84) and other times it is #292929. The former on white is equivalent to the latter. So why?
• Comfort with code It's slowly becoming second nature 😊.

Questions I have

• Why does google.com on mobile and tablet don't have "google search" button but desktop does?

‍

next, I replicate Youtube's homepage.