I’ve been a designer for over ten years. I recently started working a lot with Webflow to take my work from pixels to code. With that, I shifted my focus on pretty much only taking on visual development work for my clients.

With this visual developer journey and being now on both sides of the process, I’ve learned so many things about the design handover that we Designers can improve! Not only how to become more favourable by your devs or webflow friends. But also, give them less space to guess and avoid them designing some of the missing pieces.

I decided to create a checklist for designers working on websites. I’ve included all the important steps designers should not miss when preparing the visuals for the website devs. This checklist will help you rapidly speed the whole design-to-code process, and reduce the number of emails and slack messages before you launch your website!

1 — Define Typography

Prepare a separate page with all different types of fonts used in Desktop view. Then prepare 1–3 more to show how to scale your typography on Tablet and Mobile view.

(e.g.) To easily tell that heading1 is 70px on desktop and 32px on mobile.

2 — Folder with Fonts and the right weights

Send over only the files used in the design. Add only the font weights used in your design. And if you can provide all the different font file types to get the best browser support.

Reason: So your devs don’t have to go over the whole design and guess if you used in any part Semibold Italic when you send over the entire font family.

3 — Define Colors

This is excellent maintenance for your design as well. Reduce grey shades into 3–4 different swatches and list out all colors used in the design. Bonus points for using styles across your design with an easy to follow names.

4 — Define widths of your website & grid system

Set an easy page with an example of your grid, ideally with notes about the main content width wrapper. Is it 1100px or 1280px? And is there one main wrapper or subpages that have one more?

5 — Responsive

We (Designers) always complain about how our designs were translated. Still, we usually fail to deliver the most that we can — prepare at least one design (e.g., homepage) for all different viewports. To reduce the space to guess how the design was intended.

5.2 — Spacing

Set your grid well and keep your margins in place. In other words, work with a 4px grid or just additions of 10px for example — 80px margins between sections or 16px distance between grid items!

Reason: Nobody wants to add different CSS values for each element.

6 — Prepare assets

Any images in your designs? Add one more canvas/page just for the assets — all next to each other with custom names so your dev can select everything and export it with one click. The same goes for sharing images and favicon.

6.2 — Icons in squares

Logos of partners, icons in the 3x2 section of features usually have different sizes when exported (height and width). Prepare all icons and logos in square canvases, so everything scales nicely without your dev doing this same work anyway.

6.3 — This is also a way to learn that 100px shadow is an insane thing

The same goes for all the shadows. We, as designers, love smooth shadows and floating elements. It all looks nice in your designs but once exported, all the shadow is exported with it, and your devs have to positioned absolutely or hack their way around it somehow. This is also excellent training to see your assets before handing them over. One side will still have to decide this. Be the designer and do this without the devs guessing and working on the designs on their own.

7 — Hover states

Put all your elements that interact with the user’s mouse on a separate artboard and prepare all states such as hover, click, pressed. If you know a bit of CSS, you can also specify the transition timing e.g., button — switch the bg-color in 400ms.

8 — Input states

Prepare how the input/textarea should look like when interacted with. 4 States to keep in mind — Hovered, Placeholder, Pressed, and Focused.

9 — Form States (Error/Success messages)

Define states of your forms. In Webflow you define 3 states — default, successfully submitted, and error states on inputs. Go the extra mile and also provide a copy that will be on those messages?

10 — Open navigation

Design states of your navigation. Especially on mobile view, show how you intend your sign-up button to be displayed on 414px — 320px viewport. Define how opened dropdown items look like and how opened menu on mobile is intended to look like.

11 — Tab/Slider states + Assets

The same goes for states of tabs and slides. Usually a very overlooked part of the design. Is there a component with tabs? Prepare exportable graphics for each of them.

12 — Sharing images and Title and Description for each subpage

We’re almost done! Prepare a favicon (icon in the browser tab) and design a nice graphic for your website once it’s shared on socials. So the sharing post looks great as your site! (size 1200x627px)

If you're in the client position provide Title and Description of each subpage in a separate document so that every page is a unique in eyes of the search engine.

13 — 404 page

Spend time designing your 404 page, not just for the lovely graphics but also for deciding where to point your visitors to once they land on non-existing links. (Should they go just to the homepage or contact support or the latest from the blog?)

14 — Alt tags for Images/Links

With the accessibility awareness, it’s fantastic if the client provides a doc/spreadsheet of alt-tag or descriptions of the images ->, e.g., Hero Image: Client dashboard displaying analytics of your latest week, or anything close to that!

15 — Define CMS logic

Webflow only — If you are aware as a client of the platform you work with — define CMS logic and type of item in each of your collections. Set your boundaries for the content right from the beginning (your devs will ask for this at some point anyway)

The End

With that said — You don’t have to do all of it, but if you want to ensure the best outcome of the transition to code, it should be in your best interest to go the extra mile. If you’re already doing 10 points out of these – Thank you so much! Working with you is probably a pleasure.

P.S. I pretty much wrote this as a guide for my future cooperations to set some groundwork right from the start. DM me on Twitter or leave a reaction here with anything you are requesting from your designers or developers I'll be happy to hear more people talk about this topic!

I'm tweeting about design, webflow and no-code here: Twitter — Jan Losert

Originally as a Twitter thread here: https://twitter.com/JanLosert/status/1376554499511320580

Webflow is getting massively popular. It’s taking over the design/dev industry and is leading the no-code tools market and changing the lives of a lot of designers and developers out there. But the thing which is still a bit different and harder about Webflow is the fact that you need to at least know a little bit of how websites work to get into it. (Damn you, learning curve!) In this article, I’m going to share with you all of the important bits and pieces of Webflow that I learned and incorporated into my daily work.

But don’t worry, this guide isn’t technical at all, in fact — I can’t on my own write a single line of code so take this as a complete checklist from a non-technical person! So let’s look at what are we going to cover:

What’s Webflow

In case you never heard about Webflow, Webflow is — A visual web design tool that translates your design decisions into clean, production-ready code. Built to enable designers and developers and basically anyone to create fully responsive websites.

Why should you care?

Think about it this way — If you’re a designer, Webflow is a step forward in your career. You’ll be able to take on stuff you design and make it live. Not with prototypes but actually live. And it’s really that simple. Of course, you'll need to learn a few things but in general, this is the future. From the client’s idea — research — design — to an actual working project. All done by you — the designer.

Here's how using Webflow changes your design process:

[May 2020 Update] I've created a Youtube video covering all the parts of this guide to give you another way to digest the content and start with your Webflow journey!

So let’s look today at where to start with your learning process and find out how Webflow can improve your skillset.

0. Where it all starts

Webflow University — This might seem obvious, but Webflow university is something else than standard product teaching videos, that's why I'm including this at the very begging of your journey. This is a place where I fell in love with this product. The tutorials are always on the point, under 5 mins and superbly funny, funny, funny even tho it’s technically coding. And masterfully created education materials around every part of the application.

Learn web design with free video courses and tutorials | Webflow University

Note: I personally learned everything from these videos — which I think is a pretty decent testimonial and that's why I think it has to be on the first spot here.

1. The Box Model — The ONLY tech thing you need to know

Box model — This CSS rule is one of the small challenges you'll face in the beginning. In general, we are talking about the understanding of how websites work — given that each block is consisting of a few properties which leave it placed on the website. Webflow designing is all about stacking boxes on top of each other. Which is the main difference between Sketch/Figma/XD and Webflow. In graphic editors we're used to building in space/canvas and put elements anywhere we want vs. in Webflow you’re stacking blocks on top of each other.

PS. I’m not the best at explaining this, we’re here because of Webflow. I’m no CSS guru. Webflow has an amazing explanation of this — The box model for beginners web design tutorial

But enough theory. Let’s look at where we will spend most of the time.

2. The Designer — Deep-dive Into The Main Interface

