Apr 19 2013

Experimenting With Colors And Concepts

Experimentation is a highly rewarding part of a creative process. When you execute an idea and give yourself enough room, you can come up with inspired solutions. Ask yourself: what can you design if you had no superficial rules or trends to follow; only strong design foundations? In this article, I’ll share my methodologies on how I experiment with these two important aspects of design.

Clock

Experimenting With Colors

The process of getting inspiration can be as simple as finding things that you like. Take colors for example. What I usually do is start browsing designs and photos based on colors. Colors determine your mood, and sometimes you may be fixated on a palette. That’s because it’s your current focus and it is what inspires you right now. If there’s anything that Flat design has taught us, it’s that colors are important.

dribbble

Although finding inspiring materials is a significant step, the hardest part is how you interpret that inspiration. In my previous article, I discussed how you should not copy, but steal. The more distance you have between the source and the finished product, the more room you have to improve it. If you start with colors, you will have a lot to play with.

music-player

In my Music Player experimentation, I was motivated to do my own interpretation of Rovane Durso’s concept. For the colors, I found Andrew Bayer’s new album cover inspiring, so I blurred it and created a color palette based on that. Pick the most distinct colors.

background

For the background, I used the eyedropper tool and picked the darker shades. There are a lot of trials and errors involved in just picking the right colors. Mixing colors together can create interesting results. Download this .sketch file to see how you I played with it.

palette

For the user interface’s container, I applied the lighter shades to bring contrast from the background. As for the buttons, I used the background’s colors. There are a few rules to colors that I try to follow:

1- Gradients should be subtle.

2- Avoid using gray. Instead, use dark shades of a color.

3- Use the opacity setting on those colors to create middle tones.

4- Apply black and white opaque at light opacity to get other middle tones.

If you do this step right, you will get a lot of interesting color mixes. The middle tones are mostly used for outlines and shadows but can sometimes be useful for other elements.

color-picker

If you feel adventurous, go directly to the Color picker tool and drag the circle. You should also get familiar with the HSBA (Hue, Saturation, Brightness and Alpha) values so that you can play with those numbers. Understanding the science of colors will help you become more precise.

Experimenting With Concepts

Everything we design is inspired by reality – it is where we live in and where we solve problems for. “Indifference towards people and the reality in which they live is actually the one and only cardinal sin in design” – Dieter Rams.

The purpose of experimenting with concepts is become good at adapting and translating. By reinventing old designs into something new, made for the problems of today, you get the wisdom of the old infused with the experience you have today. In that sense, design is never truly timeless and never truly original, but that’s where you come in. You get to interpret the reality you live in and design for that reality.

dieteramsclock

If you are bound to steal something, you might as well steal from the wisest and greatest. For this experimentation, I chose Dieter Rams’s clock and radio design. But I didn’t include the radio part. Instead, I added digital aspects to it such as the time, weather and settings.

Clock

The Fear Of Mistakes

“Nothing will stop you being creative so effectively as the fear of making a mistake.” – John Cleese. You should watch his video about 5 factors to make your life more creative.

It takes courage to design something out of your comfort zone. It’s scary. But give yourself enough time and allow yourself to make mistakes, and you will get over your fear.

There is a lot of negativity everywhere. Don’t let others tell you what to do. Do what you love. Make mistakes. The person you will become will never be without the mistakes you are making now.

0 tweets

