< Back to blog

A very deep dive into the anatomy of some UI elements

There are very few resources available to learn how to design high quality user interfaces at the pixel level. In this post, elements from well known websites and apps are broken down to their pixel level characteristics, so that you can learn by example.

Table of Contents

Buttons

Cards

Text fields

Search

Navigation Bars

Buttons

Amazon

Bootstrap

Citymapper

eBay

Facebook

GOV.UK

Mailchimp

Material Design

Slack App

Slack Website

Cards

Facebook

Material Design

Simon Pan's Portfolio

Trello

Twitter

Wildcard

Text Fields

Facebook

Google

iCloud

Panic Software

Sketch Website

Slack App

Slack Website

Twitter

Facebook iOS app

Fastmail

Google

GOV.UK

Material Design

Twitter

Slack App

Youtube

Amazon

eBay

Twitter

Youtube

Amazon

Apple

BBC

Facebook

Interaction Design Foundation

PayPal Account Page

PayPal Marketing Page

Slack Website

< Back to blog