Pinterest

Today
Watch
Shop
Explore
When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.

Material Design Study

Working with Google's Material Design principles in Sketch.
·
33 Pins
 4y
Collection by
Eric Lindesvärd
Similar ideas popular now
Design
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. Google Material Design, Principles, Enter, Marks, Study, Left, Button, Search, Simple
Google Material Design
Principles
Enter
Marks
Study
Left
Button
Search
Simple
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.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
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. Stockholm, Seo, Reasons, Active, Content, Nice, Studio
Stockholm
Seo
Reasons
Active
Content
Nice
Studio
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.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
Front page developed (1240px width) with more sections. Also added hover states here and there. Will add a subscription form at bottom. Subscription Form, Hover, Ads, Development, Width, Bottom
Subscription Form
Hover
Ads
Development
Width
Bottom
Front page developed (1240px width) with more sections. Also added hover states here and there. Will add a subscription form at bottom.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
New design idea for my own website. Front page 1240px width. Own Website, News Design, Communication, Creative
Own Website
News Design
Communication
Creative
New design idea for my own website. Front page 1240px width.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header 768up tabs hover and pressed states Studying, Research
Studying
Research
header 768up tabs hover and pressed states
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header 768up tabs metrics Metric, Alignment, Header, Tab
Metric
Alignment
Header
Tab
header 768up tabs metrics
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header 768up tabs Typo
Typo
header 768up tabs
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header base sticky tabs bar (aligns with toolbar MD elevation level 4) Toolbar
Toolbar
header base sticky tabs bar (aligns with toolbar MD elevation level 4)
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header base pressed tab
header base pressed tab
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header base tabs page scroll Scroll
Scroll
header base tabs page scroll
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header base tabs scroll Scroll Bar
Scroll Bar
header base tabs scroll
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header base tabs metrics Bar Chart
Bar Chart
header base tabs metrics
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
header base tabs Base
Base
header base tabs
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
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. White Colors, Black And White Colour, Accent Colors, Dark Backgrounds, Guidelines, Light In The Dark, Families, Primary
White Colors
Black And White Colour
Accent Colors
Dark Backgrounds
Guidelines
Light In The Dark
Families
Primary
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.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
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. Blue Colors, Light Blue Color, Opacity, Color Show, Highlight, Action
Blue Colors
Light Blue Color
Opacity
Color Show
Highlight
Action
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.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
Filtering view when a FAB (floating action button) is pressed. Pink and light blue colors are 8px and 48px measures. Fab, Pink
Fab
Pink
Filtering view when a FAB (floating action button) is pressed. Pink and light blue colors are 8px and 48px measures.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
Developed one step further. Been a little sloppy with the contact form here, I will get the right measurements in later. Blog posts are replaced with page list items which of course will be cards in the tablet and desktop versions. Contact Form, First Step, Wordpress, Desktop, Posts
Contact Form
First Step
Wordpress
Desktop
Posts
Developed one step further. Been a little sloppy with the contact form here, I will get the right measurements in later. Blog posts are replaced with page list items which of course will be cards in the tablet and desktop versions.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
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. Revolution, Grid, Meant To Be, Two By Two, Sketches, Version
Revolution
Grid
Meant To Be
Two By Two
Sketches
Version
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.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
Did an exercise with all the correct metrics, type sizes, paddings etc according to MD guidelines. They do have a point with all this. Exercise, Point, Type
Exercise
Point
Type
Did an exercise with all the correct metrics, type sizes, paddings etc according to MD guidelines. They do have a point with all this.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
Web apps again. Experimenting here with a menu below the search input field to help users find exactly what they look for. Unorthodox? Maybe. Web App, Experiments, Users, Apps, Menu, Field
Web App
Experiments
Users
Apps
Menu
Field
Web apps again. Experimenting here with a menu below the search input field to help users find exactly what they look for. Unorthodox? Maybe.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
I like the idea of web apps. A website that looks like as easy to use as an app, and where the hamburger is... that's right – gone! Main nav is replaced with simple tabs. Inspired here by the latest Youtube app. Hamburger, Website, Inspired
Hamburger
Website
Inspired
I like the idea of web apps. A website that looks like as easy to use as an app, and where the hamburger is... that's right – gone! Main nav is replaced with simple tabs. Inspired here by the latest Youtube app.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
Just a mockup. Mockup, Miniatures, Model
Mockup
Miniatures
Model
Just a mockup.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
Services page, desktop view. Hm, might be better to design these items card-like. Feel free to comment. Pie Chart, Feel Free, Good Things, Feelings, Cards
Pie Chart
Feel Free
Good Things
Feelings
Cards
Services page, desktop view. Hm, might be better to design these items card-like. Feel free to comment.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
First card ends up last. Nice detail would be to have the supporting copy fade out while sweeping. Fade Out, Sliders, Faded, Supportive, Detail
Fade Out
Sliders
Faded
Supportive
Detail
First card ends up last. Nice detail would be to have the supporting copy fade out while sweeping.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study
Provides a natural feeling of wanting to swipe the cards. Front card is a button. Natural
Natural
Provides a natural feeling of wanting to swipe the cards. Front card is a button.
Eric Lindesvärd
Eric Lindesvärd
Material Design Study