The end goal is to eventually be able to implement your own designs for iOS. Just like learning CSS for the Web, this will immensely help developers overcome their struggle with UI work and push the collaborative work between designers and developers. Design is how it works, Steve Jobs said. Designing static images is not enough, you need to bring them to life.

Get Xcode

Head to the App Store and download Xcode.

Start A New Project

• 1) Open Xcode, then “Create a new Xcode Project”.
• 2) Select “Single View Application”.
• 3) Set up project name and company name.

Setup Up App

• 1) Only enable Portrait orientation.
• 2) Drag and drop your app icons.
• 3) Drag and drop your launch images. It’s the image that shows up when your app first loads.

The Xcode UI

The user interface is overwhelming at first, so let’s focus on the crucial parts that apply to Storyboard.

Add Images

Have your App screens ready without the status bar. To add them, create a “Group”, then “Add Files To…”. You can also drag and drop images to that folder.

Make sure you have “Copy items into destination group’s folder” and “Add to targets” enabled.

First Screen

Now that we have the basic setup done and the images added, we can finally start Storyboarding. Go to Storyboard and drag and drop a Button from the Object library.

Why a button? Because it allows you to link to a second screen. It acts as a clickable image. Resize the button to fit the entire dimension of the screen.

When you select the button, you should see properties appearing in the Attributes inspector. The properties we’re interested in are Type, Title and Image. Set Type to Custom, Title to nothing and Image to your first screen (type the name of your image and it will autocomplete).

Second Screen

Screens are called “Controllers” in Xcode. To create a second screen, simply drag and drop a View Controller, then repeat the previous step.

Connecting Screens

Xcode connects screens by a link they call “segue”. To create a segue, hold the “Control” key on your keyboard with your mouse pointer on the first screen and drag and drop on the second screen. Select “modal”. This will create a transition that slides the second screen from the bottom.

You can customize the transition by clicking on the segue (circle symbol between the two screens) and set the Transition to Cover Vertical, Flip Horizontal, Cross Dissolve or Partial Curl. Or, you can uncheck “Animate” if you don’t want any animation.

The Push Segue

The Push segue doesn’t work without a Navigation Controller. To create one, select the first screen’s View Controller and go to Editor > Embed In > Navigation Controller. A header bar will appear on every screen connected.

To remove that bar, select the Navigation Controller, then set the Top Bar property to None.

Now, you can use the Push segue and it will do a horizontal sliding transition.

Testing Your App

Xcode comes with an iOS Simulator that allows you to preview your App. To do that, select iPhone 6.1 Simulator and click on the Run button in the far top left. An iPhone will appear and you will be able to interact with the App you’ve just built.

Clicking on the first screen will lead to the second screen. It’s not much, but it’s a major step in understanding how Storyboard works.

• Download Prototype 1.0. It’s what we have so far.

Header And Content

This is where it gets a lot more interactive. Inside a View Controller, you can have all kinds of Objects from the Object Library. A typical screen has a sticky header, multiple buttons and a scrollable content.

First, you must separate your header and content assets in Photoshop or Sketch. Let’s remove the button we created earlier and drag in an Image Object for the header. In Attributes, set the image name. For the dimensions, go to the Size tab and set the height according to your header image.

Note that Xcode uses pt and not px units (1pt = 2px). Make sure that you use pair numbers in your assets.

On top of the header, you can drag in Button and Label objects.

Scrollable Content

To create a scrollable content, drag in a Table View and set the dimension to fill the rest of the screen. Inside that Table view, drag in a button and set the size according to your image’s dimension. From that button, you can create a segue to the second screen. Make sure that you have the button selected when you do the hold Ctrl + drag and drop trick.

You will need to make sure that the Table View layer has less priority than the header. Xcode works in reverse order where the layers below take priority.

The Back Button

I’m including this function because it’s really useful. I will explain it more in a future tutorial, but for now, create a Group and drag and drop these Objective-C category files. Make sure to check “Add to Targets” during import.

Once imported, you should be able to link your back button to the Exit green icon and an option called backButton will appear. Click on it.

Views and Objects

Here’s a schema of how Views and Objects can be structured:

Once you understand how Views and Objects work, you will be able to customize your Controllers the way you want.

Previewing On Your Phone

Xcode allows you to preview your App on your iPhone. Unfortunately, it’s a complicated process and requires an iOS developer account. Once you have an account, you must follow their instructions on how to create a Certificate and a Provisioning Profile on your Mac so that your device has permission to install the App.

Download The Template

This template should help you get started:

• Download Prototype 1.1

Simply replace the images with your own, tweak the Inspector settings, add new View Controllers and connect them using segues.

Resources

Just like in Sketch, experimenting with other people’s Xcode projects is crucial part to learning. Here are some resources you may find useful:

• Cocoa Controls – You’ll find great open source controls to play with.
• Search on Github for Xcode projects.
• More to come…

Final Thought

As a designer, I would never have thought that I’d be writing a tutorial about Xcode. It’s traditionally an application that appeals to developers as the barrier to entry is huge because of its complex UI and Objective-C knowledge requirement. But since Xcode 4, the addition of Storyboard allows designers to overcome their fear of writing codes and directly use an intuitive interface to produce meaningful interactions.

This tutorial wouldn’t have been possible without the help of Max Tagher, our iOS developer at Heyzap who helped me through countless road blocks. If you have someone knowledgeable about iOS development, I suggest that you start getting friendly with that person and ask for help whenever you run into a problem.

This is the first tutorial of a series. In the next tutorial, I will include custom fonts, more complex flows, animations and sounds. Finding good Xcode resources is a massive endeavor, so if you have any, please do share.

• Download the .sketch file

Experimenting With Colors

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

• Dribbble has a nice color browsing tool to find similar designs of the same colors.

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

• Download the .sketch file

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

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

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

1- Gradients should be subtle.

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

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

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

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

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

Experimenting With Concepts

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

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

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

The Fear Of Mistakes

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

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

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

• Download the .sketch file

Hiding Navigation Menus

The best user experience reduces the amount of clicks to as few as possible. It makes sense to have a Menu icon on mobile because of the lack of screen real estate, but for desktop and tablets, that is not the case. A good navigation keeps the menu simple – you should typically have 3 items or fewer alongside the logo. Those items should be frequently used.

Hiding a navigation menu not only adds an extra click but also takes up one of the 3 important menu items. It’s a compromise. For the Web, this menu concept should be treated as a drop down menu and should be used only for secondary options. By making things visible, you increase the chance that your users will see and use your menus. Hide to solve clutter, but only if there is clutter.

• Windows 8 hides their Charms menu, effectively making their UI less cluttered. But it’s not readily obvious that there is a menu. Also, they made the power options, which are fairly important, 3 clicks away (Charms > Settings > Power > Restart).

• There is an interesting debate about Squarespace‘s decision to use a “hamburger” menu for their main navigation. While it’s likely intentional to let users focus on the content, it makes me doubt on the actual usage of that menu, especially for non-savvy people.

Flat UI

A flat user interface simplifies the visual richness, but can compromise the clarity of important design elements such as buttons. It also doesn’t rely on real life metaphors that people are familiar with. While those metaphors can be of bad taste and quite distracting (see Find My Friends), there are also good metaphors such as physics, animations, sounds and gestures.

