One of the biggest things you’ll notice in material design is the use of bold, vibrant colors.
Material design’s color guidelines describe the color style as being "inspired by bold hues juxtaposed with muted environments, deep shadows, and bright highlights."
If you need to generate material design color palettes, these online tools will help.
1. material palette
In this tool, you start by picking your primary color and accent color. Afterwards, it will show you a live preview of the generated color palette and offer you a variety of ways to download it.
2. Material UI’s Material Design Colors
This is a nifty "cheatsheet" that presents all of the material design colors in one page.
3. Random Material Generator
Do you want to let fate decide what your color palette should be? Use this tool to randomly choose your material design colors.
4. Material Design Palette Generator
If you’re interested in creating a custom, material-design-like color palette, check out this tool. First, you need to specify a color — and it doesn’t have to be one of the official material design colors — using a color picker dialog window similar to the ones you can find in your favorite graphics editor. The Material Design Palette Generator will then generate color swatches based on your chosen color.
5. material mixer
This useful tool shows all material design colors in a conveniently compact grid layout. Click on a primary color and accent color to preview and generate your color palette.
6. Material Colors
This tool displays just the 500 and A200 colors of material design color swatches.
7. MaterialUp’s Material Design Colors
This is another simple tool for visualizing material design colors. It shows the primary colors side-by-side. Clicking on a "color bar" shows all of the color swatches associated with that color.
8. Tint UI’s Material Design
This tool displays just the material design 500 colors.
9. designskilz’s Material Design Colors
This simple tool helps you visualize all the material design color swatches along with their official names (e.g. Pink, Light Blue, etc.).
Material Design Color Plugins for Graphics Editors
If web tools aren’t your thing, you can instead install a plugin/extension that integrates the material design color swatches right into your design software.
- For Photoshop / Illustrator: Google provides downloadable Adobe color files (.aco) to make it easier to develop your color palette within Photoshop and/or Illustrator.
- For Sketch: Check out the open source Material Design Color Palette Sketch Plugin by Koji Ishimoto.
- For Gimp / Inkscape: You’ve got a couple of options: gimp-material-design-color-palette by KiSSFLOW and material-design-colors by Soichiro Kashima.
For many, it’s understandable to want to fast-forward through all the rookie mistakes and the fumbles at the beginning of our careers. We all want to be great designers and creatives right away. But there’s something to be said about being a beginner that you just can’t get when you have a few notches under your belt. Here’s why you should cherish being a beginner designer:
1) Beginner Gains
In weightlifting, there is a phenomenon that happens with beginners when they first start lifting weights called “beginner gains.”
In a nutshell, beginner gains are huge observable improvements (or “gains”) in strength, muscle growth, and size. These huge improvements tend to only happen for the first 3-6 months of your training regimen as your body rapidly responds and adapts to the new stimuli you are putting it through. Simply put, you get stronger and bigger much faster as a beginner than if you’re an experienced lifter.
This phenomenon could apply to being a beginner designer (or beginner anything, really) as well. Being a beginner is where you’ll see the most improvements in your work. Your mind isn’t bogged down with jargon, or “the right way” to do things, or the battle scars that comes with working with a long list of clients. When you’re a beginner, all you’re worried about is improving and adapting to your new environment and if you commit to really learning from this point in your career, you’ll be better equipped the handle what comes next.
2) Mistakes Will Seem Huge, But Are Not
When you first start out as a designer or a creative, you will make mistakes and they will feel like you’ve just ruined your whole life. That poor choice in font or that horrendously put-together poster you designed for a friend will seem like a mistake that you just won’t be able to recover from, ever (but that is hardly ever the case, though).
This is a good thing.
Those small mistakes you make as a beginner designer will haunt you and prevent you from making them again in the future when the stakes are higher for you. Learning from these early mistakes is what’s going to make you a great designer.
3) Fresh Eyes
You might have good taste (which is probably why you’re a designer in the first place). However, you don’t really know what you like or don’t like yet. Which means you’re able to see design and think about design more open-mindedly. Your opinions are not rigid yet when you’re a beginner and you’re more willing to take risks and explore new solutions.
This “freshness” is an asset that you have to hold onto for as long as you can because it will fade sooner or later.
4) You Have Something to Prove
Having something to prove is a great motivator. Maybe you just want to prove to yourself that you can be great or to the people who doubted you. Maybe you just want to make mom and dad proud. In any case, that hunger to prove yourself is an asset that experienced and “proven” artists rarely have anymore in the same intensity and the same volume.
5) Freedom to Be Exactly the Designer You Want to Be
Again, not being held down by rigid ways of thinking or learning about design means you’re free to pursue exactly the kind of designer you want to be.
When you become a battle-hardened veteran creative, it gets much harder to stray from the formula that works for you and your clients. As with any job, the longer one does it, patterns begin to emerge and it becomes increasingly difficult to break from those patterns especially when they’ve been working for you. Beginners don’t have to worry about that yet.
While being a beginner is fantastic, unfortunately no one stays a beginner forever (and who would want that, anyway?). Being a beginner is a process; a transition period into being the designer you’re meant to be. And while most of us would probably rather skip all of the embarrassing and cringe-worthy moments that come with being a beginner, embracing this transition and leaning into your beginner status is something you’ll never be able to do again. So cherish it and learn from it while you still can… but don’t forget to move on be the fantastic designer you’ve always wanted to be.
Simplicity can be a valuable asset, especially when it comes to web design. Simplicity makes websites look sleek, reduces navigation confusion, and it helps achieve the desired goals and results (i.e., more signups, subscribers, and sales) in the most efficient way possible.
But too often, simplicity eludes many of us designers in our attempts at a well-designed site, often giving in to feature creep or scope creep or just plain old whimsy. So what’s a website designer to do? Fret not, for we’ve put together a few starting points to get you on your way.
1) Remember the Pareto Principle (or the 80-20 Rule)
A ‘clutter-free interface’ is the mainstay of a minimalist website. One of the ways to go about creating a website with very little, to no clutter is to remember the Pareto principle, also known as the “80-20 rule,” which states that about 80% of the effects come from 20% of the causes.
Put the rule into practice by rethinking what you choose to include in your design in the first place.
To begin with, get rid of all the elements on your web design which do not drive your potential customers to the sales funnel/call to action/desired outcome.
This may include getting rid of long strings of text, ugly looking or unnecessary buttons, forms with too many fields, and arrows or text boxes which occupy white space and add nothing to the functionality of the website.
The thinking behind this minimalist approach is that only 20% of your design choices will affect the desired outcome of your website (i.e. more sales, conversions, subcriptions, etc.). Therefore, if you strip down your design to its barest essentials, you ensure that everything that is included in your design is making the biggest impact it can make.
2) Make Navigation Effortless
A website with tons of neat navigational features might seem like a great idea. It’s novel and it seems interesting.
However, an unfamiliar navigational scheme can cause a hindrance in the user-experience by making the user have to “re-learn” how to go from one place on your website to another. This can create a negative impression on the users of your website. Also, it discourages those same users to return to the site.
Here are some quick tips to help make navigation effortless for your visitors –
- Place the most important information above the fold.
- Cut down on redundant or unnecessary navigational links (i.e. if you have a “Home” button in your navigation bar, don’t include a hidden “Home” button in a “hamburger” icon).
- Get rid of redundant inner pages by using analytics tools to know which of your pages don’t increase your conversion rates.
- Make navigation buttons easy to locate.
- If you have a lot of content, Infinite scrolling might be a way to go since it will cut down on one extra navigational step to get your user from page 1 to page 2, for instance.
- Use universal icons and symbols for navigation buttons. It can be as simple as a ‘down’ symbol used for dropdown menus.
- Don’t underestimate the sitemap.
These tips are immensely helpful for creating an intuitive navigation on your website and provide an enhanced user-experience to the visitors.
3) Compelling Copy
Readers skim. With an incessant flood of copy doing the rounds on the internet, it is increasingly difficult to go through all the content that a reader comes across. The only way to grab readers’ attention is by creating compelling copy.
The copy on your website should not only be compelling enough in terms of the content, but also in terms of its presentation. From the designer’s perspective, make your copy more compelling by:
- Choosing a readable and user-friendly typeface. Forego the fancy, expensive fonts and go for the ones easiest on the eyes and causes the least fatigue.
- Try separating long copy into bite sized information.
- Highlighting important text using special formatting options
- Creating bulleted lists
Also, since quality content leads to your website being ranked higher on search engines, don’t forget to rope in the best talent out there to create extraordinary copy that makes an impression.
4) Embrace a Monotone Color Scheme
Depending on the type of content you have in a website, a monotone color palette can often give your design a sleek, classic look that immediately simplifies a web design.
Corporate websites often use a monotone color scheme for their websites mainly as a function of their strict branding efforts but a simple color scheme can benefit any type of website looking to simplify things a bit.
The thinking behind having a monotone color scheme is that with fewer colors for the user to process, the content that you need to emphasize (i.e. a line of text, a call to action, or an image) will have a better chance of grabbing the user’s attention. It’s a simple and effective technique for getting the job done.
Bonus: Break the rules and follow your instincts
At the end of the day, experimentation and following your instincts on simplifying your website can still do wonders. Don’t be afraid to break the rules and create your own path. Sometimes the best solutions are the ones no one has thought of yet.
What is your take on this? Let us know in the comments below.
Editor’s note: Juan Pablo (JP) Sarmiento is the founder of the ShockFamily (IconShock, DesignShock, and more). He’s also one of the biggest aficionados of design resources I know, curating them in his spare time. In this post, he highlights some fresh UI kits he’s come across recently as well as two free UI kits by DesignShock.
There are inevitable tasks that designers have to face daily, like the constant need to generate new ideas for user interface designs. If there are resources out there that can help, things can become less complicated.
This roundup contains a hand-picked selection of UI kits with different styles and file formats for mobile and web interfaces. All of them are free, fresh, and ready to be downloaded!
1. iOS 9 GUI (iPhone)
These are Photoshop and Sketch templates for the latest version of the iPhone. This kit is by Facebook. It has UI components such as buttons, menus, and whatnot.
2. Apple Watch GUI for Sketch
This is a useful freebie for any designer interested in working on the new Apple Watch user interface.
3. Trend UI Kit
This free kit is a compact, but very useful, collection of UI elements.
4. Groom UI Pack
Groom UI has a simple and clean style. The UI components are fullly editable with Photoshop.
5. Pages UI Web Kit
This is an excellent set of UI components for website layouts. This kit comes in Sketch format.
6. LIQUID: Free GUI Kit
A clean and versatile design kit that has responsiveness in mind. The kit supports many types of web content in different screen sizes.
7. Fashion UI Kit
This UI kit is perfect for e-commerce sites. It has a simple and clean interface. It’s available in Sketch format.
This is a mobile and desktop UI kit that has a fresh, modern look. PerfectKit comes as a bundle of 20 PSD files.
9. Land.io UI Kit
This is a complete landing page UI kit with a great assortment of elements: video player, pricing table, social card, and more. It’s available in Sketch format.
10. Unique Design UI Kit
This is a free UI kit that is excellent for web apps. The design will look great on mobile and desktop screens.
11. Free Dashboard UI
Dashboard UI is a kit for designers who want to create a clean admin interface. This UI kit can be edited with Photoshop.
12. UI Kit for Travel Apps
This free UI kit is designed for mobile apps. It has over 50 screens that your next app can use.
13. Food & Drink UI Kit (PSD + Sketch)
This is a food-themed UI design kit. It’s totally free, and comes in either PSD or Sketch format.
14. Cardzz iOS UI Kit
Cardzz is a stylishly dark-themed design kit for iOS apps. it comes with 21 PSD screens.
15. Elegance iOS UI Kit
This UI kit comes with an attractive design that contains 12 templates. It’s available in PSD and Sketch formats.
16. Lithium – Free Mobile UI Kit
Lithium is a massive free mobile UI set. This kit has three color themes: teal, amber, and lilac.
17. Creative UI Kit
This is a responsive web design kit. It’s designed with a lot of user interface elements that make it easy to quickly mock up your designs.
18. Ink UI Kit – Free Sample
This is just a free sample of the Ink UI Kit – Full Version. It’s available for Sketch and Photoshop.
DesignShock UI Kits
And, last but certainly not least, here are two free UI kits from us, over at DesignShock. Please enjoy!
19. Windows 10 GUI for Mobile and Desktop
Windows 10 brings a new UI with great elements. Our massive kit includes vector files for Illustrator, 180 free icons, and more!
20. Flat Style GUI Set
Our flat-design UI kit has 500+ fully editable elements. All shapes are vector-drawn for scalability and flexibility.
These beautiful websites exhibit how typography can drive designs. In this showcase, you’ll find fascinating and unapologetically bold implementations of typographic elements.
Designing metro transit route maps is possibly one of the most challenging graphic design jobs one can have. These maps need to be legible, communicative, and almost universal — especially if designing for one of the world’s most visited and travelled cities. If you’ve ever travelled to a foreign city and have had to use their subways, you’ll know how important these route maps can be to getting around.
The subway maps we chose are from some of the world’s busiest cities with extensive subways and rail systems. Check them out and let us know what you think in the comments section. Click on the images to view them in full size.
Chicago, IL – USA
Being Chicagoans ourselves, Chicago’s “L” (short for “elevated”) transit system holds a special place in our hearts. While not entirely “underground,” the “L” offers some of the city’s best views and a truly fantastic way to experience Chicago.
New York City, NY – USA
The New York subway system is perhaps one of the most iconic in the world. New Yorkers will always have a story to tell about it and the rest of the world will always listen intently.
Moscow – Russia
Moscow is often thought to be one of the most beautiful underground systems in the world.
Madrid – Spain
The Madrid Metro is another beautiful underground transit system. It is also one of the longest underground metros in the world.
Paris – France
The Paris Metro is dense. It covers just 40 squares miles with 132 miles of tracks and a whopping 245 stations. With such a complicated network under the streets of Paris, having a fantastic route map is definitely essential.
Tokyo’s subways are surprisingly easy to navigate despite the intimidating language barrier. This subway route map looks complicated but with punctual trains and an organized subway rider population, navigating through Tokyo isn’t hard at all.
The London Undergroud or the “Tube” is another fantastically complicated subway system. Thanks to its subway map, however, it’s easy to get from point A to point B.
Berlin is Germany’s capital and its cultural center and it has a subway system to match.
Tell us what you think in the comments below.