So this is it, this is the interface where we’re going to be creating all the designs. Yes, Is does look a little bit like a Photoshop interface. There is obviously a LOT of going on so let’s look at the most important parts for you.

01 — Navigator — This is the structure of each page displayed as an overview of all the elements such as divs, images or text blocks. You can think about it as layers in Sketch or Figma.

02 — Pages — Here you'll find an overview of all of your pages and their details within the project + option to duplicate or add new pages and folders to keep the structure of your work. Note here: folders are great for the organization but they will add “folder name/ to your URL, so think about this during planning your project.

03 —Page & SEO Settings — Once Pages panel is open, hover over the certain page and click on the settings icon to add various SEO and OG tags. This is also a place to add your custom code, duplicate pages or delete them.

04—Assets Manager — This is a place where you can view all your assets used within your project. With a little trick (see below) it works as FTP to eg. upload your OG Images.

05 — Style Panel — The Main panel to work with your elements within the project. Add margins, colours or text sizes and position them properly in your designs.

Within the style panel on the first section, you’ll also find a field for Selector for giving your element CSS class/classes. Thanks to that you’ll be able to style multiple elements at the same time. And the little arrow there is for styling states of your element like what’s going to happen on hover etc.

06 — Element Settings — Second Tab in the right panel, all settings of the ONE particular element. Settings like where the particular button should link to, how certain collection should be filtering results etc. — The important take away here to remember is: this panel is only tied to one item, not like with the style panel and classes.

07 — Interactions — The advanced part of Webflow but frequently described as the most important Webflow magic. A place to set up all the cool animations and transitions for your project. But we will leave this for now. You won’t necessarily need it for your first projects.

08 — Break Points — 4 main breakpoints and a new panel with the current resolution. These are 4 tabs to review how your website looks on different devices. Something that I'd personally kill for in Sketch. This is where I see the biggest power of Webflow. Remember the long hours of creating every web design for Tablet and for Mobile in Sketch or Figma. By just moving text around and making these looong noodles of designs. Just so your developer knows how to shrink it down. With Webflow I’m usually done with making the whole site responsive within 30 minutes to 3 hours tops for complicated sites.

Device Check (Sizes) — One last thing — you see the right dragging thingy? That’s for you to test different devices and making sure your website does look awesome on all of them.

And that’s all of the main stuff. Following I listed a few places for you to know about for the future. You’ll need these once you get comfortable with the list above.

(Additional) 09 — CMS — Is something a little bit advanced but super powerful feature, that’s going to save you a lot of time so I think it’s good to be aware of it. Think of the times Invision Craft came to the game but this time it’s on sooo many steroids. Webflow CMS is a part of your project which you can use to fill content to an element called Collection list. Collections are something that you put your content in to let the content being handled by your CMS and that’s where your whole Webflow game becomes dynamic!

(Additional) 10 — Project Setting — Isn’t already part of the Designer interface but it’s a place with all the additional settings and things such as favicon, custom fonts settings, hosting settings, etc.

(Additional) 11 — Editor — And the last bit of the whole Webflow Suite is Editor, it’s sort of backstage for your website editor/s. Remember the times where you got an email from your client/copywriter that there are 15 typos in the design or live website and screenshots of what to fix? Well, that’s is over now. With editor access, anyone can go and edit content at any time. Sounds scary I know. But don’t worry. Your editor has only surface access — editors are not able to add elements only edit content in them. With editor access, you can also invite people to contribute articles to your company site, or any other content.

(Additional) 12 — Top Bar Actions — Undo and redo, status if your project is saved to Webflow servers, the 3rd section is one of the most important ones if you want to export your code to use it on your hosting. 4th icon is to share your project via the Designer (for support or any kind of help) and the 5th is where you’re going to publish your site!

And that’s all about the interface. Next, we will cover all the elements like div or link block to look at to actually start creating!

📝 You might have noticed we haven’t covered the “+” icon in the left sidebar! So, let’s do that right now — The Elements panel!

3. Elements Panel — Overview Of The Most Important Elements And Little Tricks Around!

The first time you launch Webflow you’ll find a big variety of elements, which can be a bit overwhelming at first. Some of them come with predefined properties to ease the learning curve some are tied to specific use cases. So let’s look together at the ones used the most, to help you navigate through them and really touch on the basics so you can explore the rest later in the process.

Div block (Basic) — Main building element for every project. Div block is in general, a folder (wrapper) which you’ll use to group and position your elements. Div with Flex properties will quickly become your best friend. The most common layout structure would look like this.

Note: You might have noticed elements such as Section, Container or Columns these are superb for start. And feel free to use them — but they are in my eyes basically just divs with pre-defined properties which you’re unable to change. This might be nice to start with but in the long run, it might not be the best decision. Using Container element you’re also tied to having all your designs designed in 940px width.

Grid (Layout) — Div Block, Flex and Grid — The ultimate combination and in my personal view the most important building elements/properties. Grid is a super powerful element that you should add to your skillset. Grid is like an invisible mesh that guards your content on the page and around the different viewports. The best resource here would be this University guide — https://university.webflow.com/courses/grid

Link Block (Basic) — This one does exactly what it says 😎 linking everything that's inside it either to a URL, page within a project, email, phone or by clicking you'll download an attachment. Link block is great for buttons or for linking whole blocks of content. Similar to what's visible on the image.

Typography — Heading, Paragraph, Text block, Text link all of these are another main building part of every project, they do exactly what they stand for. The important thing here to focus on is the Rich Text Element. This is a bit advanced element but it will come super handy when you're building blogs or any kind of dynamic pages with content filled in CMS.

Form Block (Forms) — Main elements from Forms folder and the only one really needed. The rest of the folder can be only added to Form Blocks. So always start with dragging Form Block and if you need more elements you know where to find them 🧐!

Webflow in Basic Hosting Plan or CMS Hosting Plan offers 500 or 1000/monthly form submissions which you’ll have within your Project Settings and can be easily exported as .csv. You can also tie your forms to service like Mailchimp to collect your newsletter subscriptions without any additional hustle.

Navbar (Components) — Another part of every common Webflow projects. Comes fully equipped with all the needed properties. For the first couple of months, I didn’t even know this element existed. So making everything custom was a bit of a nightmare. Navbar comes with 3 nav links within Nav Menu which are a folder that you then use on smaller devices to slide down clicking on the menu icon.

The menu icon (visible on default on Tablet and below) is also customizable, which is a challenge for most people — the trick here is: just select icon and hit delete and then place your special menu icon into the Menu Button wrapper. Since Navbar comes with a lot of pre-defined properties it might be slightly harder to approach it first — I’ll leave here a link to one of my tutorials where I’m actually making a custom responsive menu using the navbar component — https://www.youtube.com/watch?v=r8DGLv18MKU

(The rest is mostly optional, but these components can help you build some common website sections and I’d always recommend using them)

Tabs (Components) — Great for stuff like pricing for monthly or yearly payments or showing different features overviews.

Lightbox (Components) — To handle showing full-size previews of your portfolio pictures or details of your e-commerce products.

Slider (Components) — And good old slider. A component that can slide from images to any kind of div structures to be suitable for stuff like customer testimonials etc.

Collection list (Extra — CMS) — Collections are a way to pull your CMS content into your websites. It's a set of 3 wrappers each on a separate level. At first, you always need to select which CMS collection do you want to connect to be able to start working with its 1 item. In that way, you're styling one item and X of them are being styled at the same time. Think of it as symbols in Sketch or components in Figma.

Embed (Extra — Components) — And finally the last bit of the Elements panel — Embedded code. By dragging this element you’ll be greeted with a super simple code editor to insert any kind of custom code you’d like to add if you know how to write code or code you find on the forum for example.

You can try it: When I worked in Webflow we always used this little snippet in our projects to nicely display your fonts in the browser (credit to @callmejohnnie, ref: Usabilitypost.com)