The simplest metaphor of all is of course the button. There are buttons everywhere, from the door bell to your phone’s home button. Buttons should be designed in a way that it stands out, whether you apply gradients or flat colors.

• Without a shadow, a gradient and rounded corners, buttons can be mistaken as banners or titles. Flat UI also typically relies on more colors to structure the design.

Regardless of the style you are going for, make sure that you design with clarity. If you’re going flat, you must have a solid understanding of colors and contrast. If you’re going realistic, practice your gradients and shadows. Design is how it works, therefore make it obvious and functional.

• When you open the shop section in Path, you get a nice ring sound reminiscent of an ice cream shop. As you tilt your phone, the stickers follow the direction. It’s beautiful. Making the shopping experience heartwarming may seem unnecessary on the surface, but if you stop and think for a minute, it is actually solving a problem. That problem is that users, especially in a social network context are put off by the idea of e-commerce. So, by emotionally connecting with the user, Path manages to not only make it acceptable, but also delights its users with a fun and nostalgic experience.

No Interface

Simplifying an interface to a point of having no interface can be rewarding, but can come with a cost. There are False Positives and that is the danger of No Interface. Think for example of Google Now, which serves you information by guessing who you are. It is a great concept in theory, but when the guesses are wrong, it can be very frustrating. Siri is another example. How many times have you been disappointed by how well Siri understands you? Accuracy plays a big role in earning the user’s trust.

Good design is honest, and with honesty comes trust. When you see a button, you know exactly how it’s going to behave. There is delight in using a beautiful interface.

• By using a natural language, Fantastical can guess at a 100% accuracy the event you want to add to your calendar. Please note that we’re still using an interface here (keyboard) and that the same wouldn’t be true by using your voice. Our technology is not there yet.

This is not to say that No Interface will never happen. When technology can guess at a 100% accuracy, it will happen. In fact, as designers, we should always aim for As Little Design As Possible. But rules are meant to be broken, and while following one particular design principle, you must not compromise other principles such as honesty and clarity. Sometimes, you have to make the hard decision to prioritize.

Smart Guides and Dimensions

Smart guides are my favorite thing. Layers and Folders would snap and align beautifully to edges. Sketch made this feature even better by allowing you to see all the spacing and guides when you select a layer and hold Alt while moving your cursor to different areas. Like this, you can quickly see all the spacing between each design element. It’s a tool that normally needed xScope, but it’s completely built-in in Sketch.

Round to Nearest Pixel Edge

In my previous blog posts, I have been a strong advocate for rounding fractional numbers for Pixel Perfection results. Well, Dominik showed me this neat feature in Sketch that specifically helps you round the x and y positions. While selecting a layer that’s positioned in fractional numbers, you can go Edit / Round to Nearest Pixel Edge. I use this so frequently that I added to my Mac’s Keyboard Shortcuts.

Set Style as Default

One of my biggest complaints about any design application is how the default properties always need editing. In Photoshop, the default drop shadow and global angle are never ideal. In Sketch, you also have this default color and grey border that comes with every shape you create.

Thankfully, you can set a different default style. To do this, simply create that layer with the perfect style and go to Edit / Set Style As Default.

Add Slice For Selection

This is a feature very similar to New Layer Based Slice in Photoshop except you can select multiple layers and create slices based on their dimensions. Combined with Sketch’s powerful export options, this truly is an excellent tool to quickly create and export assets. I also added this option to my Keyboard Shortcuts.

Masking and Alpha Masking

Sketch has a very unique way to mask layers. Any layer can serve as a mask for all the same-level layers, folders and sub-folders. This is very powerful, so keep an eye on what you’re masking because you will be scratching your head as to why some elements are hidden. You must isolate masks in their own folders. Once you get comfortable, you may find it more efficient than adding a Layer Mask in Photoshop since you can easily edit the layer that’s masking.

Oh and you can also use an Alpha Mask. It’s tricky:

1) Create new rectangle layer.

2) Go to Edit / Use As Mask.

3) Go to Edit / Mask Mode / Alpha Mask.

4) On the layer’s Inspector, go to Fill, set Gradient and edit the alpha.

Download the .sketch file to see an example (Thanks to Sam | Sneek for his Wireframe):

Text on Path

I personally haven’t used this much, but I was impressed at how it worked. By simply creating a path or any shape and setting the subsequent text layer to Edit / Text on Path, the text will magically follow the shape of the path. It’s a bit tricky to use, so make sure to drag around your text layer to find the sweet spot. Download the .sketch file for example:

Find Layer

If you named your layers, you may find the Find Layer feature very useful. It’s somewhat hidden because you can’t access it through a visible UI. Instead, you have to use Command + F and the Page drop down menu will change into a search bar.

Final Thought

If you find useful features that are well hidden in Sketch, please feel free to share them in the comments or by sending me a Tweet. Happy Sketching!

Download .sketch files

You’ll need Sketch to open these files:

Sharpness

“Sharp” is defined as razor-edged and honed. It’s the opposite of blurry. In other words, outlines are well-defined, texts are more readable, shapes are easily distinguishable. But beware, just like in photography, there can be too much sharpness, and that gives designs an unnatural, heavy look. You can strike the perfect balance of sharpness by not stretching elements from its original size and by comparing to reality. If you look outside the screen and really pay attention to the outline of things, you’ll notice a fine crispness and natural polish. That’s your balance. Good sharpness is unmistakable. An outline is an outline, it doesn’t mistake itself as the background or a shadow.

By looking closely at this design, you’ll notice a light shadow and a white shadow. They’re clearly defined – not too dark and not too light because that how I intended them to be. That’s the level of importance that I gave them. Also, they’re not mistaken as anything else. Had I made the light shadow whiter, it could be seen a double, blurry white shadow and that would destroy the purpose of that sharpness I was aiming for.

Perfect Position & Dimension

Understanding perfection is not enough. You need to apply the right techniques within the application context. In Photoshop and Sketch, that means resizing and positioning your shapes using round numbers. Half pixels are detrimental to pixel perfection. When you place a shape composed of many sub-shapes, you will spot uneven pixels. It’s important to quickly scan with your eyes the sharpness of the outlines and make proper adjustments.

In Photoshop, that means pixel snapping vector points manually by selecting them, then Command + Shift dragging them. See how the Facebook logo is a lot sharper on the right?

In Sketch, it’s even more precise because you can simply select each sub-shape and edit round the numbers (x, y, width and height). The toggle circle is much sharper on the right.

Obsession

Pixel perfection is an obsession and a standard to which serious designers live by. It’s a learned skill that needs nurturing in a fast-paced, technology-driven industry. It is even more unobvious now that pixels are getting denser every day. Ten years ago, when 800×600 displays and pixel fonts were the standard, it was a lot clearer to spot the imperfections. Today, you almost have to use a magnifier in order to distinguish the pixels on a screen. That’s why it’s more necessary than ever to rely on tools like Sketch for pixel snapping and for rounding the numbers to be absolutely certain that your design is pixel perfect.

Go ahead and download my .sketch files and spot the half pixels. You may find some and if you do, pat yourself on the back because you now have pixel perfection in your blood.