99 Responses to “Experimenting With Colors And Concepts”

  1. @emainier says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/vYbYEKgDOw

  2. @NiaMutiara says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/G5obtAjGFI

  3. @stefdemart says:

    Experimenting With Colors And Concepts: http://t.co/KergjsNEFF

  4. @deimler says:

    Experimenting With Colors And Concepts – http://t.co/6wWQT6dv46 #design

  5. @GPessia says:

    Experimenting With Colors And Concepts http://t.co/7FDPSlGi8C

  6. Experimenting With Colors And Concepts by @MengTo: http://t.co/yIwMLyekuU

  7. M3OW says:

    Could you publish an .ai file or something similar?

  8. Experimenting With Colors And Concepts http://t.co/yu48O3FMez

  9. @Mastabas says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/412kFCXEht

  10. Experimenting With Colors And Concepts http://t.co/C4dOgB9PKj

  11. Experimenting With Colors And Concepts http://t.co/dNnlwrlMTs

  12. Experimenting With Colors And Concepts. http://t.co/LXcLM8VyP7

  13. @adrnf says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/fuQywSopqk

  14. @BrendenG says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/cext1na29K

  15. @veeoinfo says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/WuC1ONsjuJ

  16. Experimenting With Colors And Concepts by @MengTo: http://t.co/o2YKmnL6Uz

  17. Shahnawaz says:

    I like your reply on Illustrator, and I completely agree that Illustrator is complex to use, and why should we (the users) suffer for Adobe’s inefficiency to create a intuitive, easy and effective user interface.

    Also I really liked your article.

    Thanks for such tidbits.

    Shahnawaz

  18. @digitup says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/qzR6EQAbr8

  19. Experimenting With Colors And Concepts http://t.co/sigX2SQ8JY

  20. Experimenting With Colors And Concepts by @MengTo: http://t.co/NBUs5WeidX

  21. Experimenting with Colors and Concepts. #design http://t.co/SdvUwBAWzI

  22. Experimenting With Colors And Concepts by @MengTo: http://t.co/AKPjEC6Rhu

  23. Fabulous article. Thanks for putting it together! Heads up: the Dribbble.com link is broken. :)

  24. @ClubJoomla says:

    Experimenting With Colors And Concepts http://t.co/jDFHXudGAC

  25. Experimenting With Colors And Concepts http://t.co/Ecc4UPmMKX

  26. @Corpan says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/58mZusnSMl

  27. @aaromnido says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/762wyfIpl3

  28. Experimenting With Colors And Concepts by @MengTo: http://t.co/UvPc2DfAjZ

  29. Experimenting With Colors And Concepts by @MengTo: http://t.co/N9gf4ewerv

  30. @xiaoape says:

    对颜色的运用很值得借鉴 http://t.co/tO87o0CCNQ

  31. @Roland16AMP says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/SRCvfh4Emy

  32. Experimenting With Colors And Concepts by @MengTo: http://t.co/Qy8zdlWDeW

  33. @ionutgirbea says:

    Experimenting With Colors And Concepts http://t.co/auDzN5NE4P

  34. @shristea says:

    Experimenting with colour for design improvement http://t.co/Qm9OSxQXzl

  35. @lebigmatt says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/LHSwsbY3G9

  36. @rwcentral says:

    Article: How to Contact Google – http://t.co/ZufMtPrXBz

    Article: Experimenting With Colors And Concepts – http://t.co/XDGRS80rIF

  37. Caleb says:

    Meng, thanks for publishing so many articles about Sketch. I’ve just started using it, and I’m amazing at how quickly I can design without getting distracted by things like brushes, patterns and complex tools.

    I also read your article on “Don’t Copy, Steal”. You are totally right that many designers today are just endlessly coping each other without understanding the principles behind what makes the design “beautiful” or “usable” or “timeless”. You need to study something so much, that you understand the principles behind what makes it such a great design.

    Keep up the great work!

  38. Experimenting With Colors And Concepts by @MengTo: http://t.co/0goU7Mk0Wx #webdesign #design #colortheory

  39. Experimenting With Colors And Concepts — http://t.co/BGunfoFVtW

  40. Experimenting With Colors And Concepts by @MengTo: http://t.co/xblxJD5Uat

  41. Experimenting With Colors And Concepts http://t.co/Ri5Sv1RsYp

  42. @luisedtr says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/1ImwmXtNPa

  43. @ryanswalton says:

    Really cool! @MengTo “Experimenting With Colors And Concepts” http://t.co/PhIC2oy2tk

  44. Experimenting With Colors And Concepts by @MengTo: http://t.co/PfD6pJJMtX

  45. @mrdobelina says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/kF8IMjZUHh

  46. Vipin says:

    Just what i needed to hear. :)

  47. Experimenting With Colors And Concepts by @MengTo: http://t.co/PxoYOBgmWB

  48. Experimenting With Colors And Concepts by @MengTo: http://t.co/yQBVIS6fgH

  49. @plintsites says:

    Lovely: Being #creative and #experimenting is all about making mistakes, but don’t be scared! http://t.co/ib6LQhbSKX

  50. Experimenting With Colors And Concepts -> http://t.co/liz26Ch39A

  51. nice post on Color and Conceptual thinking for Designers http://t.co/sXoMcZ0cxz great design blog all around.

  52. @dubstrike says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/tacEhIUQl9

  53. @rzmota says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/n6Pr3BIJxB

  54. Experimenting With Colors And Concepts by @MengTo: http://t.co/gjxAwXgHLS

  55. @JeremDsgn says:

    Experimenting With Colors And Concepts http://t.co/Let3ClxBf5 • #wdfr

  56. @OStirbu says:

    Experimenting With Colors And Concepts | Meng To – UI/UX Designer http://t.co/da1KVjPbbD

  57. @usableapps says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/PhrLv8TyRZ <-some nice illustrations, beyond #eyecandy

  58. Experimenting With Colors And Concepts http://t.co/lGBcI6bOlz via @SidebarIO

  59. All right. I’ll try sketch today. @MengTo has convenced me. It’s the fear of learning a new tool I need to overcome. http://t.co/E8jWt2w6d3

  60. Experimenting With Colors And Concepts | Meng To|UI/UX Designer http://t.co/AMienlNc3H

  61. Experimenting With Colors And Concepts by @MengTo: http://t.co/scZvanHnPl

  62. Experimenting With Colors And Concepts http://t.co/5F1n2x8MKm

  63. @RussMatney says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/LSq5zUGb2H

  64. Experimenting With Colors And Concepts by @MengTo: http://t.co/szzFi4GycH

  65. Experimenting With Colors And Concepts by @MengTo: http://t.co/svmW03o7WG

  66. “Experimenting With Colors And Concepts” http://t.co/xgQrDh9I5Q

  67. @manuelmaly says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/Bgfh1WuYFS

  68. Experimenting With Colors And Concepts by @MengTo: http://t.co/vBIVdoiXSU

  69. @arjun_aj says:

    Experimenting With Colors And Concepts
    http://t.co/Ukw9YMWl7y

  70. @neoaplin says:

    Experimenting With Colors And Concepts | Meng To – UI/UX Designer
    http://t.co/tIQ7Qyspdm

  71. @smashingmag says:

    A great article on design experimentation with colors and concepts for innovation: http://t.co/mUkLZaMiGZ by @MengTo

  72. @LarsHoekie says:

    Kleurtjes en experimenteren! Tof @MengTo: http://t.co/5z5HAGLTPt

  73. Experimenting With Colors And Concepts by @MengTo: http://t.co/jRbO9pPtX4

  74. @riyadhalnur says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/0gPDWGeSAZ

  75. @eloehfelm says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/TnUWHHCEha

  76. A nice article on experimenting With Colors And Concepts by @MengTo: http://t.co/jBbrNmNRPy

  77. @takashsa says:

    A great #article on #design experimentation with #colors and concepts for #innovation: http://t.co/7gj9nwNbZc by @MengTo
    RT @smashingmag

  78. @miamb says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/bvmIDtsd31

  79. @amirlax says:

    Experimenting with colors and concepts #ui #ux #design #inspiration http://t.co/jPzp38b7bF

  80. @eWoah says:

    A great article on design experimentation with colors and concepts for innovation: http://t.co/elnjvBoVlo by… http://t.co/qgQb0ECXcQ

  81. [...] Great article. (We don’t have Sketch so we can’t open the files. You can install the free trial on [...]

  82. @joycecroft says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/C0SbiabGy9

  83. @drecodeam says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/zCgjkwoVyb

  84. @muudboard says:

    Experimenting With Colors And Concepts | Meng To|UI/UX Designer http://t.co/fAK3BlWJdq

  85. @berthojoris says:

    A great article on design experimentation with colors and concepts for innovation: http://t.co/CTHwXQkg3f by MengTo

  86. @cifero says:

    Experimenting With Colors And Concepts http://t.co/OaRGAvhoan

  87. @AsWeb85 says:

    Experimenting With Colors And Concepts by @MengTo: http://t.co/cONu5YMoES

  88. @NckJrvs says:

    “If there’s anything that Flat design has taught us, it’s that colors are important.” – @MengTo

    http://t.co/aPKTZJ5Fx3

    #GreatRead

  89. Beth says:

    Press inquiry: I’d like to publish a guest blog post by you alongside 100 tech companies & startups in June. Pls contact me at beth@citizentekk.com

  90. David Kizler says:

    Hi Meng,

    Your blog and designs are blowing me away. I’ve currently got a bunch of your .sketch files open to study your attention to detail.

    Do you have any other recommendations for how to learn this level of user interface design or is studying the works of others one of the best ways?

    Thanks!
    David

  91. Jony says:

    Skeuomorphism… Phew!

Leave a Reply