😎 Bravo! You’re almost there, now you know all of the basics and where to find everything needed to actually start!

4. Kick-off Your First Project

Add fonts — In the default state you get access to a few fonts but in general, this is usually the first step of every project. You want to match your brand and be able to use fonts that you spent hours researching. So as you already know head over to the “W” logo — select Project Settings and Fonts. Webflow is pretty cool about this issue. At first, you get access straight from one dropdown to all Google fonts, good start — then if that’s still not enough you can obviously add all your .woff,.ttf or .otf font files and then match them to one typeface and its weights. So they then appear properly in the Designer for you.

Start with Styleguide — This is optional but I find it incredibly helpful. When I’m moving designs from Sketch/Figma to Webflow or at any point when I’m starting a new blank project. I always set up an additional page called Styleguide and set all of the default properties that comes with every project — All of the headings, links, list items etc.. This gives me the little power that whenever I drag some element into the project it will already be in the way I want it to be.

Here is a great example from the Webflow team with a nice explanation around how to style “All H1 Headings” etc.:

the-style-guide-template - Webflow

And from here it’s on you! 🎉

By now you should be able to start putting stuff together. Our imagination is limitless I’m not able to guide you further since I’m not able to know what are you dreaming of creating! But I have a few more places and tricks to help you way more dive in and explore the common structures and basically browse through or use the projects created by the heroes of the community.

But, if you are still feeling like this is too much? Or want to actually use something pre-build here is where to browse:

5. Smart Resources

Starter Templates — A nice way to start exploring ready-to-use Webflow sites and get into building simple pages. I actually developed these as well, so feel free to reach out, in case you have any questions.😌 On that note, there is a whole Template marketplace with a couple of free templates that you can also grab to explore.

Showcase — To see what is possible with Webflow you can explore what others build. Showcase is a place where other creators can display their work and sometimes some of them make that work available for cloning. In the Webflow language, this means you’re able to download their whole project or parts to your account for free. Just filter by clonable and grab stuff to explore. Press everything it doesn’t matter, you’re not breaking the live site 😉.

Btw: By pressing everything is somehow how I’m still trying to find why something doesn’t work and I worked at Webflow so no worries you got this! 👨‍💻

And that brings us to another powerful stuff 👇:

UI Kits — Once you browse the Showcase pages for a while you’ll definitely stumble upon a UI Kits. Webflow added the functionality to copy and paste between the projects in late 2018 and quite decent projects were created here by the community members. And since the projects are on Showcase — you know by now that they most likely are free to clone!

A UI Kit, in general, is a package of various sections usually prepared with only a few elements to keep it nice and consistent. They help you quickly without much of a hustle put your ideas out there, create wireframes or even a final website. As seen below:

So let's look at some of the best ones out there:

Legowerk by Dario Stefanutto — An incredible set of over 100 sections to within minutes create incredible already responsive wireframes for your ideas.

legowerk-wip - Webflow

Prospero UI Kit by Webflow — First official Webflow UI Kit with over 80 sections to help you create an incredible looking website for your eCommerce or any kind of business — featuring tons of nicely looking Hero sections as well!

prospero-ecommerce-ui-kit - Webflow

Cards 2.0 by Jan Losert — Framework/UI Kit with over 50 Sections/Cards with most of the commonly used layouts both in dark and white colours to truly gives you a set of components to create decent landing pages!

cards2 - Webflow

Avocado Webflow UI Kit by Flowbase — Set of nicely looking Content Cards, buttons, button interactions, navbars and site footer — ready to be grabbed at any point into any kind of web design.

avocado-webflow-ui-kit - Webflow

There are premium ones as well. These are obviously paid and you can get them via Webflow Template Marketplace — my two favourites are Ollie and Foray (by Medium Rare)

UI Kits are an awesome thing to start with to find your way around all the elements and to play around with something real. Don't forget that you can always only grab one section or even only one button. You don't have to use the whole package. Let's look at the final resources chapter!

6. Courses

Webflow itself provides an incredible list of video tutorials, but there are way more people creating Webflow related content, people recreating famous websites, creating free video courses and tutorials which you can take to learn more! Jumpstart with these places:

• Webflow 101 crash course | Webflow University
• Webflow Course - Creating a Clean & Simple Website with Webflow | Jan Losert - Store
• pixelgeek
• Jose Ocando
• Flux

One thing I still haven’t mentioned here — The community around Webflow and no-code, in general, is incredible, skilled, kind and always happy to jump in to help you with your ideas so don’t be shy.

7. Additional links

We are almost there. In this final part, we will take a look at where to seek help and how to find a way around the Webflow pricing model for designing and hosting!

Forum — a place to ask questions about any issue you’re having or just browse stuff other people solved before. There are plenty of nice little pieces of advice such as snippets of custom Javascript code to create more advanced things on your website. Webflow community is incredible and there is always somebody who will answer any of your questions.

How much for this? — Free first! — how to learn without paying

2 pages are always free — that’s enough for the homepage and one project template or about page. So explore and create everything you need before being 100% sure you’re ready to make a commitment. You also get free hosting via webflow.io domain so enough to really start and for example convince your client that Webflow is something that you’re going to use from now.

Pricing — Webflow’s most confusing part at the first look — but in general for getting pretty comfortable, creating a few sites or client projects you’re all good with Lite Account Plan ($16/month) and that’s all you need for creating — you’ll be able to create 10 projects which is enough for at least 1–2 years if you’re not a super speedy developer. This will also allow you to export code, which you can then host with your local provider if you want.

Hosting — Hosting with Webflow is simple and it is something I would recommend since from that moment your every change will be live with literally two clicks. You’ll in most of the common cases be fine with Basic ($12/m) or CMS ($16/m) plan — note here: this is per one project. So if you want to run 3 projects you’ll need 3 times hosting plan. Since I know how this might be a bit confusing I know this made it a bit clearer. (Note: Setup guide and how to connect domain)

The End

My final advice to you is as always — Just take on new projects and learn during the process of creating them! That has always been the best way for me to learn new things.

🙌 Thank you for reading all the way here! Let’s stay connected and learn together more by creating amazing designs and websites!

Final note: For more stuff about no-code and more advanced tutorials and webinars definitely explore Makerpad — Community for No-Code makers.

About a month ago I was invited to the first Dribbble meetup in Bratislava, Slovakia. Along with two fellow designers we spoke about leveraging social platforms in a way that we can benefit from them the most. From sharing our work, building a community, to getting new clients and much more. In my talk I shared my point of view on the topic of Life behind 15K on Dribbble & Instagram.

All Slides on Slideshare: https://www.slideshare.net/JanLosert/the-key-to-gaining-15k-followers-on-dribbble-instagram

A quick word about who I am. I’m self taught designer who’s goal when 17yo was to learn how to photomanipulate pictures of himself and the girls he liked. As you can see I didn’t stop there thought. When I was 19yo I took on a first full time gig in Czech analytics company called Socialbakers. I was pretty impressed at that time while I was still living with my parents. That all changed only a year after when a design job at Badoo came in and I moved all by myself to London. Year after that I met 3 guys working on a mobile ads platform called Tapdaq. Ever since then I’ve been working with them as the only designer in the company. Heads down in pixels with our dashboard, landing page or investor pitch deck. During that journey I shared my designs on Dribbble where you might have seen some of shots (Hint: They are all blue) or you might have used some of my digital product such as Dashboard UI Kit or Symbols & Styleguides.

Nowadays I’m passionate about occasionally sharing photos of my table and my designs on Instagram.

So far this has lead me to these 2 numbers.

But enough about me. 👏🏻 Slow clap for the longest intro to a Medium article. I chose this topic mainly because of the massive interest I’ve been receiving on Instagram regarding how to become a designer or gain followers.

It’s interesting to see how many people are studying e.g. computer science but they’re not happy and they would like to shift their path and be like me. Which I still find slightly crazy when I consider what my life really is all about.

