Sketch. Mean anything to you? Sketch. Mean anything to you?

Sketch. Mean anything to you?

by ,
on 1 July 2016

0
0

The Roubaix studio tested Sketch on a key account and international web responsive site redesign. Very, very difficult to go back to Photoshop after several months of non-stop work with this new software. For the time being, we propose to present Sketch to you, if it hasn’t already become your new tool of choice. The case study will come later.

Sketch: a reminder

sketch-02

Sketch is software designed first and foremost for interface design, a niche, but that’s also what makes the difference. A few words to characterize it: practical, flexible, completely editable, purely vectorial, plug-in, interface, rapid, light, and MAC native (even if there are rumors concerning Windows carrying it). In summary, you concentrate on the functional portion when working in Sketch; it works well with flat design and all 3D design which is intended for a screen.

For several years, Sketch has taken more and more room in the hearts of creators and has progressively made its mark in the UX designer community. Hello “change”! Well yes, it must be said, this latest arrival questions Adobe’s market domination. And not without reason, it has conquered companies such as Facebook, Google, Twitter, Dropbox, to name a few. A non-negligible advantage, Sketch is not costly, and above all, paid for once and for all.
Playing to its strong points

#1 Rapid & efficient

Quick yes: to install, to get a handle on and to use on a daily basis. It takes approximately 2 days to master the Sketch designer basics. It’s MAC native software so extremely fluid notably as it offers primarily vectorial tools. It requires a short lapse of time to open. It’s also a pleasure to note how light the files are when you’re compiling a complete project.

#2 Hello my friend

sketch-04

Sketch benefits from a high number of users who make up an active community. Numerous interfaces are available in source files to help you get started, for example, Apple Watch. Dig, test, explore and above all, share! Check it out here http://www.sketchappsources.com

#3 Artboards & Pages: a perfect combo

sketch-05

Sketch operates with a system of “artboards”. Like Illustrator, you can have several artboards available side by side. Thanks to its pages system, you can work your entire project in one single file. In the Roubaix studio, we worked one file per device for our e-commerce site redesign. This gave an overall view and offered true comfort for thinking on the interactions, especially for the mobile. The components – design principles – are easy to use.

#4 Plug-ins – if you want it, you’ve got it

To enrich a palette of tools that’s relatively “pared down” – but I’m not crazy about the term, I prefer to talk about a “streamlined” work surface – you can easily add “plug-ins”. The best-liked is the Sketch mirror. The principle? To allow you to see your designs in real time on other devices.

#5 It’s straightforward

sketch-07b

Generally, Sketch is accurate and makes it possible to visually grasp all your measurements in pixels. Several functions appreciated by designers: smart guides, the alt key to display measurements, vector mode, and multiple exports.
A major revolution, the symbols system allows you to change a component on all the pages in one action. Very useful for a menu; it will replace the noted symbol everywhere if you duplicated it. So beware unpleasant surprises when this “detail” eludes you. How can you find them? The symbol layer is purple.
There are few crashes and the automatic save works very well. Not bad, huh?

#6 You’ll love to export

sketch-06

 

 

 

There’s no way around it, we have to discuss exports. All designers will confirm – I hope I’m not being too forward – that the export phase is tedious over the length of a project. With Sketch, a minor revolution this time around: in one operation, you can export several formats thought out to take into account our current web constraints, for instance, X2 for retina.

#7 Reconcile FrontEnd and Design

The tools proposed may seem limited but are in fact based on properties available in CSS3. So there’s no, or at least less ^^, “it’s beautiful but not feasible!”
Arf… impossible to limit myself to a top 5 but for the negative aspects, I did a better job.

… and its weak points

#1 B as in bugs

sketch-08b

To be totally transparent, I’ll admit that there are still a few bugs that the updates do not correct. The magnetism and grid alignment can be improved. For no apparent reason, or when there are too many components on a page, the magnetism does not align accurately.
The text tool is sometimes capricious: lag time when keying.
The white square syndrome. An extra little story that was specific to our project! Go figure out why a white square haunted us for weeks. Despite several deletions, its return surprised us everytime we opened the file. Hello daily weirdness.

#2 OS X only

Software supported exclusively by OS X (for the time being); the publisher did not want to create versions supported by other platforms. We consider this an advantage in terms of speed but an inconvenience for working as a team.

#3 Vector paths – re-open Illustrator

sketch-09

For my part, I found the vectorial drawing less accurate than with my good old Illustrator which I find a bit disappointing in its last version, that said in passing. For the first time handling, I found the work rather tedious, an opinion shared by my partner over the last several months.

#4 Updates practically daily

The updates are more than frequent. This becomes a habit when opening the software at the beginning of the day. Happily, rest assured, they take little time.

#5 Fonts: pay attention

Be careful to install all the fonts linked to a document. Do not validate opening without having installed everything ahead of time. The risk? Not being able to easily update the typography for all the texts. This can cause loss of precious time.

How do Photoshop, Illustrator and Sketch differ?

sketch-10

Photoshop has become very generalist and is considered by certain designers to be an overly complicated system. This impression is due to the particularly long opening times, the number of infinite tools, and mastering the software over the long run. Photoshop, by definition, offers many more possibilities that Sketch does not have. In working with Sketch, I also needed Photoshop to prepare pictures, to touch up photos, to work textures, etc.
Illustrator is much more complex than Sketch and requires a longer and deeper learning phase. Sketch and Illustrator are similar in the use of art boards and a primarily vectorial practice. Illustrator remains irregular for vectorial projects and complex illustrations.
Sketch which was created for interface design does not intend to replace our beloved softwares. It all depends on the type of project being undertaken and the manner in which you want to complete it.
To complete this comparison, I invite you to follow another alternative closely: https://affinity.serif.com/fr/designer/
Managing the integration phase?
It’s one thing to prepare mock ups on Sketch but for the next step – valid question – what do we do? According to the Sketch creators, we have a code-friendly. Said in a different way, everything used in the software, shading or borders, for example, can be done in CSS. Sketch forces us to be even more detail-oriented – we become obsessed with the numbers and the perfect pixel thanks to precise guidelines. Unearth out-and-out Sketch fans? Challenge accepted!

sketch-11
Your turn to play: https://www.sketchapp.com/

tags:

, , , ,

,

to read next...

Leave a Reply

Your email address will not be published. Required fields are marked *

0
0

Sketch. Mean anything to you?