Download The iPhone Wireframe UI Kit

Wireframe iOS Dark Blue

Wireframe iOS Blueprint

Wireframe iOS Beige

Focus on User Experience

Wireframes should be as bare as possible. That is because you want your client to judge the user experience rather than the look. Using real dimensions and grids can be good, do it only if you have confidence. Knowing realistically how much content can fit in a single screen can make or break a concept. From my experience, within the constraint of time, the closer you can get to the real product the better. That is because being in front of a high-fidelity mockup can largely influence important product decisions such as navigation complexity, content fit, usability, overall value, etc. I try to look at all my designs from my phone’s screen simply because the experience can be dramatically different from looking at mockups in low resolution from a computer screen.

In this .sketch file that I provided, you will get all the iOS essential elements in the exact dimensions that respect the iOS guidelines.

Colors

The most efficient wireframes I’ve seen use subtle tones of gray or blue. Ideally, the shades should be neutral and consistent so that you can focus on the structure and not be distracted by strong colors. Since colors can be hard to master, use real colors at your own risk.

In Sketch, the linked styles feature is convenient for wireframing. I placed 4 colors on the palette from dark to white to structure design. By changing them, the whole wireframe will be updated.

If you respect the color structure, changing to the hues that suit your taste will be effortless.

Icons

Since user interface design can often make use of icons, don’t be shy to pick standard icons to represent key actions. It can help make the decisions of either going text only, icon only or text with icon. By now, you should have gathered a nice collection of icon sets that will help you brush through this process with ease. If you’re a long time Photoshop users looking to learn how to get started in Sketch with a good library of icons, I recommend reading my previous article Photoshop Users: How To Switch To Sketch

Real Dimensions

The iOS Human Interface Guidelines is a good read for any mobile designer. While designing, you should have a good notion of the optimal dimensions for your buttons (22 pt minimum, 44 pt optimal), readable text (24 pt minimum, 30 pt optimal), header (44 pt) and footer (49 pt). Thankfully, on the wireframe document, you will have access to all the assets tailored to the correct sizes.

Fonts

Deciding on the font can be part of the wireframing process. On iOS, Helvetica Neue is the font of choice and is readily available by default on the Mac (if you’d like more history about that font, I strongly suggest watching the documentary called “Helvetica”).

On Android, I would suggest Roboto. (I will write a Wireframe blog specifically for Android later).

But if you don’t want to worry about typography, the Blokk font may come in handy. Text will be represented by irregular blocks. Make sure to set the perfect font size (32 px) and line-height or it will look strange.

Export to PDF in pages

PDF is an effective format to send to your client. They will love being able to view your wireframes on their phones or desktop, and since it’s all vector, it will look great. Sketch has a neat feature that lets you export all your slices to separate pages in a single PDF file. Since it’s all vector-based, the document will be very small and will look crisp on any resolution.

More Wireframe Resources For Sketch

There’s a great Wireframe UI Kit with a different approach by Anthony Aubertin.

You can find the flat version of the Minimal iPhone I shared on Dribbble.

Big thanks to Marcelo Marfill for his iOS UI Kit.

Final Thought

Wireframing should be quick, two hours at most. It’s a good practice for any designer to get comfortable with the guidelines and best practices of a platform. I was tempted to add a prototyping process section but I figured that I wanted to give quite a bit of details so I’ll write another blog instead with tips and techniques.

I firmly believe that if you don’t have a solid understanding of the original reference (the one that was copied by the copier), you are bound to create an uninspired result. After all, if you copy a button from here, a header from there, how do you know that all those design elements will be cohesive? Will you be able to live up to that standard moving forward? Can you make sure that your final design won’t look like a Frankenstein of many designers put together? The only way is to stop copying and become the original designer.

Download the Sketch files: UI Kit and iPhone Design

Steal And Make It Better

“Good artists copy, great artists steal,” Picasso once said. He’s right. By going back to where the original idea stemmed from, you get a much better understanding of what made it work. On the design of the iPod, Apple didn’t copy the music players that were in the market, they looked at a true original for inspiration: Dieter Rams. They not only took some design cues from him, but also shared his obsession for perfection and simplicity. They embraced his 10 design principles of good design and they worked tirelessly on the details. The essence was stolen, but it was translated for the 21st century. And because Apple did such a good job at stealing, it’s hard to think of the portable music player without thinking of the iPod.

The Telephone Game

This is a game in which a player tells a message to another, which is passed through a line of people. The message that comes out at the end typically becomes erroneous. Too many designers play that game too. They copy popular designers, not knowing that that designer may have copied other designers. If you have a large line of designers copying one another, the result is mediocre at best. Do you want to be the 200th to copy a trend?

What we should do instead is to take influence from the very original designer and dig deep into his/her motivations. We should study his/her design process and apply that to ours – the attention to detail, the techniques and the tools rather than just the pixels. We should transform old ideas into new ideas and solve our very own problems. Only with that method can we completely own the idea and proudly put our name on top of it. Only with that design thinking can we consistently design successful products one after another. Only with true creativity and hard work can we put a dent in the universe.

The Dieter Rams Book

As I mentioned in my previous blog, I am currently reading his fascinating book: As Little Design As Possible. It has an inspiring story about how Jonathan Ive, as a child, was captivated by the level of detail and precision on one of Dieter Rams’s work. He then proceeded to study his work and marveled at the products he built, even 40 years after it was conceived.

Half of the book shows photos of Dieter Rams’ minimalist work. When I looked at his designs, I thought to myself, if any of those products were to be released today, they would still look beautiful and perfectly usable. That’s because simplicity transcends technology and fashion. “Good design is long lasting”, Dieter Rams said. It’s true, the best designs still stand the test of time.

The Dieter Rams UI Experiment

This is an experiment to translate Dieter Rams’s work into a digital user interface. Although I’m sure it could be just as fitting to borrow a different style, I used realism to convey the minimal colors and clear buttons. Just like how artists emulate reality, designers can imitate real shapes while keeping designs minimal. “Simplicity is not the absence of complexity. Just removing clutter would result in uncomplicated but meaningless products.”, Jonathan Ive wrote.

Original reference by Dieter Rams.

Making design intuitive requires that you care about the reality in which people live in. That means bringing clarity to the shapes and colors based on life experience. That’s why I chose only 2 colors (too many colors can distract), designed realistic shapes (well-proportioned buttons and layout) and created a comfortable lighting (gradients and shadows). I was hoping that nothing in this design is unnecessary.

Download the wireframes in Sketch: iOS Wireframe, iPhone Wireframe

On the left is the stream design that I completed 6 months ago. On the right is the same design but revisited as we’re implementing it. I applied the one pixel rule.

Where To Start?

First, start with a 2x canvas with the exact resolution of the device you’re designing for. Then, simply design without thinking about dividing your pixels in half. I know it sounds counter intuitive, but believe me, it makes perfect sense later on. Lines, borders and shadows CAN be one pixel wide. In 1x, they’ll just be… one pixel.

Translating To 1x