But let’s go back to where it all began for a sec. When I started designing I thought the only thing you need is the “designer’s starter kit” = Facebook Fan page — “Your name — Designer”, Thunderbolt Display, Moleskine and Macbook. And then obviously buying tons of design/productivity books which you’ll never read.

To my surprise none of this really helped my career. And trust me I tried hard and bought all of those things. If you have some machine to work on that’s already enough (amen). You don’t need to have a degree or own a fancy Mac to get started. Fun fact: I was actually crafting all my designs on Windows for the first 3–4 years, we even had Win in Socialbakers. And it doesn’t matter if you’re using Photoshop or Sketch or XD or whatever Figma is. The most important is…

…To comment on everyone’s posts and invite them to check out your designs on Dribbble or Behance. No, but seriously.

The only thing you need to do to be a better, best or a superstar designer is to Work, Work & Work.

If you succeed you’ll be lead to the life you dreamed about which is actually going to look like this:

This image nicely illustrates the real days & nights of a designer. No matter if the guy in a black robe is a client, a side project or some ridiculous daily challenge.

And that’s basically it. The only whay how to get the keen numbers and be the best designer out there is to work. I’m so surprised by the amount of questions I get all the time about this topic. And even more by people’s expectations of what magic formula I’m gonna send them in my response. I’m not sure if they expect me to send them a link to a video how to become a dribbble superstar in 4 weeks or getting 150 work inquiries by posting 2 dribbble shots. That’s sadly not gonna happen to any of us. There are no shortcuts that I know about.

On the other hand what I do know about a few basic techniques which I trained over the years that help you become the searched and followed.

The first key is to be different. Design wise. And often as a person as well, because working your butt off (keeping it PG) will usually change you from a human being to a robot. But how? What do I mean by being different or the best?

This works for me and for all the other guys on dribbble/instagram who are well known for their major skill. This goes obviously hand in hand with them keeping their portfolio in shape and underlining what they are good at. Let me show you that on a couple of examples.

I’m usually known on Dribbble as the Dashboard guy.

If you take a look at Martin Strba’s profile you’ll quickly see that he’s the fancy gradient website/landing pages wizard.

Or if you come across the profile of Mike Creative Mints you’ll see that this guy is insane at everything. You’ll probably give up on each of your life expectations and move to the Marketing department next day. I still wonder what kind of creative mints is he taking :D

My point here is: Find your strong side and give it all your time. And work on it. Master it. I believe my life and my work is another great example of why that is so important.

2 years ago I knew I had enough of working only on client’s stuff. Not only we usually ended up with something which wasn’t exactly the best result I wanted to share. But also at that point I was already receiving most of the work inquiries for dashboard redesigns so I decided to create a package that will help me to easily shape client’s requests without remaking the same design fundamentals over again. Basically to make myself a little dashboard factory.

3 months later we (my GF helped a lot) released a UI Kit called Dashboard UI Kit.

We released this 67 screens package early in 2016 and I can really say that it changed my life. And not really by helping me to become the keen factory but by that fact that Dashboard UI Kit started living it’s own life. On this slide you can see a graph of revenue of my 5 products. What makes me happy is that even after 2 years I still receive emails about how my product helped some companies or individuals to quickly develop their MVP or how they over night designed their client’s projects.

At the moment of release there was nothing like it. No web app focused design resource and to this day there are only few packages focusing on dashboards (usually just a copycats of my designs). The point I’m trying to make is that just by releasing something that specific and focused on one design segment I was able to generate solid passive income and become known for my “strong side” skills.

So with all that said now you know that you need to identify your strengths. Let’s focus on the content and part 3 — Consistency.

Why do people visit your dribbble profile? Because they probably find your work on the popular page or via search. And if they like what they see at first they’ll probably want to see more. Which will lead them to browse through your work to see if your skillset matches their needs. So for example if they are looking to redesign their landing page they will be hungry to see how your approach this particular field.

And not surprisingly same goes for your followers. Producing similar styled designs and pics works. People want their feed filled with what they like and content similar to that in order to get inspired. This nicely works for us as a creators of that content. We don’t really have to overthink our pictures and shots. After some time you can easily tell what type of content works and what your audience is looking for.

Couple of examples:

Alexander Zaytsev who goes by the nickname @anwaltzzz and this slide is a nice showcase of consistency. The same design just slightly changed over and over again. (Showing how it looks on iPhone, Android, iPad, new iPhone, white iPhone, Rainbow iPhone…) Crazy right? He’s been doing that with the one design for over 4 years. 17000 followers, famous for dark UI.

The next example is the guy who started — for me still an unbelievable — Daily 100 UI Challenge on Dribbble. To be honest, I do hate the fact that someone spends 100 days just posting random stuff, such as a design of a keyboard for no clear reason, without any expectation, just likes. But it worked. He turned himself into rocket and went from 2K to 15K in those 100 days. Something that took me 7 years 😅 His followers were waiting for his new shot everyday and using that as inspiration to start creating their own conceptual keyboards or confirmation popups etc. Anyway…

The next example is from Instagram, where you can see thousands of profiles with consistent grid. This particular is one of my favourites. A couple that shares their amazing breakfast everyday. Always with a different type a cuisine but as you can see always the same consistent style of the picture. 770000 followers.

The following examples are the ones which I personally like, follow and read. Accounts that share their daily life struggles, wins and losses. By sharing pictures of their workspace or things they created they take you on a journey through their life progress. It’s almost like a daily pic reality show.

This brings us back to me. Last year I decided to delete all my travel photos and focus only on the design side of my life. I started a 150 days challenge. I promised myself to share what are my plans and do daily standups every single day on Instagram. I started growing a community around my account. The difference is really visible in the likes count between the day 1 and day 150. I grew my following from 2900 to 8700 followers in 150 days. I was also pretty much forced to work hard on my side projects & client stuff in order to be actually able to share something.

Even that we’re all learning and hearing everywhere how people don’t read websites and emails this is an example of the reality being different. People love to stalk others. To my surprise people actually do read my short Instagram posts. It started many conversations in DM, on email or in real life about topics I shared in some of posts. I was really surprised about the amount of people you can actually influence by just sharing stuff from your life.

Don’t forget to share your process as well. Frankly the process is usually much more interesting the the actual result. You can do it in the same way as I did. By writing small descriptions on Instagram posts, twitter tips or by sharing your whole journey. I was blown away when my article “26 Steps of Product & Dashboard Design” got over 2400 recommendations on Medium and was between TOP 100 most popular articles for more than a week. In the article I shared step by step how I go from a paper and pen to design or which plugin I use in Sketch. All of this can nicely connect your social presence. From posting your work results on dribbble, writing about the progress on Instagram and then sharing the whole journey on Medium. (And you can still connect other platforms such as Youtube, Twitch etc.)

So… Let’s get a quick recap. To get those 15000 followers, you only need to start sharing what you’re working on everyday, get a decent full time job, work on as many client jobs as you can, sell and create your own produ…

A then you’ll probably feel like this.

Even if you have a relatively big number next to your name all social networks and dribbble especially are still very tough. You can easily post a shot that will receive 30–40 likes even when you’re over 15000 followers. So the uncertainty is there regardless if you have 500 or 30000 followers.

Fun fact: Dribbble is an amazing tool for instant feedback (or we can call it user/bug testing/reporting). People just love to tell others what is broken where on which browser, so you can really easily get an instant report about all non functioning stuff.

As I mentioned first it’s all about the amount of work that you do. What makes you a good designer is the work that you put out there. In the end our lives are basically some kind of a weird SEO. It’s all about how many backlinks you can collect to your profile, name or products. Your work might be found through sites that you never heard of but someone shared it there for you.

Last thing: Obviously all of this is hard and if you’re at the beginning of your career it’s even harder. You’re probably not floating in client projects of your dreams. We’ve all been there and sometimes still are. So here are few tips for you to wrap this up.

