Category Archives: Thoughts

Oh Assets, we love you (now)


Oh Assets, we love you (now)

Everyone thinks that a designer’s job is done once he gives the designs off to the developers. Well, I am sorry to debunk this myth, but the truth is, at that point our jobs are just about 60% done. You may be curious to know what the other 40% is? Believe me it’s the most messy job that we are left with – {drum rolls} creating Assets and spec sheets. From decades this job has been done manually along with us cursing ourselves for making this career choice. Our biggest threat, ‘Half Pixel’. Oh this is a nightmare dressed as a daydream (not a huge Taylor Swift fan but this quote fits).

Design Lingo 1o1 – Assets

Before we dive into why it’s such a scary thing, let me walk you through what I mean when I say ‘assets’. So those tiny shiny icons you have on your crispy screens, that trigger the neurons in your brain, which work really quick and hard, to tell you what they mean. They are built with small boxes on screen called ‘pixels’. We create shapes/icons for apps, websites etc. by magically weaving these pixels together. So, when we say assets we mean those icons or the shapes which you are so accustomed to seeing.

By now those tiny decision makers in your head who control what you do everyday would have gone either ‘Ugh crappy article’ or ‘how long till he gets to the main point!’. Calm down.

Design Lingo 1o1 – Specs

We just got to know about assets now let’s hop on to the ‘Spec sheet’ train. You know how in the physical world we refer to distance by either kilometers or miles? In a Designer’s world it’s measured in pixels, we say ‘hey this icon is suppose to be X pixel from the right’ so every asset, typeface, line etc. are placed at some pixels away from each other. Spec sheet is that magical scroll that tells the developers where they should place the assets (icons/shapes/line etc) and what should be the size of the font, color, its weight (Bold, thin, Ultrathin, semibold etc).

Phew! That wasn’t that difficult was it, huh? All these years we spent countless hours in creating assets and spec sheets so that we could make our developers’ lives easier. Yes we toiled hard, struggled, pulled our hair at times, when on this mission, but all the hardship is worth it because when you see that beautiful outcome you forget the effort that went into making it.

All this time, while I was blabbering about how difficult it is to create assets and specs; many designers out there were effortlessly doing it with a huge smile on their faces. Paradoxical you say? Well it was all possible because of a new tool called ‘Zeplin’. It’s an amazing tool which allows designers to spend more time ogling at shots on Dribbble and be with the people they love. That 40% of the effort, I told you about before, is reduced to a minuscule number that only mathematicians care about. It helps developers and designers alike. All a designer needs to do now is sync his Sketch file (yes only Sketch, Adobe we are excited about Comet) to Zeplin and let Zeplin do its job, allowing developers to not just see where the assets are to be placed (Specs!) but also allow them to get assets of all size – wait all sizes what’s that now? Glad you didn’t ask, but here it is anyway.

We have a plethora of devices out there in the market and all devices have different sizes and pixel densities so a single asset doesn’t work for all (if only) so we need to create assets of different sizes. When designing for iOS we have to generate 3 variations of the same asset (1x 2x and 3x). In Android it can go up to 6 variations. Before Sketch, in Photoshop creating them was a repetitive task and a waste of time. But in Sketch it was easier and now because of Zeplin it’s done in a jiffy!!! Technology I tell you.

I thought of doing the math and telling how creating an asset has become so easy, but I think that’ll be a lot for anyone to digest in one go. To keep it simple and concise (not kidding) thanks to tools like Sketch and Zeplin we can be more focused towards spending our time on Dribbble achieving the state of design nirvana.

Design tools we use at CloudMagic


Design tools we use at CloudMagic
We live in a world that exists on devices that are ever changing and evolving. These devices have multiple screen sizes, orientations and densities. Finding the right tools to execute your tasks is a challenge. As designers, we know it is a pain just to export a single icon for various densities, resize the icon, clean up the half pixel mess and repeat the drill 10 times and try not to cry. I have listed down the design tools we use at CloudMagic which simplify the repetitive work and gives us more time for the creative aspect of design.

Pencil and Paper

Generating lot of ideas, at the early stages of product creation and while introducing new features, is important for a product to be successful. When I start sketching my mind slows down, which is the perfect mindset for generating ideas. It also helps in getting accurate feedback on the flow rather than getting a narrow feedback like;

“That icon does not fit well”
or
“We can use a better font”

By having a low fidelity mockup we can get expected feedback like “How will a user navigate to compose from here”. Using pencil and paper helps you to get constructive feedback.

Sketch

As visual designers we have more tools available now, than ever before, to design beautiful interfaces and interactions. For many years, Photoshop was the only go-to tool for designing interfaces. But, Photoshop wasn’t meant as an UI design tool at all. It’s a photo editor with those extra options for UI design. Sketch is perfect as it has almost every single feature to design interfaces. Moreover, it is vector based – in todays world we have to design for multiple devices, working on a raster based software does not make sense anymore. A simple example of this would be dealing with the dead pixels in Photoshop for icons. It is a pain to scale from one size to another. Switching to Sketch was an exciting journey – here’s how we switched.

Zeplin

Many of you have probably faced the situation of creating red line specs to move the design, which you made, to engineering team. I know that we all hate to do this but we do it every time. When we moved to sketch I heard people rave about Zeplin and man it’s all true. All the hard work we were doing was just a tap away. Install the plugin and click Cmd + E to automatically add your design to Zeplin and invite your engineers to the project. That’s it!

Principle

I used to work with After Effects which is not interaction friendly and was not really sure if the animation that I drafted was actually feasible for development. I needed something more easy, smooth and interactive. I started trying my hands on Invision which is a great product. But it did not solve my problem of animations. I started using Principle. This software is a mix of Flash and After Effects. It has timelines and custom animations focusing on touch screen apps which help you test your ideas. The output will be a fully functional prototype which you can view on your device or send it to your co-workers.

Google Drive

We use google drive to store our Design files, Assets and Wireframes as it syncs the files, across our team’s computers. It has made our work more accessible and collaborative, than ever before.

Trello

We use trello to manage our tasks as it is another clean and nice tool that we use to assign tasks to each other. We set up boards for each project. Add columns like, To do, Doing and Done. We keep updating the board after each tasks. This also helps us monitor what each one of us are working on and how packed our schedules are.

Using these tools helps us design smoothly and keep exploring more features. Which ones have you tried? I’m really curious to explore other tools, if it helps us work more smoothly and efficiently.

Thank you for reading.