If you read my article on How To Design Pixel Perfect Assets, you’ll notice that it doesn’t matter if the borders or drop shadows are one pixel thick, what matters is that the canvas for the asset can be divided by two. So by following that simple and manual process, you shouldn’t have any trouble designing retina-oriented assets versus non-retina. When a drop shadow is 3 pixels, play by the ear and go 1 or 2 pixels. Since you do it manually, you have complete control over how it’ll look. Be a master of your craft.

The Gain of Spacing

Using one pixel lines instead of double pixels save you space. It’s not a lot, but when you multiply the number of lines in one screen, then you have an amount worth considering. Here is a comparison of before and after I applied the one pixel rule. As you can see, the lines are finer and the shadows more subtle. In addition, I saved about 8 pixels in the whole screen because the lines are no longer 3 pixels ( 2 pixels line, 1 pixel white shadow).

More Examples

I’m seeing more and more apps applying this rule and quite frankly, the results show that more care went into the design.

Not Everywhere

The one pixel rule doesn’t need to be applied everywhere, just where it feels right. Some styles are more fun or cartoony and therefore, the double pixels fit. But knowing and being aware of this technique will help you design with more precision and care for pixel dense devices. It’s an additional tool that can be added to your arsenal in your quest for beauty and simplification.

Print VS Retina

Retina displays were invented to match the quality and resolution of books and magazines. In print, lines and typography can be extremely thin and beautiful. Likewise in Retina, a one pixel line is gorgeous and distinguishable. If you look at the recent shift in thinner typography, you’ll come to realize that it’s much thanks to the Retina movement. Because there are 4 times more pixels, the eye can now read even the thinnest text. And we’re only starting to apply that elegance and precision to Mobile and the Web.

Final Thought

As tools evolve, we design faster. On the other hand, we don’t take less time to get a product out. Why is that? Well, the simple truth is that as we become more efficient, we spend less time on the boring stuff and more time on the smaller, finer details. We delight our users with more complex interactions, animations and beautiful pixels, which in turn takes more time to execute. That’s just in our nature, we want to perfect our craft.

“Good design is thorough down to the last detail – Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.” – Dieter Rams

We design for the medium and if the medium has evolved, then we must too. In the world of mobile, high pixel density displays outnumbers the normal ones, so it’s only natural that we start designing specifically for them. Hopefully in a year or two, this approach will also apply to desktop computers.

By the way, I’m currently reading Dieter Rams: As Little Design As Possible. It’s a massive book with high resolution pictures of his minimalist work. I’m learning so much. The foreword by Jonathan Ive alone is worth the price of the book.

• Download the Sketch file of this design.

Don’t Just Think, Write

I used to bottle all my thoughts inside my head and never write anything lengthy down on paper. Yes, it was expressed through my design, but is that enough? Can I become a better designer by writing? The answer is yes. The thousands of thoughts my in head were chaotic. Writing was a way to organize them and clarify them in the simplest form of expression: words. I know that a picture is worth a thousand words, but are those words cleanly organized? That’s what I wanted to improve. A designer should be able to concisely explain his product decisions. People can recognize good design if you’re able to tell them why and show them how.

“Good design makes a product understandable – It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.” – Dieter Rams

Iterate & Respond To Feedback

Feedback is gold. Your blog is essentially a topic open for discussion, whether the feedback exists on your site or on networks such as Twitter, Facebook, Designer News or Hacker News. I also iterated my blog based on some comments:

1) Added News Feed, so that people can subscribe on their RSS apps.

2) 18% of my readers are on mobile, so I made the blog friendly for iPhone, iPad and Android. I also added an icon for the home screen on iOS.

3) Added Markdown support for WordPress so that I can paste efficiently the posts that I wrote on Day One, which also uses Markdown.

4) Write follow-ups based on feedback: Photoshop Users: How To Switch To Sketch was written because I was asked to write a “Get Started” article for Sketch. Photoshop VS Fireworks was written because many felt that Fireworks was a good alternative to Photoshop. I had to compare it to Sketch.

Grasp The Moment, Don’t Let It Slip

I spend very little time writing blogs. English is not my first language and I’m just not very good at it, which is why I wanted to dedicate more hours to it. I write what goes through my mind. I learned throughout the years that the key to efficiency is to never wait for inspiration and always grasp it as it hits you, on the topics you’re most passionate about. Turn frustrations into actions. Inspiration comes when you set an environment and lifestyle fertile for it. When it strikes, don’t let it slip, it doesn’t matter if you’re brushing your teeth or in the middle of a conversation, jump to your phone and write your thought down. If it was good enough to completely eat your soul, then it’s worth writing about. That thought will stem into a more complex piece and from there, it will naturally blossom.

“Be like water making its way through cracks. Do not be assertive, but adjust to the object, and you shall find a way around or through it. If nothing within you stays rigid, outward things will disclose themselves. Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot, it becomes the teapot. Now, water can flow or it can crash. Be water, my friend.” — Bruce Lee

After reading that quote, chances are that you it will inspire you as it did to me. Well, grasp the moment.

Don’t Let It Sit

Waiting is the enemy of productivity. What I usually end up doing is set a condensed amount of time and just completely be absorbed by a task. Be your own researcher, tester, proof-reader, even if you suck at it. You’ll eventually get better. Never say no to something just because you think you’re not good at it. Try it first and if it stops you from waiting, then it’s all worthwhile. Learn through the experience.

Write About You & Make It Useful

Who are you? What’s your design process like? Who are your heroes? There is an overwhelming number of generic topics out there, of people jumping the bandwagon on topics like Skeuomorphism or Google Glass. While there’s nothing wrong with those topics per se, they’ve been so sucked dry that nothing really useful will likely come out of them. Skeuomorphism doesn’t matter in design (it’s not a foundation) and Google Glass, albeit an interesting idea, is not a real product yet. Almost no one has tried it. If design is problem solving, then you are not really solving anything with speaking about generic topics. Treat your readers like the student that you are and give them useful, thoughtful and new angles on what you’re passionate or frustrated about. Solve them. Share resources, give answers and teach your readers useful techniques to perfect their art.

Be An Original

Seek the original source. Don’t be a copy of a copy, you’ll end up being a bad copy. Dieter Rams is my hero because he’s the original source of inspiration for most of the Apple products. The minimalist design approach we see today are likely based on his 10 principles of good design. Steve Jobs is another hero of mine because he completely changed my career orientation by exposing good design to the mass market. Now, my skills and design thinking are actually wanted. Other heroes of mine? Tesla, Bruce Lee, Jiro.

Let me give you a task: find the heroes of your heroes and dig really deep by jumping through generations. Chances are that you will find a world of fascinating people who forever shaped the world of today. When you reach a true original, study all you can about him or her.

Put It Out There

Don’t hesitate now that it’s done. Get it out to a few key places and expect absolutely nothing. Tweet it, post it on Designer News and Hacker News. If your work is good, people will come to you. If it’s not, then keep working at it. Jiro required that all his apprentices go through 10 years of rigorous training perfecting the art of sushi. New apprentices would spend months just cooking a Tamago (Japanese egg omelet) to perfection. It’s not about the goal but the path. It’s not about perfection but the love for pixels. Quality over quantity. If a few readers like your stuff, thank them and ask them why. Welcome tips and meet with them. Build relationships and expand your ideas.