Concepts still work. I still see them everyday on dribbble. But when you decide to create a conceptual work, think about it. Think about it the same way as you would think about your client gigs. Don’t just create yet another wikipedia homepage redesign. Try to really lay down a couple of pages (4–6) and think about different interactions on each of those pages. So when someone in the future asks, you can actually talk about your design decisions.

Don’t forget to share your stuff at the right time, on dribbble it is the morning time in Europe on Monday to Thursday. That way Europeans will see your shot during their morning commute or breakfast, Asia during the lunch break and after being in the game for already around 5–6 hours you’ll hit US people browsing in the morning. I haven’t done this differently since 2012. Instagram has a nice table/graph in their analytics so you can easily tell which days and times work the best.

And remember — we all started at a 0, I also had 100 followers at some point and was happy for 15 likes. Dribbble is an amazing platform which helped me to get all of my 4 full time jobs, promote my stuff and get me most of my clients in the past 6 years. There is a growing number of articles how Dribbble is broken and how hard it is to be on the Popular page. (Update: With the recently improved Onboarding flow based on picking a few of trending designers I slightly agree that dribbble is getting bit hard. The gap between people with 5K+ and those who’re starting is getting a bit wider. But not impossible to overcome.)

And as a goodbye… Work on client gigs and side projects that are moving you to next level and where you’re learning new techniques. I’m hearing more and more from people that are stuck in jobs where they can’t share anything due NDA or because the lack of sharable quality. Work and help clients where the client will be glad for a free promo on your networks. Because that’s the best quality proof you can give, by sharing the real stuff you’re proud of. Nobody would post projects where they didn’t like the results.

Have fun, thanks for reading and happy followers hunting 🙌🏻

I also read this article and share a bit more in my Instagram Live which you can re-watch on Youtube: https://www.youtube.com/watch?v=Bofl04sKcX0

Your passion: The key to gaining 15K+ followers on Dribbble & Instagram. was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

For the last four years I have continued to design dashboards and applications and I have learnt how to deal with different departments, and utilise their knowledge in order to make product designs both better and more efficient.

Today, I’m going to share all the steps I have learned and incorporated into my daily routine. These steps I believe have helped to make me a much better designer, and I want to share them with you.

1. Pre-Process

Get as much information as possible (Ask for three examples)

For me, nothing gives me more clarity than seeing a real working example. When I am working with a new client or on a brand new landing page for a product, I find as the easiest to ask the client to provide three or four inspirational pages, because this really helps both parties. Getting your client to put ideas onto the table gives you an opportunity to easily understand what they like, and what they expect from the finished design.

If you’re working with multiple teams you should aim to spend as much time with the developers on a product as you do with your designer colleagues. What I’ve learned while working on Tapdaq the key to making an effective design decision is to ensure you speak with the dev team as much as you can. In my case, there are always cases of a solution to a problem whereby I couldn’t come up with that solution by myself. I’d say the goal is to eliminate as many questions as possible before you move into development.

Learn About Personas

At first, I must say I was skeptical about personas, but now it all makes sense to me.

So in complete contrast to my older process, I can see how personas are super important while working on product features, especially when the solution has many different edge cases. It helps you to understand who are you really designing for. I aim to have around four to five personas. In the best way to have personas as an actual users, this can help you identify issues while chatting or walking through your solution with them on a call or in person.

Setup Exact Goals — What Exactly Should We Track?

I think most designers/clients ignore this step, but one of the most important aspects of design for both parties is to understand the goals of the product you are designing. We tend to jump straight into pixels and quickly flesh out the UI of the project. If it’s a brand new website, or a new feature, be sure to set clear goals of what you want to achieve.

Since everything is trackable, speak about the exact points you’re going to track. For example, these could range from new sign ups, to a number of customers using Paypal vs. purchases with credit cards. Always make sure you know how high you’re aiming for at the start!

P.S. — You’ll need this anyway for setting up funnels on Mixpanel later in this process.

Set up Project Folder and Start Collecting Moodboard

There are plenty of sites for inspiration — Dribbble, Behance, Pttrns, Pinterest etc. It’s really easy to find similar projects to the one you shall be working on. Additionally, there may be already a solution to a problem you’re experiencing and trying to solve.

When I start working on a new project, I always setup a folder with folders named — Source Files, Screens & Export, Inspiration & Resources. I save everything I find on the internet to Inspiration folder to be able to use it later to create basic moodboards. This folder could be filled with anything from plugins, swatches or even full case studies from Behance.

2. Going Low Fidelity

Whiteboard

If anyone can remember, I didn’t care much about the quality of wireframes in my previous article. The methods I use now are the following:

If we want to add a new feature or redesign a process we sit down and everybody at the meeting starts sketching ideas on a whiteboard, paper or even an iPad. This action allows us to put everyone on the team in the designer’s position. Later we end up with two design options to see which one works the best. We always try to go through the whole experience and discuss most of the edge cases during this part of the process. It is really crucial to address them now as opposed to during the design phase, or even worse, during the development part. That’s when you can lose a lot time and energy instead.

Map out all of your screens info (What data a user needs to input)

This is the time to go beyond the whiteboard and list out all of the user’s inputs and stories. Write down what exactly should a user insert into a particular screen and how can a user achieve the desired goals.

Write down all possible states

Because all dashboards, apps or websites’ forms have different states, this is another important step you shouldn’t forget.

While designing we need to be sure to address all of them. It’s nice to have shiny graphs and cool profile pictures in our Sketch files or PSDs. However, most likely, users will see the opposite side of your app. Especially when they come to your product. It’s necessary to be prepared. Below is an example of how we deal with empty states in one of our data components.

Prepare First Diagram

All of this leads to the final part of low fidelity. Thanks to the outcome result of the whiteboard task we now know all of the possible states, user’s inputs and goals. To sum up all interactions I create a diagram and to be honest I’ve changed the style of doing this many times: Going from Sketch files with rasterised layouts to just rectangles symbolising each page with their names below. That being said, the process was always painful, I usually end up in a situation where we want to change or add something later on in the process. With these solutions I’m usually forced to do many more steps; such as changing the positions of lines, arrows and images.

After all we ended up with using Camunda Modeler, which is a not exactly a design tool. It’s a simple app for creating technical diagrams. Which sounds odd, but this app is developed to help you build basic diagrams. Most importantly everything created is completely scalable. You can easily drag and drop any point and it will automatically create lines and arrows for you. You can also choose from different types of points which can be helpful, for example, for highlighting when a user receives an email from Intercom. Camunda allows exporting to SVG that makes it easy to colour trackable points in Sketch.

3. Work / Design

Moodboard

I’m able to start with the creation of moodboard, as I collect all images to my Inspiration folder. I use moodboards mainly to discuss my thoughts with colleagues and describe some of the visual ideas, before I start with the pixel process.

First Draft

Designing is always an ongoing process. You’re going to iterate a lot along your way to a great result. With first draft is also comes gathering of first feedback. You don’t have to come to pixel perfect design in order to start receiving feedback from your teammates, clients or potential users. To get their first thoughts and to start a discussion, I usually mix screens from our current designs. This allows us to start playing with real looking designs in less than a day. You can do a first simple prototype to test if things connect well together.

Write Your Copy (Tone)

Copy is one of the key aspects of users’ decisions and I take it as a crucial part of the design. I’m not a native speaker but I’m still capable to set the tone of the copy. There is nothing worse than a nice design with confusing dialogs where users are struggling to find the next step.

First Intern Test

With your first draft you can quickly create a prototype in Marvelapp or Invision. This is something that I started doing recently and it turns out it’s another amazing validating aspect. With a prototype you can now easily set up a call with 3 or 4 people from your team and share the prototype link with them and try to ask a few questions while test on them particular flows/scenarios. This way you can easily test your questioning skills and obviously test your design decisions on real users without worrying about wasted resources and time. I usually tend to choose people who are not that much involved in dashboard development. Also try to avoid watching someone who has already had a chance to play with the prototype before.

