Material Design Study

Working with Google's Material Design principles in Sketch.
33 Pins
·
6y
By
Eric Lindesvärd
an image of a web page with the name and number of people on it in spanish
header base sticky tabs bar (aligns with toolbar MD elevation level 4)
an image of a page title on a computer screen with the text'page title'below it
header 768up tabs
an image of four different types of webpages on one page, each with the same color scheme
Creating a palette using the guidelines in MD with primary and accent color families. Also added typography recommendations with percentages of black and white colors when placing text on light and dark backgrounds. This helps a lot when coding.
an image of a computer screen with the text how to master haiki on it
Search view made as simple as possible. Insertion mark, some placeholder text and a close button top left. Enter executes search after typing search word.
an image of a website with many different colors
Front page with read more link = is active. It's necessary to have content on the front page for two reasons. It's nice and it's good for seo reasons.
an image of a web page with many different colors
Front page developed (1240px width) with more sections. Also added hover states here and there. Will add a subscription form at bottom.
an image of a web page with many different colors and sizes on the bottom right hand corner
New design idea for my own website. Front page 1240px width.
an image of a page title on a computer screen with the text'page title'below it
header 768up tabs hover and pressed states
an image of a page title on a computer screen
header 768up tabs metrics
an image of a web page with the name and number of people on it in spanish
header base pressed tab
Related searches
Office notes
Solid color backgrounds
Hex colors
Best friend poems
Two by two
the english and italian dictionary is displayed in this screenshoter's screen shot
header base tabs page scroll
the menu for an italian restaurant with english and spanish words on it, including names
header base tabs scroll
the english and spanish text is displayed in this screenshoter's phone screen
header base tabs metrics
an image of a web page with the words om oss in english and spanish
header base tabs
an image of the screen with two different languages on it, and one language that is in
When action button top right or close button top left are pressed, the button bounds highlight with 40% opacity of accent color. Pink and light blue colors show 8px and 16px paddings for action button.