10,000 Hours Is Not Enough

I’ve been designing for 12 years and I’ve been committed to the 10,000 hours rule of practice ever since I finished the book Outliers by Malcolm Gladwell. And so, I have applied that much practice to my design. But, when I look at Jiro, Dreams of Sushi, a man who has spent over 50 years perfecting the art of sushi, I ask myself, am I good enough?

“Originally, I was going to make a film with a lot of different sushi chefs who all had different styles, but when I got to Jiro’s restaurant, I was not only amazed by how good the sushi was and how much greater it was than any other sushi restaurant I had ever been to…”, the filmmaker says about Jiro.

“How much greater”. Going above and beyond the bare minimum is what makes the craft that much greater than anything anyone has ever experienced. If 10,000 hours is the bare minimum, then 50 years is my next goal.

49% of mobile users use their phone with one hand, this means that almost 1 out of 2 users use the back button several times a day. That’s billions of awkward taps daily. It’s even worse with bigger phones because you would almost certainly have to use your 2 hands to reach the back button. I guess that could be one reason why Android has their hardware back button on the bottom left, but still, it’s not that great since the back button can differ from the “up” button.

Solving With Gestures

The minimal way to solve this problem is to rely on gestures. Gestures are great when your users are well-educated about them, or when they’re used in addition to obvious visual buttons that perform the same functions.

To my surprise, after testing countless apps, I found out that there are already many out there that have tried to solve this problem. No one solution will fit all, but it’s a start. I’m hoping to see designers come up with even more innovative ways to solve this.

The Toss Technique

Using the metaphor of manipulating real objects, the toss technique is a way to simply take an active screen and toss it out of the way. Letterpress uses this technique on their popup screen by letting users toss down the popup. It’s fun.

On Facebook, when you full-view a photo, you can toss it up or down and voilà, you’re back to the previous screen.

The Horizontal Swipe

The standard transition in iOS is having new screens slide from the right. By performing a swipe in the opposite direction, you navigate back. For example, Pinterest lets you swipe back to the flow screen after you tapped on an image.

Likewise, in Flipboard, after you navigate to a section, you can swipe back to the menu.

On iBooks, there’s no visual that tells you that you can swipe to the next or previous pages. But in addition to the swiping, tapping the left or the right portion of the screen also navigate pages, so the chances of failing to discover are almost non-existant. And because it’s such a powerful metaphor, users get delighted when they discover that function graced by a beautiful animation.

The Vertical Swipe

Just like the horizontal swipe, the vertical swipe can be fitting if the content slides from the bottom or top. Interestingly, Day One made their own version of the Pull To Refresh paradigm by letting users navigate to the previous and next content.

Clear lets you navigate to a previous level by doing a long swipe whereas the short swipe creates a new task.

While it’s not exactly performing a back function, Haze lets you access the settings menu.

How About Hold Or Double Taps?

Hold and Double Taps can be reached with one thumb and that’s why I think they would be great gestures that can be further taken advantage of.

Solving With Visual Design

It does feel natural within the iOS guidelines to place the back button on the top left, but that doesn’t stop us from completely changing the visual design and move the button elsewhere. The button doesn’t even have to look like a button.

Basecamp made the back function look like a side navigation where if you tap that space, it rids of the overlay.

We can even treat sub screens as overlays and use the “Done” button. Done buttons are placed on the far top right, which makes it fairly accessible.

Final thought

Until Apple comes up with a thiner and bezel-less phone, my conclusion is that designers need to be more open about using gestures to help perform frequently used functions. Gestures can be intuitive if carefully crafted by understanding how things move and how the brain works. As designers, we need to be aware of how people use their phone so that we can design efficiently by delighting rather than frustrating.

A Follow-up To My Previous Sketch Articles

• Sketch VS Photoshop
• Sketch VS Fireworks
• The Best Hidden Features In Sketch

Download the Free Trial

Head over to BohemianCoding and download the trial. There’s no reason to be put off by an application because of the price, especially when it’s about 10 times less than Photoshop. Use an application because it makes you design more efficiently and because you absolutely love using it. How would you know if you haven’t tried it?

Migration: My Icons

As a user interface designer, icons are about the only components for which you won’t be starting from scratch. First thing you should know about is the SVG format. It’s a pretty universal vector format that’s frequently used for icons and increasingly in CSS instead of embedding images for resolution independent results.

Thankfully, Sketch will allow you to import SVG icons and edit the vector points. Those icons will even be layered when imported so that you can apply Union, Subtract, Intersect and Difference on them to achieve the result you had in mind.

Icon Sets To Start With

There are free sets and there are paid ones. The paid ones are fairly affordable and it’s a great way to support fellow designers. Here’s a list of SVG-friendly icon sets that I personally use:

• Pixicon by Jackie Trananh ($5)
• Symbolicons ($35)
• Glyphicons ($59)
• Entypo (Free)
• Batch by Adam Whitcroft (Free)

PSD Icon Sets:

• Brankic1979 (Free)
• IconSweets2 ($8)
• Broccoli by Visual Idiot (Free)

How To Export Photoshop Shapes To Sketch

If you happen to have a set of icons that are exclusively made for Photoshop, the process is a bit more complicated to suck the SVG out of them. This process requires Photoshop and Illustrator:

1) In Photoshop, select all the Photoshop shape layers and Merge Shapes.

2) Go to File > Export > Paths to Illustrator and save the file as .ai (Illustrator)

3) In Illustrator, select all the shapes and apply a black color.

4) Go to File > Save As… and select format SVG

5) Import the SVG file to Sketch and edit them.

Migration: My Patterns

Unless you’re a pure flat designer, you should be pretty open about using textures in some of your designs. Your client might request it. Sketch does have a preset noise setting, but in case you want more, you should save your Photoshop patterns as individual pattern images and import them to your Sketch’s pattern library. Sadly, there is no migration tool. But if you need something to start with, try Subtle Patterns

What About My PSD Files?

Here’s your chance to start fresh. As a designer, you should avoid looking back at your old work anyway. Since Sketch is 100% vector, there is no way to import your PSD with all the styles intact. From my personal experience with Fireworks, that process wasn’t perfect neither: many styles were wrong. Even the typography looked bad.

The good news is that reproducing your Photoshop designs in Sketch is a breeze. It’s very simple to draw shapes, eyedrop the colors and apply the same shadow settings as on Photoshop. The icons and patterns part was the hardest and most crucial step since they’re part of your core library. As a designer, you should always focus on your foundation (design principles, bare design components, pixel perfection, etc.) and stop relying on trivialities such as styles, filters, actions and other application-dependent customizations. The tool doesn’t make who you are.

Sketch UI Kits To Start With

Sketch may be new but there are very good designers who already started sharing Sketch files. To be frank, it’s even easier to customize a Sketch file than a PSD. Enjoy:

• Sketch iOS Kit by Marcelo Marfil
• Safari and iOS6 Template by Benjamin De Cock
• Navigation Bars
• iOS Message UI by Ben Breckler

I’ll Even Share My Own

I don’t usually share my design files but since it should help new users to get started in Sketch, I will break my own rule.

• Pinterest Concept
• iPhone (Phone image by Paul Flavius Nechita)
• Dribbble Concept