Etiquette

We all know how hard it is to stay tidy. How to deliver yet another feature. This usually leads to a messy Sketch or PSD files. I’ve learned a lot while designing the Dashboard UI Kit , especially about differences between working as a one-only designer in a startup, working in teams or working on my digital products. While I’m working in Tapdaq, I’m confident about the skills of my colleagues and even when I know I’m trying hard to keep files tidy, sometimes it’s impossible! However when you do work in a team, I think about my PSD’s like I’m creating them for someone else. I use the rule that if you have more than 8 layers in a folder, then you should create a new one.

I found one great plugin for Sketch, which saved me hours while I worked on my UI Kits. Rename — https://github.com/rodi01/RenameIt

You can still take a look at these old Etiquette guidelines (Anyway, most points work for any editor you’ll use.) — http://photoshopetiquette.com/

Tip — Put everything in canvas

I’ve always struggled with designing nice headers while I the rest of the canvas was white. While designing I learned to put all the content in place first — just play with the layout and typography. It’s much easier to design nice details and play with the whole concept with the content in place.

Create UI Elements and start playing with Lego

I’m probably late to the party and this will already sound outdated while I’m writing it. The reason why we haven’t done any wireframing on the journey here is simple. Sketch 39 comes with something that I have found incredible and that is “shapes with resizing properties”. It forced me to finally recreate all 50+ Tapdaq screens. This is something that makes designing easy for everyone on the team. Our Sketch file is pure drag-and-drop now. You can easily give any of your teammates a blank canvas and they can create almost hi-fidelity drafts. Thanks to this we are able to skip all wireframing tools and start with almost real looking pixels.

This also goes hand in hand with us being able to actually convert wireframes to real designs. Any PM can create wireframe and then I can easily take it over and transform to hi-fidelity.

4. Assets & Delivery

When you’re done with designing and iterating based on first feedback you’re not done yet. Now comes the time to hand your designs over to your engineers/devs.

Specifications

One my main aims is to always be able to communicate my decisions with the team and be able to reduce difficulty for our developers as much as I can in order to provide them with the best possible resources. That for me is definitely the most important part of my job as a designer.

Since we documented all the interaction and have everything ready from the beginning of our process, creating specs is a piece of cake. I tend to write specs in Google Docs or below the screens in Sketch files. It’s nice to handle your designs with explanations of all features so anybody can grab your file in the future.

Diagram

We used to do this technique while I’ve worked in Badoo for presentations with the team and stakeholders. This technique is nice for printing out designs and discussing them with the team. But nowadays I think there are better options. Such as having ready the final prototype.

Final Prototype

One of the key thing for me is to always have all interaction ready in prototype. I’m usually ending up having 3–5 prototypes on the way to the final one for those little session with teammates or to show some particular flows. I tend to prepare all states in Sketch in one artboard and then duplicate those artboards to have every state ready when exporting.
Like said before, you can either use Marvelapp or Invision. It’s great to add comments to parts of your designs to expand your specification much more so that even copywriter can easily go and check in real pixels and flows if every copy and dialog works as required.

Quicktime Video > Notes

When I’m not presenting stuff on Hangout to the team or a client I’m sending a screenshare video of me going through the prototype and explaining everything what I’ve designed. It’s a nice confirmation for me before any presentation that I know the answer on any question and possible fancy interactions I’ve decided to design. Could be also nicely used when working in remotely based teams. Everyone has access to replay the whole interaction thinking at anytime.

Animate

A nice final touch of your design you can use After Effects or Principle. It’s good to explain how do you want this and that to move or hover.

Styleguide

Another crucial point for engineers is to know how things will react in different scenarios. Think about error state of input or where to show error message. Same as how disabled state of submit button will look like, where to put spinner in input etc. It’s super easy for engineers go just through your Symbols artboard and style one by one element before they even start coding all screens thanks to having a Sketch file as Lego blocks. Styleguide and visual overview of all elements is actually one of the most requested features/designs for the next update of my Dashboard UI Kit.

5. Final & Test

Since we are done with handing over our designs to engineers we are able to focus on the last part of the process — Tests of our decisions!

Inspectlet / HotJar

After the designs are turned into working code don’t forget to include your Inspectlet or HotJar JS snippets. I’m always excited (or frustrated) to see how users navigate through our dashboard or what are they doing on my portfolio page. Inspectlet is amazing in capturing all of your user session. Works great for bigger projects as well. It comes with easy “/page” filtering which helps you watch session of a particular feature or flow. We use Inspectlet in Tapdaq. For my personal portfolio I use HotJar’s free features to generate heatmaps and record at least a few users browsing my portfolio.

Mixpanel

Mixpanel works great for validating our goals (those which we setup at the very beginning of our process). Mixpanel helps to see how many users complete particular flows. How many users dropped before setting up the account. How many people went from main landing page to store and to our most valuable product.

Google Analytics

I’m not capable of coding big things, but at least I’m able to work with CSS files and with simple code. Lately I was interested to see where users click and while looking at Hotjar heatmaps I’ve decided to setup basic click tracker in Google Analytics as well. You can easily track every of user’s clicks on your website as well. Here is sample code for tracking clicks — http://pastebin.com/tdmFZN2k

```

**1. Paste script to your code**

<script>
function track(name,label){
ga(‘send’, ‘event’, name, ‘click’, label, {
hitCallback: function(){
console.log(‘Event sent to Google Analytics’);
}
});
}
</script>

**2. Add onclick to your links**

<a href=“link” onclick=”track(‘Click-Name’,’Click-Label’)”>Link</a>

```

As you can see I’m tracking every button, every link and I always attach different label to each of these anchor points. This helps me to easily map out user’s behavior. For example, I found out that people used top navigation 5x more over the highlighted link in intro text. Feel free to code this snippet to your website as well.

P.S. It doesn’t sadly count clicks from users with AdBlock.
Thanks @snapeuh for big help setting up this.

Intercom

When we agreed on our initial flows we were talking about part of the flows where user receives an email from Intercom. Our responsibility here is to ensure that all copy and the message itself makes sense and is actually helpful for the visitor. Be sure that your emails are guiding your user to your keen result and always try to provide specific support articles and info how to continue in the flow.

6. After Design / How do I manage my work

Goals

For the last part of the journey I’m setting up for myself one month sprints divided into work/Tapdaq related goals, personal project goals and life goals. I’m still using Things by Cultured Code to split down those projects into small tasks which are easy to sign off. I used to work on 5 different projects at the same time and always ended up frustrated by not being able to push anything over the finish line. Nowadays I’m aiming to release at least one thing each month. That “thing” could be anything from 2 new subpages on my portfolio, a new product or a client’s new landing page. Just to keep myself going and stay happy with finishing stuff.

Workspace

I’m already using sketch for most of my designs, but I’ve got a lot of people on Instagram asking for my Photoshop workspace, so here you go! http://janlosert.com/assets/workspace.zip

7. The last few words

This was an overview of all the steps I’m taking to deliver my designs, I’m obviously not following the same routine all the time, but this gives you an idea of how I do work.

Leave dribbble behind

From what I’ve learned and how my designs have changed over past 4 years, I’ve got to the point where Dribbble is the best way for us designers to attract new clients and show off our work. But it’s not necessarily the place you want to create your designs for. I’ve always aimed to have nice pixels with sexy profile pictures, but that’s not what real users need and will use. This is one example from Tapdaq, something what I’ve designed with thinking of nice shot for Instagram and Dribbble and this is how the current screen looks after I’ve spend hours of watching people editing their profiles and after I’ve realized what info they actually request and need.

You may receive 500 likes for bright crazy animation of a potato or sliding pizza but what’s really important is that your users will find how to manage frequency of company emails or how to filter their performance analytics.

