How to Start Sketch Design Project in 4 Steps


what’s up everyone my name is Faiz and
welcome back to my new episode of its Sketch UI/UX tutorial and in this
video I’m going to give you a complete guide of starting your new project into
a sketch and I’ll give you a 4 steps which make your design more flexible and
which gives you a more confidence if you are new if you are beginner if you don’t
know how to use sketch if you don’t know how to create your first design and if
you even don’t know how to do branding into sketch so first step is define
great system so it is a very good start point that I almost define the great
system before I design so let’s suppose you are who you are going to design
mobile application website or another application so if you want to make your
website pixel perfect a more flexible so you should have to define great system
so example you have a project which is based on the bootstrap so it is it would
be better that if you follow the same boot strap grid system inside your
design so you can easily make it click on layout setting so now you can see so
this is bootstrap for grid system which will help you a lot
second step is branding branding so much important part for your project if you
want to make your project more flexible easily maintain everything quickly
change everything like colors fonts icons so you should have to make so like
here I am going to talk about the colors like I have created primary secondary
colors and some other color like grey black accent colors like notification
alert colors and the second one I create type of graph we like what kind of fun
I’m going to use like for fun wait over here like light
regular semi bold and this is my typography which I will to use inside my
project like large titles headline and other things and third one is icons
inside branding so it’s a very most important part that
you should follow the icons which belong from same family so it give your project
more beautiful look and like example you are following some icons which are lines
icons so it easy for you to manage or like us don’t mention all I can together
like line icon and fill icon otherwise it will look so much weird and
here to say it’s not going to look so much good and the fourth one what what I
mostly do I use space margin padding like it example sometimes I lost my my
great my rulers from top let’s suppose if I take this and this and certainly I
move my put my rectangle over here like this so it’s happened lots of times so I
figured out this way so I created based on this lines like
eight pixel padding margin or whatever you can call and 16 pix 1024 pixel so
it’s give me so much flexible and now I can easily give padding margin of
whatever I want it’s so much easier and it also helped me to make my design
pixel perfect the third thing is create symbols and style so mostly what I do
when I found my colors and my fonts and all things so I simply simply select and
go to over here shirt style and create my first style
like this and give DDF like project color primaries so what happened over
here I have a custom style on this box easily I can call this style everywhere
example you can see my list so example if I have a box over here I simply click
and just share this style with this and save this and there is some other color
like gradient so it’s so much good example sometimes it’s happened that
color is not looking good there’s so much component so it is so hard to
manage all things simply what you can do okay I need to change the color like
this okay fine example any color of whatever you want okay this is looking
good so now you will notice a small icon over here if we will click on this it
will it will reflect across your all element like example this if I click on
this now you can see and here also it is so much powerful and the second thing I
use symbols symbols are so much powerful once again so simply I cream first I
create this style second I create symbol so example my color and primary so I
have a symbol so I can call this symbol or I can call my style it’s amazing same
as my fonts my preferred typography different style of font and I easily
create the textile over here just click on this and click and just paste and
like large that’s large or whatever you can call so now
you can see I have a I have a typography inside typography this is a to folder
further its default which is all fonts and like black parts and the white one
has white font style so now again it saved my a lot time example I have
some some text over here I need to change and I have my branding simply a
go title style like this this is my content fine and this is my label like
so much quickly I have done this job example I need to change this font size
of my content I did 18 and if I click on this it will be update if I want to
restore this value just brace the Alt key in your keyboard and click so right
now I I want to change this value this killing and it will reflect also here so
now you can see it is 18 it’s amazing and the third thing is icons in symbols
so I almost make all icons and two symbols so it is so much helpful and I
easily change everything so example example I have my font over here and I
insert the symbol like icon like camera so this is my camera icon and simply I
can replace the icon from over here and there is of one tricky way if I create
new symbol of my all object what will be happy so just click on this and create
this symbol like list so it will overwrite my symbol inside this symbol
so what is the benefit of this so simply I can change all I can from here so you
can see it’s amazing also I can change the font like this all
like camera videos so it is so much easier so one
more tip guys for you I use so much symbols and I have a something some
tricks over here let’s suppose I want to change the color of my icon and I don’t
want to do again in again so what I can do
so this a simple trick that open your icon whatever you I can you have and
find out your icon like camera icon and inside this I can you have to override
this symbol so just go to symbol go your brand color and whatever color you have
to select it and just during resizing company and now select both values and
click on marks so now you can see it is masking when you will click on your page
you will find new value over here so now you can see so much good if you will
copy this and you want to you want to keep the default value so you can you
have to click on done for thing is a project management it’s very important
tasks so how do i project manage so I just create the folder assets inside
asset I have a band house like images I curse and I have other a third folder so
one folder I have like delivered and done whatever you can call this like I
have delivered the first design to design wireframe whatever I can collect
the all documents one by one as a folder one folder like I got inspiration in my
folder so let’s suppose if I inspire from somewhere like three ball printers
and any other and I can click I just click this snapshot and just put inside
this bration folder it will help with future or while I’m working there slice
and this is my final project file so I hope you learn a lot and you’ll learn
about the management so how things are working and how you can manage your
things if you are beginner so my gate will help you a lot and it was my way to
design things so I almost organize all things into symbols styling and I I do
mean so much overriding symbols I do almost everything overriding in symbols
hope you’ve got lots of material from this video and if you like this video
please hit the like button or if you are still vo and you watching me my smiling
face so please hit the red button that button please hit the like button
subscribe my channel I’m coming with lots of video guys if you want to stay
tuned with me just hit the subscribe better again and support me and thank
you so much for watching this video see you soon in the next video

13 comments

Leave a Reply

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