Tutorial Videos And Tips

Marcelo Marfil made a few videos on how to create a custom UI in Sketch.

Final Thought

Unless you’ve spent more than 3 months full-time on Sketch like me, you will still rely on Photoshop for references, editing old PSDs and for other needs such as photo editing, drawing and other heavy graphic design duties. However, it’s good to know that there is an alternative to Photoshop that is entirely focused on user interface design. A tool that combines all the essentials of Photoshop, Illustrator and Omnigraffle. A tool that will give some competition to Adobe.

If you have useful Sketch files such as UI kits, Phone templates and icon sets you’d like to share, feel free to give me a shout at @mengto on Twitter!

The Back Button

For the longest time, the back button was never part of the user interface because of the hardware equivalent. It has changed since. It’s a pretty popular use now to include the back arrow next to the App’s logo when you browse sub-level content. The user interface’s back button (they call it “up button”) acts slightly differently than the hardware’s back button. While the up button goes up one level in your application only, the back button can go back to any previous application and content.

Resolutions

All the resolutions on Android are pretty confusing, i.e. we have xhdpi (2x), hdpi (1.5x) and mdpi (1x). They sound extremely technical. When I first started almost a year ago, the engineers couldn’t even explain to me what the ratio were for each of those. I had to figure it out by asking a lot of questions. The resolutions you should design in are 720×1280, 540×960 and 360×640. Make sure to include hardware buttons and the status bar on your design for high-fidelity mockups.

Starter Kit

Jeremy Sallée, designer at Telly, made a very helpful visual document that shows how the 3 resolutions differ. Also, you should head to the Android Action Bar Style Generator for a starter kit in a default theme. It lets you customize some basic settings such as colors and styles and you will get a zip file with all the assets all prepared for you in all 3 resolutions. The best way to learn is by experimenting with a real demo.

9-slice Scaling

Android has a peculiar way of managing graphical assets that is much different from how CSS does it. 9-slicing allows you to specify which area of the asset you want stretched and which area you want the content to be bounded by. The rest, such as rounded corners, can remain intact even if you resize the asset. On the asset, you have to draw these 1px black lines:

• Top: this area will stretch horizontally.
• Left: this area will stretch vertically.
• Right: this area will allow content vertically. This is where you set the padding for your content.
• Bottom: this area will allow content horizontally.

The Action Bar

Unlike the iPhone where the title usually goes in the middle of the header, on Android, the title is at the top left and next to the app’s logo. Tapping the logo usually leads to a side menu or to the last content you were on.

The title sometimes has a triangle arrow below it that indicates that you can navigate sub-level content. Just like on the Web, it is very common to see drop-down menus on Android.

Finally, if you respect their guidelines, all actions should be on the far top right. That includes functions like Refresh (because Pull to Refresh is extremely uncommon on Android), Search and the infamous Action button which is normally represented by 3 dots. The action button is used for more actions that couldn’t fit on the Action Bar.

Fonts

Fonts are unfortunately device-specific so better expect crappiness on some devices. Don’t get discouraged if you find yourself in a situation where you have to test your design on an old phone. There were worse days — remember IE6. The most popular font on Android is Droid Sans. It’s free to download. However, Roboto is gaining popularity since it’s present on newer devices.

Content Dimensions

In 2x, the minimum pixel dimension should be 28px for text, 96px for menus & header and 116px for the footer. It is only slightly bigger than on iOS (24px, 88px and 100px). We’re only talking about a ratio of 116% from Android to iOS.

Preview Your Design On Your Android Phone

Roman Nurik from Google released a pretty useful tool called Android Design Preview which allows you to preview your desktop view or design image to your Android device in pixel-perfection glory. Don’t even try Dropbox, the image get compressed badly.

Tip: on the Mac, you have to make sure that you allow applications downloaded outside the App Store by going to Security and Privacy in your System Preferences.

Another tip: the only way to preview your design is by connecting with your USB cable to the device and click “Install App”. This took me a while to figure out because I took for granted that they had an Android app on the Play store and that I would be able to preview using WiFi. Nope.

An Evolving Process

I still have to learn about tablet-friendly guidelines and a few other key techniques which I will write about as I go through them. If you have advices or resources, please feel free to share in the comments or by writing to me on Twitter.

Distribute Spacing

When you design a bunch of elements and want to make the spacing evenly between them, you no longer have to do it manually. Sketch will do it for you. You can either distribute those elements on the fly or by setting the spacing, number of rows and columns.

Linked Styles

Sketch doesn’t have a Master pages feature like Illustrator has but while some of us wait for that feature, you may find the ability to create linked styles for text pretty useful. After you link a style to a text, any future change to that style will automatically apply to all the texts that also share that style. Sketch obviously need to apply the same to their Pages feature so we can have a shared header or footer, and to all other design elements such as shapes.

Drag And Drop Export

Exporting anything on any application usually require a massive amount of clicks. Not anymore. Just click Export, select the slice and drag and drop the thumbnail. It’s super useful once you start using it.

Rounded Corners Control

If you remember years ago in Photoshop, one of the most common actions was to create a rounded rectangle. It was tough because we didn’t have the rounded rectangle preset. Thankfully, we now have the rounded rectangle as a shape, but what happens if you want just 2 of the corners to be rounded? Well, in Photoshop, you’d have to go to the Convert Point Tool, then select one of the point, place it correctly and delete the extra point. Repeat for the other corners. In Sketch, all you have to do is click Edit, select the points you want to be pointy and click the pointy icon. As simple as that.

CSS Styles

This may not a well-polished feature, and the codes will be messy as you’d expect from any application that promises a design-to-CSS conversion, but at least, it gets the gradients and color codes right should you need them. Honestly, especially for gradients, it’s a bit of a pain to code the positions, rgba and HEX codes manually. That’s when the Copy CSS feature comes in handy. In Sketch 2.2.1, you can get the CSS from texts as well. I already made suggestions to the team at Sketch that they shouldn’t duplicate the multiple box-shadow properties and have them separated by commas. Also, they should forget about adding additional codes for multiple browsers and have options for LESS/SASS. It would make the codes a lot cleaner.

New From Template

Not having to set the size of your canvas when you start a new document is so liberating. I could go on forever about how amazing the infinite canvas and Artboard features are but they’re also commonly available elsewhere. However, the New From Template feature is pretty unique. You can set any document you design as a Template for future uses. Think of the possibilities.

Final Thought

This article only covers the hidden, unique features of Sketch. You should read my previous articles for more common features such as 100% vector, 2x export, SVG support, etc. Have fun designing! Oh and don’t forget to try Sketch.

Mobile

Ever since I first heard about the golden rule of 44 px (2x) for touch-friendly buttons popularized by Apple, I started applying that standard everywhere, even for Web. Because if you want your site to be usable on mobile, you have to make sure that buttons are big enough for your fingers to reach with ease.

Likewise for typography at 30 px (2x), a good modern Website has to have readable fonts so that users of all age groups can easily consume the content without frustration.