Future

My next mission is most importantly to dive more into UX and research. To be able to share in my next article an overview of the UX tools I use for A/B testing and for gathering data. I’m still quite new to UX and I haven’t had many opportunities to learn in previous jobs. But currently I’m passionate about tracking and watching every user’s move on every new project I’m working on.

The End

I’d be happy to hear about your work process, which steps you usually take in your personal projects or how your process is different while working in teams. I love to see other people’s workspaces. And most importantly feel free to share your thoughts about all/additional steps in my process.

I’m posting more from Tapdaq and my personal projects on Dribbble.
and I’ll be happy to hear your thoughts on Twitter.

26 Steps of Product & Dashboard Design was originally published in Design + Sketch on Medium, where people are continuing the conversation by highlighting and responding to this story.

We have a brand new device which will need our design care very soon – Apple Watch. I decided to take a break from work and try something totally new, which lead me to this project to visualise how our favourite apps could look like on Apple Watch and give every pixel free for download. Apart from the promotion for my design skills, I’ve learned a lot about delivering a new experience. So, without further ado, let’s get started!

It’s also good to say that nothing about Apple Watch is confirmed. Not even the display resolution.

First Problem

This device is REALLY small. A 1.5-inch screen is too small for all those fancy elements we use in designing for bigger screens. This means that you have to remove everything and keep only the most important parts.

But how do you deliver a nice experience?

Focus only on the core feature. User Experience HAS TO be just a few clicks/touches, because users will always have their iPhones in their pockets and use it for anything more complex. One piece of information per screen is key to making a great user experience on Apple Watch. For me, this device will be a totally straight forward user experience which will use only swipes. The key feature on this device will definitely be nice animations.

Take a look at, for example, how Cuberto prepared UX+UI for a pizza ordering process.

This is exactly what should be stunning on this small device. A lot can be done with images because you don’t have enough space to fit more than a few words.

Ideal apps

A good use case would be to check notifications, new likes, etc. quickly without having to use my iPhone to check how big a response I got to my last tweet or status.

The most useful will be on demand apps such as Uber, where you could summon a driver with just a tap. Or imagine heading to your favorite McDonalds or Starbucks and quickly ordering the same as you had yesterday and automatically paying for it. Your order could be ready right after you arrive.

Reminders and Alarms should also be nice. Now we are bringing in the concept of focusing on just one thing at a time. Imagine that with every glance at your watch it would say: “You need to call your mom!” or “Buy her a ring!”. Basically focus on easy and quick UX. Quickly say “Send a message to Carl: I’m late.” and it’s sent.

I like the idea of sending drawn pictures. But not from watches. The viewport is so small, that you can’t even fit 3 buttons in a row. How am I supposed to draw on it? And why? I think most of our friends will be sending us just one drawing (if you know what I mean).

Not ideal apps

Personally, I don’t see the point of checking my bank account on Apple Watch. I want to see quick information like my pulse, time, notifications from social networks, missed calls etc. I see Watches just like a bridge for small interactions before I’ll take iPhone out of my pocket. The same is true with big apps. Maybe just because of lack of real information on how it could work, but I’m still quite sceptical of reading my twitter feed or Facebook timeline on Apple Watch. I don’t really see why I wouldn’t just pick up my phone and read 7 tweets per screen, instead of reading one – which will be also incredibly small.

Basically, everything with more than 3 screens per result sounds complicated.

Design – Let’s look at some pixels

I was facing the question: How will current apps be able to adapt to Apple Watch? I took this question seriously and tried to find an experience which users can get. I’ve spent a lot of time thinking about adapting some of my favorite apps for Apple Watch. All of these concepts are done for discussion. Most of them even follow the rules I mentioned before.

It’s hard to design for something you haven’t tried. For one, there’s no Skala Preview. I used split screen with smart objects to see the results as they would appear on the device. I also used an edited template by Francesco Scalambrino. I’ve changed the watch background smart object to an actual watch preview gradient to achieve a higher quality result. You can take my PSD here: Edited Template

Let’s take a closer look at 3 of those concepts:

Yahoo News

One of the award winning apps from the Yahoo Design team, Yahoo News should be pretty cool on Apple Watch. After launch, you’ll have a list of news and with just a tap you’ll be able to listen to the news story. With just a swipe, you’ll hear what the news is about (headline). Apple Watch will be always ready to tell you the news – for example from business or science. It will be also nice if all articles were read by a Yahoo speaker, not just a robotic voice.

Shazam

This is basically my total favorite, and I’m really excited to see what the Shazam design team will bring to Apple Watch. This is exactly one of those ‘On Demand apps’ which I mentioned before. Do you hear a nice tune? You don’t need to search for your phone, just touch your Apple Watch and wait. That’s it. The UX is just open app -> wait (watch epic animation, based on the tune you hear) -> result. That’s it.

Skype

I cut out all the premium features and kept only the reading of messages, voice answers and calls. I can imagine that I receive a notification – “Hi Jan, we were supposed to call. Ping me” – and with just a click on answer, then hold chat with this person to reach an action dialog and choose to call them. Or quickly say with voice answer, “Sorry mate, I’ll be ready in an hour”.

Obviously, there are so many questions which need answers. For example, with voice answers. I know how I feel when I’m talking to Siri on the street. Strange. And now I’ll need to speak to my wrist? I’ll feel like an action hero from my favourite cartoon movies.

What is funny is how Apple currently deal with long names. If you take a look at their promo screens all names in the address book are just 4 characters long. Sweet.

These screens were announced during Apple Keynote in September 2014. You can see how Twitter deals with a single tweet design on Apple Watch.

Conclusion

That’s it. These are the thoughts I have after spending a week designing for Apple Watch. I personally enjoyed the challenge, but I’m still not sure if I like this product. I can’t imagine myself talking to my wrist. I’m reminded of a question my friends had after iPad was released – How will we call from an iPad?

I think that it is just a matter of time until developers from all around the world will show us their thoughts and apps which will change our lives again. I’m quite ready for that reality.

Do you agree or disagree?

The Apple Watch is expected to be available in early 2015, with prices starting at $349. Apple plans to release the WatchKit SDK, required for making Apple Watch Apps, to developers in November 2014. Will you be buying one?

I’ll be really happy to hear your thoughts.

Ping me on my twitter @janlosert

P.S. I’m still looking forward to day when will have something like this: (Ubisoft: The Division)

I’ve review my current design process in October 2016 and decided to write new piece about my design thinking. I shared it on Medium as well, just follow this link to read about the new process and design tips — https://medium.com/sketch-app-sources/26-steps-of-product-dashboard-design-c97af84c4146

After my dribbble post with picture of a Diagram with very positive feedback and lot of questions, I was motivated to create this article about my process and what I’ve learned after 2 years of this journey.

It’s a bit hard to say that I’m always using this same process, but you can read it similar to an ideal process. I’ve divided this process into 4 parts — Pre-process, Work process, Post-process and tips for Productivity.

Pre-Process

1. I’m drawing

It doesn’t matter if it’s paper, a notebook or just a small piece of something. I need to share the ideas in my head. I need to put these ideas down where they can be saved and not forgotten. Consequently this means that I have some sketches on my bank statements, bills from restaurants, book covers etc.

However, for me it is ideal to have something tangible, for example, on Moleskine. It’s always nice to go through these lists from time to time, look at my old ideas and try to reinvent or recreate something for this particular project or different idea.

2. Collecting Pictures

Another pre-process phase is the collecting of pictures, I do this everyday. There is definitely hundreds of styles on how to collect and view these images, however I particularly prefer old school style — Dropbox folder separate to different categories (Dashboards, iOS, Illustrations etc.). Then, when I receive an inquiry or project, I’m going through these images and I’m trying to find inspiration. Dropbox is pre-caching low quality previews of files so you’re able to list them without an internet connection.

