Mariusz Ciesla - User Interface Designer

postmark:

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

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.

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.

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.

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.

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.

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.

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

List of books that can help you get started:

Graphic design theory

• Graphic Design Theory: Readings from the Field
• Design Elements: Graphic Style Manual
• Universal Principles of Design

Layout

• Making and Breaking the Grid
• Ordering Disorder: Grid Principles for Web Design

Typography

• Elements of Typographic Style
• Thinking with Type

User experience

• Seductive Interaction Design
• 100 Things Every Designer Needs to Know About People

Psychology & Cognitive Science

• Influence: The Psychology of Persuasion
• Thinking, Fast and Slow
• Blink: The Power of Thinking Without Thinking

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!

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.

Without any mercy yet with a little bit of hesitation I decided to remove my old blog. Just like I was tired with clutter on my desk and room and thrown out or gave out a lot of stuff I don’t consider necessary or useful anymore, I was tired that over the years my blog became an accumulation of lots of things - inspirations, posts, work information and other stuff - and decided to just mow it down and start from a blank slate.

I don’t expect to write more often, because - frankly - I am a lousy blogger. I am probably going to keep it pretty quiet, until I have something important that I think should go on the blog - outside of that, I’ll just use Twitter.

So here it is - a blank slate. After giving it a lot of thought and even more trial & error with different approaches, from pure HTML to going with a couple of different content management systems, I decided to go with Tumblr for a couple of reasons:

• it allows me to write posts in Markdown, so I use iA Writer and then copy-paste it into Tumblr edit area
• it is simple enough to not dwell on details, plugins and such and meanwhile extendable enough to do what I need without having to spend lots of time on it
• the templating engine is pretty friendly and fun to do and default themes are good enough to sit there while my inner perfectionist lets me finish the personalized version

I decided to remove Disqus, because I think comments are a thing from the past. If you want to say anything about one of my posts, just reach me on Twitter. I also removed a contact form - if you feel a sudden urge to contact me with more than you can say via Twitter, use any other service listed in the sidebar, most of them have some kind of personal messaging.