Native apps may have won the battle in the consumers’ heart, but that doesn’t mean that the modern Web can’t evolve. Relying on HTML5 alone won’t be enough. Websites will have to be completely responsive, adaptive and make precise use of device-specific grids. Beautiful transitions will come in play to delight users. Eventually, sounds as well as other mobile technologies (Notifications, Camera, Location, etc) will complete the equation.

Design Tools

Sketch is my favorite design tool today. But speaking outside of my preference, what truly is important to me is to have tools that make designing effortless and focus on the user interactions. Whether you use Photoshop, Fireworks or Sketch, you should make sure that you use vector shapes. That will make your designs flexible and resolution independent.

You should also use grids (960-1000 as a base) and think about fallbacks for Mobile users (phones, tablets), which essentially mean go for an Adaptive experience. Believe me, it’s not a lot more work if your process is right. Also, create mockups for popular resolutions such as the iPhone and preview your designs on your phone using xScope. If you’re coding, use Safari’s Web Inspector which allows you to inspect the mobile browser.

Tools like Slicy and Sketch will allow you export assets in 1x and 2x. But ideally, use fonts or SVGs for icons and rely everything else on CSS.

HTML5 / CSS3 / LESS or SASS

CSS today is extremely powerful and simple. Visual interactions such as mouse-over to show a hidden element can now be done through CSS.

#container:hover button {
    .opacity(1);
    .transition(0.5s);
}

This used to rely on obtrusive javascript. And this works cross-browsers thanks to LESS. Imagine a future where coding a few lines can have maximum effects. Every day, there are new tools like Roole whose objective is to make these codes even simpler:

#container:hover button
    opacity(1)
    transition(0.5s)

Dynamic Web

I’m no expert in Node.js, but I’ve been experimenting with Meteor and based on the demos so far, it’s very impressive. I’ve been developing on PHP/MySQL for more than 7 years and I believe that those technologies need to be simplified. More importantly, front-end needs to be completely separated from backend and we should only need javascript for it. Connecting to APIs using JSON with jQuery is incredibly simple. On the other hand, front-end on PHP is a mess.

Frameworks

If you’re building a complex site, you might want to consider frameworks like Bootstrap or Foundation since they already have all of the above figured out. But don’t be lazy and customize. ;)

Giving that extra care shows your passion as a designer. Yes, it does take more effort but as a reward, you will sleep better knowing that the 1x users will also enjoy your design. “Make the back of the fence look as beautiful as the front. Even though others won’t see it, you will know it’s there, and that will make you more proud of your design.” – Steve Jobs

This is a technique I’ve picked up on Sketch, but I’m sure the same principle can be applied to Photoshop as well.

The Key Is To Design Using Pair Numbers

1) Select your asset and make sure all the dimensions and positioning are on pair numbers. Why? Because when you divide those numbers by 2, you get a nice round number. That will ensure that when you resize that asset, it’ll be pixel perfect. The border-radius of your rounded button should be half the height of the button. In this case, it’s 26px.

2) Create a surrounding box that serve as your future slice. Also make sure that the numbers are in pair. Create a folder for that those layers.

3) Duplicate, lock the ratio (lock icon between Width and Height) and set the width to half the original width.

4) Adjust the border-radius, drop-shadows, inner shadows to half the pixels, unless it’s 1px.

5) Select the 1x button folder and Go to File / Add Slices for Selection. This will create a nice slice that will be easily exported.

6) Hide the Mask layer and the Bg layer and Export. You can use Sketch’s super useful feature that allow you to drag and drop the asset’s thumbnail to anywhere you want it.

Arguably, Slicy does a pretty good job at resizing to 1x automatically but is it good enough? Doing it manually (using a PNG and resizing it to half the dimensions) is even worse. These results should make designers cry.

What about 2x?

In Sketch, there is a 2x export feature that allows you to take any asset and do a pixel perfect rendering of it in 2x. While the pixels will be perfect, they will be doubled and that might not be the effect that you want. The simple solution to that is to duplicate and resize to 2x the width while locking the ratio.

Download the Sketch File

Here is the original Sketch file so you can play around with it. :) Assets.sketch

First Impressions

In the first few minutes after using the UI, I can tell why everyone has been saying that Adobe neglected this product. It feels very unpolished compared to Photoshop which has a dark sexy, intuitive interface (CS6 is even better). The buttons look completely outdated. The top bar is pretty much useless. The Bitmap tools (marquee, brushes, eraser, etc.) are good for image editing, but they’re just noises for user interface design. You might as well use Photoshop or the cheaper alternative PixelMator for that purpose. Additionally, those tools are just not vector-friendly.

After playing around with the properties on my rounded rectangle, I started to really miss the live editing and the keyboard arrows (up & down) that would allow you to see direct results from your tweaks. Sketch has a really efficient way to adjust the settings and see live results without having the press Enter all the time. Dragging stuff around feels very sluggish compared to Photoshop/Sketch and I work on the latest iMac with 32 GB of RAM.

I was pleased to see that you can apply multiple of the same styles (drop shadows, inner shadows, etc.), but managing them was a pain. The number of clicks/popups that I have to go through is just astounding. Also, for some obscure reason, Adobe feels that the default drop-shadow should be at 315 degree angle and at a 65% opaque black. That basically means that you have to adjust those settings every single time.

In the first 5 minutes, the application crashed on me as I wanted to re-arrange my toolbars. That might just be bad luck.

The Export Tool Is Pretty Sweet

You can slice your design and get the html file that contains all the images. I can see why exporting sliced designs can be useful, especially if you don’t want to be bothered with codes.

But it’s 2013 and most designers stopped relying on images to create simple interfaces. We use CSS now and we love clean codes. Sketch and now Photoshop has a neat feature that allows you to “Copy CSS”, which essentially gives you the CSS equivalent of the properties you have set. It’s useful on occasions, but not truly groundbreaking. That’s until they figure a way to make the codes cleaner (e.g. have multiple styles separated by commas instead of repeating for box-shadow), embed more settings such as border-radius, border, gradient, patterns, text-shadow, etc.

Still Pixel

At the end of the day, what really made me switch to Sketch was the 100% vector direction and how simple the UI is. I care deeply about the number of clicks needed to achieve one task. With Sketch, it just feels like all the properties that I use are there, only when I need them. That’s a sign of a good UI.

It was a tough decision to switch from Photoshop, but the advantages far outweigh the hurdles. While Fireworks is a decent alternative focused more for Web design, it still carries the same issues that I’ve had in Photoshop. It feels like a tool that was invented when the Web was prominent, before the Mobile era and certainly before retina displays came along. There is no tool in Fireworks that made me think “Hmm, they really thought about this for mobile designers”.

What Is 100% Vector, Really?

Okay, I feel like a lot of people misunderstand what 100% vector really means. Well, let me clarify that. In Photoshop, you have vector shapes, but changing the width will screw the rounded corners. It’s like the application really treats it as an artwork rather than a dynamic shape. In CSS language, if you change the width of your box, it won’t change your border-radius.

Zooming in will show all the pixels, which means that you won’t be able to see how it’ll really look like in 2x and you won’t be able to export to PDF or even print your designs as is. You will always have to set the DPI. It is resolution dependent. In Sketch, all that disappears. Thanks to that, you can do pretty cool stuff like exporting in 2x without creating extra layers.

