30 day of Sketch: the playbook and basics

Maurice MY — Mon, 21 May 2018 22:01:16 +0000

Hi, in this story we are gone be looking into basics of Sketch, Style tiles, wireframes, user interface for Mobile, Tablet or Desktop and recommended plugin.

What is Sketch?

The Sketch is a digital design app for Mac. It can be used for UI, mobile, web and even icon designing. You pay for the app once, and you can use it for as long as you want. The license that you buy lasts for one year, and in that year, you have all the updates included.

Recommended plugin

Sketch Toolbox (Plugins: Hipsterfill, MagicMirror, Rename it, Sketch measure, Sketch Palettes, Sketch Subtlepatterns)
Invisionapp Craft
Nudg.it
Sketch Image Compressor
SVGO Compressor

Style Tiles ->Resources Recommended: Click me

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. The steps for a style tile can be:

Working with Icons
Creating Buttons and Forms
Creating Typography Styles
Working with color Palettes

Wireframe

Wireframes are simple layouts that outline the specific size and placement of page elements, site features, conversion areas and navigation for a website. This can include Creating:

A Mobile-First Approach Wireframe
Creating a Tablet Wireframe
Creating a Desktop Wireframe

Resources Recommended

Resources: Click me
Resources: Click me
Resources: Click me

UI Design for Mobile, Tablet, Desktop

When Designing, you’ll need to remember; Pixels, Screen sizes, Resolutions a height or width; Example for mobile max-width: 479px, max-width: 767px for Tablet, max-width: 991px for Desktop, DPI (Dots per inch or pixels per inch). Down we have an example, what we will design is a simple blog and the proses are:

Designing the Header
Designing the body are
Designing the Content Spaces
Designing the Footer

FINISH UP THE DESIGN

After fishing UI designing, you will have to make copy of mobile, tablet and desktop artboards and after that starts;

Annotating, Winch is simply adding notes that give explanation or comment on pixel, height or weight etc.
Saves the annotating artboards or wireframe to PNG, icons to SVG, JPG or PNG etc. And send them to the developer or start developing the design into an app.

Thanks for reading. Hope you enjoy it and have a nice day where ever you live.

Forem: Maurice MY