Mariusz Ciesla - User Interface Designer

Custom conference coupon design for Kanbanery, by yours truly.

Wed, 12 Jun 2013 16:38:04 +0200

Custom conference coupon design for Kanbanery, by yours truly.

Designing a modern email

Sat, 08 Jun 2013 19:48:09 +0200

It’s not unusual to have a flashback to the Netscape Navigator 4 and Internet Explorer 5 days when working on an HTML email. The quality of rendering engines is totally inconsistent, most modern development techniques are unavailable, and even images – an essential element of many emails – are turned off by default in many clients. This can feel like 1998, but the web development community has learned a lot since then. Strategies like progressive enhancement and modern tools like Litmus can help us build HTML emails suited for today’s Babylon of inconsistent desktop clients, various web clients, tablets, smartphones, and high resolution displays.

Last month we decided to start sending educational emails to new Beanstalk customers to familiarize them with our features. The plan was to send a total of three emails with a set interval between them. After designing these emails I decided to explain my process and go through the tools and techniques I used.

Read More

#krakow #architecture #building

Thu, 16 May 2013 19:49:51 +0200

#krakow #architecture #building

One of the reasons I love Kreuzberg so much. Great coffee, fast...

Wed, 01 May 2013 13:51:39 +0200

One of the reasons I love Kreuzberg so much. Great coffee, fast wi-fi, soothing music. I could live in this place.

The fundamental question

Sun, 21 Apr 2013 20:18:43 +0200

This post originally appeared on my Medium page

During the last couple of years, I have been bouncing between solid, well established job in an agency or a startup and less stable position as a freelance user experience and visual designer. Working with different people in different environments, I have learned one thing: being a good designer is all about asking questions early and often.

A lot of clients come to me asking to do some kind of design work for them and some of them don’t understand when I ask the most important question: “Why?”. I also met a lot of designers that don’t ask enough questions during the project or would like to do so, but don’t really know where to start.

“Why?” is the first and the most fundamental question that you should ask when starting, because it’s really simple to ask and - from my experience so far - really hard to answer. You can ask a lot of follow up questions later, but people usually respond to early “Why?” with a gut reaction answer that gives you a head start of bringing you really close to their goals and ambitions. It also puts them out of the comfort zone a bit, since most will expect you to jump straight into drawing instead of asking awkward questions, often yielding unexpected answers and reactions.

Asking “Why?” is a great conversation starter and the answer can be a beginning of a great story - about the business, objectives and ideas behind the entire company. And since every great product starts with a story, go ask awkward questions and design amazing things.

My Behance portfolio (as well as my website) has been updated...

Wed, 17 Apr 2013 13:43:17 +0200

My Behance portfolio (as well as my website) has been updated with small case study on logo and web design process behind Anynines. I have been working with the guys at Avarteq to create a simple, memorable logo for their cloud hosting service for developers as well as simple web design for their beta product.

I thought I’ll celebrate the starting of the new...

Mon, 08 Apr 2013 20:50:20 +0200

I thought I’ll celebrate the starting of the new “Mad Men” season somehow, so here’s an illustration of Don Draper smoking a cigarette.

radicalhomo: Photographer’s girlfriend leads him around the...

Sat, 06 Apr 2013 17:22:08 +0200

radicalhomo:

Photographer’s girlfriend leads him around the world.

Carl Sednaoui: Google Maps One-Hand Zoom on iPhone

Wed, 03 Apr 2013 08:45:11 +0200

Carl Sednaoui: Google Maps One-Hand Zoom on iPhone:

carlsed

A friend and I just discovered a simple yet incredibly useful feature in Google Maps for iPhone… The one-hand zoom. To perform a one-hand zoom simply double tap on your map and, after the second tap, leave your finger pressed. You can then move your finger up and down to zoom in/ zoom out.

This works on my Nexus Android too, by the way.

Why we have our best ideas in the shower: The science of creativity

Tue, 02 Apr 2013 22:01:53 +0200

Why we have our best ideas in the shower: The science of creativity:

Science proves that absolutely everyone is creative, probably just needs proper environment for it.

How to become a (better) designer

Tue, 02 Apr 2013 19:21:00 +0200

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

Krakow Open Device Lab - status update

Thu, 28 Mar 2013 08:32:47 +0100

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!

serialthrill: 3D Printed Lamp Shades by Samuel...

Wed, 27 Mar 2013 17:39:39 +0100

serialthrill:

3D Printed Lamp Shades by Samuel Bernier

This is exactly why 3D printing is awesome.

Writing a simple custom lookup table in Sass

Sun, 05 Aug 2012 22:32:09 +0200

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.

IFTTT Blog: The New IFTTT

Thu, 21 Jun 2012 07:42:26 +0200

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!

"When our tools don’t work, we tend to blame ourselves, for being too stupid, or not reading the..."

Sun, 29 Apr 2012 21:26:17 +0200

“When our tools don’t work, we tend to blame ourselves, for being too stupid, or not reading the manual or having too fat fingers… When our tools are broken, we feel broken. And when somebody fixes one, we feel a tiny bit more whole.”

- Steve Jobs on iPhone and usability

"Simplicity isn’t something you can stick on top of a user interface"

Sun, 29 Apr 2012 21:06:01 +0200

“Simplicity isn’t something you can stick on top of a user interface”

- Simplicity Isn’t Simple

Responsive viewport units

Sat, 21 Apr 2012 13:50:39 +0200

Responsive viewport units:

dstorey:

With all this new fangled talk of responsive web design, its about time that we had a poster child CSS unit to go with it. So move over em, CSS3 Values and Units introduces a bunch of new viewport units that are getting ready for their time in the limelight.

Motorola recently implemented…

52 Weeks of UX: What Does it Mean to be Simple?

Sat, 21 Apr 2012 09:44:22 +0200

52 Weeks of UX: What Does it Mean to be Simple?:

52weeksofux:

All designers say simplicity is important, but what does it really mean to make something simple? Most of the time we think it means less, that by removing stuff we achieve simplicity. We think by keeping content above the fold we’re helping people focus, or by using bullets instead of…

"Tetris was invented exactly when and where you would expect — in a Soviet computer lab in 1984 — and..."

Thu, 19 Apr 2012 15:45:35 +0200

“Tetris was invented exactly when and where you would expect — in a Soviet computer lab in 1984 — and its game play reflects this origin. The enemy in Tetris is not some identifiable villain (Donkey Kong, Mike Tyson, Carmen Sandiego) but a faceless, ceaseless, reasonless force that threatens constantly to overwhelm you, a churning production of blocks against which your only defense is a repetitive, meaningless sorting. It is bureaucracy in pure form, busywork with no aim or end, impossible to avoid or escape. And the game’s final insult is that it annihilates free will. Despite its obvious futility, somehow we can’t make ourselves stop rotating blocks.”

- Angry Birds, Farmville and Other Hyperaddictive ‘Stupid Games’ - NYTimes.com (via wonklife)