Sketch does a beautiful job at importing SVG icons from your favorite designers. In fact, I found a pretty neat process that even allows you to import all your Photoshop icons into Sketch. It’s a bit tricky though.

• Select the shape in Photoshop.
• Copy and paste that shape to Illustrator.
• Save as SVG.
• Drag and drop the SVG file to Sketch.

Finally, because Sketch is vector based, all the layers are compatible with other vector based application such as Keynote. It is perfect for presentation, or designing for print since you won’t have to care about DPI. For example, I was able to redesign my Résumé in a very short time, and that experience was actually enjoyable! My Photoshop experience with designing resumes or business cards was not a good one.

Animation

This is a topic that I’m passionate about and no one has solved it beautifully yet, not even Sketch. I want to be able to animate the transitions in my designs and preview them quickly, anywhere. That would help the process of showing engineers how I’d like my design to be animated. Fireworks, Photoshop and AfterEffects all do that task in their own way, but I never felt compelled to dig deeper for fast prototyping. They just don’t feel natural for what I truly want. It is unfortunate that Sketch has no support for that yet. Perhaps, Sketch shouldn’t and perhaps we need a dedicated app as powerful as Quartz that’s much easier to understand but that can easily animate using physics, ease-in and ease-out by just tweaking the numbers and applying properties and specially made for user interface design. But it’ll be interesting to see how design applications will evolve to fulfill that need.

Price and Support

I was surprised to find out that Fireworks actually costs $299. It’s ridiculous considering how little Adobe work on that product anymore. In comparison, Sketch costs $49 and has a small business license for 5 users for only $124. You’ll have to judge it for yourself.

100% Vector

With the growing popularity of retina displays and mobile devices, I feel like redesigning your app for the sake of adapting to 1x, 1.5x (Android) and 2x doesn’t make much sense and is a huge time waster. That’s why you need a flexible design tool. Sketch supports infinite zooming, 2x export and styled vector shapes that are perfect for multiple resolutions. Layout-wise, resizing rounded rectangles no longer requires you to edit the shape points or duplicating the middle portion. You will only care about pixel dimensions and updating images on the fly will be a breeze on Sketch.

Robust Export Feature

Photoshop is very bad at exporting assets. The slicing tool there is cumbersome, e.g. that usually means slicing, setting file types and use Save for Web, which forces you to select slices one by one and export. It is so bad that a beautiful application called Slicy had to be created to solve that decade-long problem.

Sketch solves that without a single add-on. For one, it has an Export All feature. Secondly, since it’s vector-based, it can export in PDF, JPG and PNG, optionally in 2x. Last but not least, the UI for managing your slices is efficient.

Code-friendly Designs

This might be a new concept for many designers, but what it essentially means is that all the properties that you use on your designs (shadows, border, gradients) are all possible on CSS. Why is that important? Well, you don’t want to drive the front-end guys crazy. That could mean you. On Photoshop, you can go absolutely crazy on the lighting directions, textures and drop-shadows that really don’t translate very well to CSS or Mobile. Styles like Bevel & Emboss, Satin, Angles won’t work seamlessly on CSS unless you’re ready to use many images. Remember, Photoshop is a tool originally made for photo editing and complex graphic designs. Sketch cuts all of that and really focus on user interface design. And even though Sketch is simpler, it actually has deeper features such as unlimited shadows, inner shadows, borders and border properties. Photoshop forces you to use Drop Shadow, Inner shadow, Gradient, etc once.

This took me about 15 mins to plan the design that’s going to be coded in CSS. There is zero image involved.

Design With Numbers

Sketch made me obsess over the numbers. And that’s a good thing. Having guidelines and making sure that the dimensions, ratios, positioning make sense is a crucial part of being a good designer. Don’t just drag things around and apply filters, then call it a day. Be obsessive with the numbers.

3 Applications In One

Previously, I used 3 tools for 3 different needs: Omnigraffle for wireframing, Photoshop for user interface design and Illustrator for vector, logos and print. All those 3 can be fulfilled in a less cluttered way on Sketch. Using one application for all means less back and forth and less worrying about translating your design into a new form. Before, what was used on Omnigraffle or Illustrator couldn’t necessarily be used on Photoshop easily. A complicated flow of exporting/importing had to be done and more often than not, you had to start from scratch on Photoshop.

Grids

Nowadays, designers have to care about grids. The 960 grid is probably the most commonly used for Web and new grids are emerging for mobile. Sketch actually has a grid system that allows you to customize as you see fit and it’s extremely useful for respecting design standards for multiple devices.

Give It a Try!

Photoshop has a big legacy and I can sense the unwillingness to make a switch and say goodbye to years of building libraries. But if you can overcome that, not only will you improve your overall design process, but you will be ready for the future as all your new designs will be completely vector-based, flexible and resolution-independent. You will design faster.

The good news is that Sketch is very similar to Photoshop and has more or less the same features that you are familiar with including keyboard shortcuts, layer blending, styles, blur, noise, patterns, etc, except it won’t have all the filters and photo editing capabilities that you probably don’t need as a user interface designer. It’s not a watered down Photoshop, it’s a robust design tool that has completely adapted to today’s design standards. And it’s constantly updating itself every couple of months. The team behind Sketch is very open to feedback — I’ve had the pleasure to post 2 comments on their board and they quickly fixed my issues within the next month.

At the very least, I suggest that you at least give it a try. It’s totally free to try and it costs 49 bucks if you like it. It’s a steal!

http://www.bohemiancoding.com/sketch/

• Update the design to be more content-focused.
• Make it easy to update by using simple HTML5 codes.
• Make it infinitely scrollable, adaptable and mobile-friendly.

Here are some techniques I’ve picked up along the way.

Load images as you scroll

When you have a lot of images on your site, you might not want to load everything at once since it can be bandwidth intensive and the order can be unwanted, i.e. the top images load last.In that scenario, you want to build a script that load only what you see and load more as you scroll. I found a neat script that did exactly that. http://jsfiddle.net/tcloninger/e5qaD/

I hacked it a little by adding a load condition on the image so that it only starts animating when the image is loaded. Alternatively, you can have a pre-loader, which is what most sites use, but the problem with that is that the site loads every single image before running it. Also, that wouldn’t work for infinite content, which is what I’m going for.

Here’s the short piece of code I added inside the scroll function:

$('img').load(function() {
    $(this).addClass('active');
});

Loading Spinner

But now the problem is that when the user reaches the content, as the images load nothing seems to show up, so we need some sort of loading animation to indicate that an image is loading. I found this script and tweaked it so that the loader appears at every article’s scroll point, then hide it when image loads. http://heartcode.robertpataki.com/canvasloader/

if($('#canvasloader-container').length == 0) {
    $(this).append(CANVASLOADER);
    loader();
}

Transitions

Transitions are a beautiful thing in CSS3. It takes minimal effort to pull delightful results. So I started adding .transition(1s) everywhere using LESS Elements http://lesselements.com for hover and normal states so that it has this simple, yet soothing effect even when the user mouse out. Simple codes. Works across browsers.

.button {
    background-color: blue;
    .transition(1s); 
}
.button:hover { 
    background-color: white;
    .transition(1s); 
}