3. Moodboard and Preparation

We have plenty of sites for inspiration — Dribbble, Behance, Pttrns, Pinterest etc. and it’s really easy to find similar projects like the one you have. Additionally, it could be a solution for a problem that you’re experiencing and you’re trying to solve.

So when I begin working on a new project, I always prepare a folder with — PSD, Screens, Inspiration and Resources folders. I’m saving everything to the Inspiration folder that I find on the internet and is related to this project.

It should be everything from swatches to full case studies from Behance. Yet it also could be pictures of attractive people if the app has users’ profiles. It sometimes happens that I don’t even use that folder but that’s different story!

Work Process

4. I don’t care about wireframes quality.

I’m not a big fan of spending half a year on wireframes. I also prefer it if a client has prepared wireframes.

A good client is one who has prepared his ideas on paper.

I’m taking wireframes as just more about understanding the purpose and not the actual final result. The final result matters about you and your UI / UX skills and ideas which you want to present. Wireframes can help with the imagination of how many screens you’ll need and what’s the client’s idea.

On another page of the wireframes is a nightmare for the designer in which someone wants just the replication of prepared wireframes and to use the right details from the wireframes. That’s monkey’s job not the designer’s. In this case, every designer would just quickly finish that job and run away from the project like Usain Bolt.

5. PSD — Big Canvas (back to the Illustrator)

When I started 7 months ago at Badoo, I saw how my colleague works (Hi Sasha!), I thought that he didn’t understand how Photoshop works. However, now I’m trying to get into this technique, and in fact this style make sense to me. It’s good to use this style when you’re working on something really big, for example, a web application or a rich dashboard.

Basically, I work with a big canvas for example 8000*5000 pixels. Furthermore, my work isn’t more than just creating one big UI kit. The work is much faster because you see every element together and I can easily see what’s happening in every state. Additionally, it is much quicker to make a screenshot for developers with a small flow or just one states for one thing.

6. All screens in one PSD

In another case, which is not that revolutionary or different. If I’m working on a mobile app I’m working in different extremes. That means — All screens are in one PSD.

I know in this case it will be better to use Sketch, which could be really helpful with work. But I prefer one instead of 40 because it’s hugely quicker, I can easily pick one element from a different screen and copy that to another folder/screen. So that means if I change the background or a few icons on the top bar, I don’t need to change hundreds of other PSD’s.

7. Folders and Etiquette

I’m a tidy person in every respect — I have one icon on my desktop, folders per clients, per projects. Every folder is structured in the same way as I mentioned before. The same as in PSD. Every of my PSD’s is nicely structured in every folder. I use the rule that if you have more than 8 layers in folder then you should create a new folder. I think about my PSD’s like I’m preparing them for someone else. I’m not a big fan of naming layers because you can easily go through my folders.

But lately I’ve started working with @LukášKus and he always complains that he doesn’t have these folders in AE. Therefore, a particular situation always matters.

If you would like to know anything else about PSD Etiquette you can look at this — http://photoshopetiquette.com/

8. Communication with friends

A network of people who can provide you with relevant feedback is something critical for me. I can easily do mini user testings and listen to what people think about these specific problems This usually opens the doors to other solutions and other points of view for these problems. I do these calls/tests as much as I can in every state of my project or screen. Moreover, it doesn’t matter who you are testing. It could be anyone, I prefer to combine two segments — people from the community, the UX designers and normal regular users. This is because you’re usually working on project for regular users not for designers and UX principals.

9. Diagram

After my client or I prepare wireframes, I prefer to take them and merge them in one PSD. Then I try to think about interactions, what happens when I click here or there. Usually, we find a lot of missing screens and additional errors which clients or I don’t realise, when I was thinking about just one particular screen when I was preparing wireframes. For me, it’s this pre-prototype phase which I don’t consider a double job. It’s actually also a visual overview of all the screens and the elements. When I’m working on 15+ screens project it’s hard to keep the same visual style across the whole app and I can easily break the guidelines.

About style — I use the same style similar to a lot of designers, however instead of spending a lot of time with creating these lines across whole canvas, I use circles with the numbers of the next screen. It’s a little bit like gamebooks which I was reading back in the days, but it’s a better solution than creating of printed circuit boards. You can see more states on the picture.

I add a link for the Diagram PSD for a better understanding these diagrams (The iPhone render is done by GraphicBurger)

Post Process — Guidelines

And we are finally close to end of the process, the last part is the creation of the guidelines and the final check for visual consistency. It turns out for me like such an important part of the process for small and also for big projects. Usually, when I work on a big project I want to change something in this part of process and I’m never a 100% sure that I’ve changed every of these properties. I use these for myself and also for developers to be sure that they won’t use 50 shades of grey or 14 different sizes of fonts.

10. Colour Specs

The specification of colours is one of the first thing which I try to keep in mind. It’s really nice in these flat design age to keep as few colours as possible for the buttons and for text. It’s nice to prepare this in your PSD like a painter’s palette or like swatches in Photoshop, which is basically the same.

11. Typo Specification

One other thing which can remind you of the logo specification is the guide for text sizes and the weight of fonts across the application. Again, it’s good for developers, but also for your overview.

12. UI Kits

The UI kit is a really important thing if we are talking about consistency across company apps and websites. It’s also important when you’re working in team of designers or you have more front-end developers who work on that project. I can use a UI kit in way that I’m always taking these elements from UI Kits. Also the developers can easily see how this button will look on hover and they don’t need to ask about everything.

Note: I’ve realised that in big companies, it is a big problem that nobody has heard about these things and teams basically re-create these same CSS lines again and again. Then you realised that you have 3 different interpretations of one button in 3 different applications. So you can’t forget about consistency.

Productivity

13. Todo

My key aspect of tidiness is working with todo lists. It doesn’t matter what type of app or paper you use. I prefer Things by Cultured Code and sometimes piece of the paper. That feeling of completing lists is always great. I was possessed with accepting every project which ends up in my email inbox, but now I’ve realised that it is much too comfortable to focus on 1-2 projects and 100% focus just on these 2 projects and then go to another one instead of fighting with 5 different ones.

“If you chase two rabbits, you will not catch either one.” — Russian Proverb

14. Goals

It’s really nice to know what you want to achieve, but also don’t be too bound to them. I make goals for 14 days (like a sprint) and quarterly goals. Also, I try to set these goals in way that I can achieve some new experiences (for example: make my first animation in After Effects) and also keep working on current things (finish 2 Behance case studies).

And what else?

I don’t use a mouse, just a tablet, I don’t have Tools panel I have learned all keyboard shortcuts. For streaming Photoshop to iPhone I use Skala Preview and I want to learn After Effects and Sketch. For prototyping, I use InVision App for web projects and the newly MarvelApp for iOS designs. It’s quicker for me to work with a pen instead of dragging and swiping on the iPhone screen. I sometimes still work with PopApp for some early prototypes, when I have time on the Tube for clicking and dragging on Screen.

The last few words

It’s really hard to say that I will always complete and follow the exact process for each project, because I sometimes skip some steps or I start in Photoshop if I see that the design in my mind and I have an exact idea about that.

In companies where I have worked, I’m still not experiencing real feedback, user testing and these things where designers can profit and take and experience them for thinking about new projects or updates for the current one. Especially User Testings, these change the thinking about all the things and show us that regular users usually work in completely different ways than we expect.

The End

I’d be happy to hear about your work processes, which steps you usually take in your personal projects or your thoughts about additional steps in my process.

More about me on dribbble
and I’ll be happy to hear from you on twitter

I’ve review my current design process in October 2016 and decided to write new piece about my design thinking. I shared it on Medium as well, just follow this link to read about the new process and design tips — https://medium.com/sketch-app-sources/26-steps-of-product-dashboard-design-c97af84c4146

Thanks @dashgopinath for advices about structure of this article!