Material Design Study

Working with Google's Material Design principles in Sketch.
35 Pins80 Followers
header base sticky tabs bar (aligns with toolbar MD elevation level 4)

header base sticky tabs bar (aligns with toolbar MD elevation level

More on app-like websites on mobile. This is a developed version of the two earlier sketches where I use the MD grid in another way. Gives a bit more life to the home page. Also changed the name in the header nav to 'home' and added a 'more' menu top right. More menus are meant to slide up from below when pressed.

More on app-like websites on mobile. This is a developed version of the two earlier sketches where I use the MD grid in another way. Gives a bit more life to the home page. Also changed the name in the header nav to 'home' and added a 'more' menu top right. More menus are meant to slide up from below when pressed.

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.

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.

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.

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.

Front page developed (1240px width) with more sections. Also added hover states here and there. Will add a subscription form at bottom.

Front page developed width) with more sections. Also added hover states here and there. Will add a subscription form at bottom.

New design idea for my own website. Front page 1240px width.

New design idea for my own website. Front page width.

header 768up tabs hover and pressed states

header tabs hover and pressed states

header base pressed tab

header base sticky tabs bar (aligns with toolbar MD elevation level

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.

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.

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.

When action button top right or close button top left are pressed, the button bounds highlight with opacity of accent color. Pink and light blue colors show and paddings for action button.

Pinterest
Search