Mariusz Ciesla - User Interface Designer

Apr 02

How to become a (better) designer

Recently, I have been asked by a couple of people through different means - how to become a designer and make it your day job? For those who don’t know, I was a full-time developer with a passion for good design and drawing a couple of years back and one day I have decided to go back to the roots and start doing design for living. Here are a couple of steps that I did to make the transition.

Step 1: Start doing it

You will never become anything if you don’t start. For me, it was starting a side project, designing my blog, redesigning my blog, redesigning my blog once again, designing my logo, redesigning my logo… you get the drift. I spent most afternoons drawing, reading, improving, iterating and getting feedback from more senior designers. Fortunately, thanks to Twitter, Dribbble et al, it got stupidly easy to network with other designers and networking means feedback, feedback means improving and you’re becoming a better designer one step at a time.

Step 2: Don’t start with Photoshop

You’ve decided to become a designer, so you fire up Photoshop/Sketch/Fireworks/GIMP? Wrong. Start with the basics. Learn to see. Learn the basics. Learn what a grid is and how can it help you. Learn how to gather feedback and iterate on it. Learn to draw. Whatever you choose, your application of choice is probably the worst option. As a designer, you need to remember that it’s only a tool that you use to do your job and tools change - basics don’t. At the end of this post I’ll link to a couple of good books to get you started on the basics.

Step 3: Inspire yourself and ask questions

A lot of good design ideas are stolen. Well, not exactly stolen, but a lot of good ideas come from watching others and how they do their craft. Every time you see something that’s well designed, dive into how it works, how did they do it and how can you do something similar. If you chose to become a web designer, don’t be afraid to look at other fields of design and development - I got a great idea for a poster from colors that I saw on a vintage typewriter. I habitually look for color scheme inspiration for my next design in nature photography, interior design and industrial design. I study how websites are built and I try to learn how to build things that I liked.

Step 4: Work hard

Let’s be honest, most of the things you will make now will be crap and you’ll laugh at it in a year, but being a good designer is a lot like being a good woodworker - on top of all the theoretical knowledge, you need to go through a lot of designs to get better. Every time you make something, put it out there - whether you use Dribbble or show it to your friends, gather feedback. Remember that design is working for your potential user, not yourself. Learn to see, learn to gather and act upon feedback, learn to improve. Build and destroy, remove things until there’s nothing left to remove, iterate. Sleep on it and try again tomorrow. Show it to friends, show it to your mom and show it to that nice guy with laptop next to you in a cafe. Try and fail.

Step 5: Get interested in related sciences

This one helped me a lot. After meeting a bunch of really cool people at one of the coolest Berlin startups, I got really interested in cognitive science and behavioral economics, so I started reading up on those. I learned a lot about how human brain works and this knowledge has impacted how I design, even though I’m mostly doing it subconsciously (as in: not looking through a psychology book before I start).

That’s it. Hopefully this will help you become a better designer. Or a better developer. Or a better gardener. However this helps, I’ll be glad to hear it helped, so you can ping me on Twitter

Books

List of books that can help you get started:

Graphic design theory

Layout

Typography

User experience

Psychology & Cognitive Science

Mar 28

Krakow Open Device Lab - status update

Since the idea of Open Device Lab in Krakow seemed dead (mostly due to lack of interest from the community back in the day), I decided to revive it yesterday at a Startup Stage meetup, during the open mic. This time, the response was pretty positive, including a couple of developers wanting to help build that.

Therefore, I have officially revived the project, you can find us on Twitter at @KrakowODL and there’s a temporary Tumblr blog up. I will meanwhile work on the website and list of what we need from volunteers and sponsors.

For a better mobile!

Mar 27

serialthrill:


  3D Printed Lamp Shades by Samuel Bernier


This is exactly why 3D printing is awesome.

serialthrill:

3D Printed Lamp Shades by Samuel Bernier

This is exactly why 3D printing is awesome.

(Source: airows)

Aug 05

Writing a simple custom lookup table in Sass

Recently in a project I have been required to create a simple style guide in Sass that would include all the brand colors, respond to change of colors easily and scale pretty straight-forward. Unfortunately, soon I found out that interpolation of string to a variable is not easy at all and maps that would map string to a variable are “somewhere in the future” of Sass.

After a fair amount of digging in news groups and trial-and-error experiments, I came up with a simple color lookup table for Sass using @function, nth() and index(). Performance of such a solution is not very good but it’s still worth it if you want to scale color scheme later on and have an automatically generated solution that works.

The markup of the color picker is as follows:

<ul class="colors">
  <li data-color="brand_red"></li>
  <li data-color="brand_blue"></li>
  ...
</ul>

And Sass generator looks like this:

$brand_red: #f20;
$brand_blue: #02f;
...

$color_names: brand_red, brand_blue, ...;
$color_values: $brand_red, $brand_blue, ...;

@function color-for($name) {
  @return nth($color_values, index($color_names, $name));
}

@each $color in $color_names {
  [data-color=#{$color}] { background: color-for($color); }
}

[data-color]:after { content: attr(data-color); }

This generates colored box with name of the color for every color in the $color_names / $color_values array set. I am still working on how to get rid of double array set up, but haven’t figured it yet. If you know the solution, feel free to ping me on Twitter and let me know.

Jun 21

IFTTT Blog: The New IFTTT -

Ladies and gentlemen, the new IFTTT is here!

Over the past few months, our team has been working hard to improve your experience with IFTTT. We’re proud to announce a new look, new language, new Channels, and speedier Triggers!