Live Lesson: Mobile First UI Design with Sketch 40


Hi everyone, welcome to today’s
live lesson with Adam Rasheed. We are going to be learning
some serious Sketch stuff. So we’re going to be jumping
into a lesson in mobile user interface design using sketch and
the latest features and updates. So we are joined by Adam Rasheed, who is going to take us through this
design in the one hour session where he will be teaching us how to use Sketch
and build this wonderful design and then you can then start answering your
questions for Adam in the chat area, which is located on your right if you
are viewing this right here on WebinarJam. Then, yeah, start fielding your questions. Say hi. I’ll be manning the chat room. So feel free to filter any
questions over to me, or field them over to me, and
I’ll get them through to Adam. So that’s the way that this works. So welcome and
let me know where you’re all coming from. I’m in Australia,
Adam’s in the United States. So let’s see how far we
can get in this webinar. All right, so now I guess I’ll
introduce you Adam, say hi. Hey guys, how’s it going? My name is Adam Rasheed and
I am a freelance developer and designer, and I just released a new
course on Sketch 4 on SitePoint so, here to show you how Sketch works. Excellent. So, can you give us a little bit of
information about what you’re going to be covering today’s live lesson. Yeah, sure. Let me actually pull up my
screen to show you exactly what I’m going to be working with. Well, in this live lesson we’re going to
be covering how to create a mobile user interface in Sketch. If you’ve signed up for the webinar,
I’m guessing you know what Sketch is. For those of you that don’t, it’s an amazing UI tool built from
the ground up for user interface design. And what I’m going to be
covering in this lesson is, I’m going to be going over how to
create the mobile screen size for this blog I created for
the Sketch 4 course we just released. So this looks a little intimidating but
we’re going to break down exactly how to create different
text styles and shapes and use all the features in Sketch that
help us to really speed up our workflow. So this is the finished file, but
we’re going to start off actually with our wire frame, and
wire frames are exactly that. They’re like the blueprint of your design. So I I created these during our course and we’re gonna be working off of these and as
you can see it’s just text and lines and different kind of placeholder images
just to give us an idea of the layout. Now when creating a user interface in
2016, you wanna make sure you design mobile first because over 60% of all
traffic is coming through a mobile device. So you want to keep that mind and really
make sure mobile design is a big priority, and then you work your way up
to tablet and then desktop. And what we’re gonna do is
we’re gonna dive right in and get started by creating a new page and
calling it design. Now we’re going to press
a to create an artboard. Press iPhone 7, cool. And let’s just drag out
the height real quick. So what we’re going to do now
is to set up a good layout, and Sketch is amazing with it’s layout and
grid features, because when you’re creating any type
of visual design, even in graphic design you want to work off of the grid or
layout to really make sure you have a unified design that like just looks
right and has some uniformity to it. So we can go to layout settings and
let’s do a four column grid and we want a gutter width of thirty pixels,
and the reason for that as I love creating my designs
off of and eight pixel grid. That allows me to really scale up and
down the components, and elements I want in a really uniform scale,
based off of an eight pixel grid. So, 32 is a multiple of eight,
and it works really well for us. So let’s take a look at
the wire frames again, and see exactly what we’re
going to be creating. So this is a blog that I’m actually
developing on my own, on the side, and it’s going to be for freelancers and
it’s really going to show freelancers how they can switch over from a nine to
five job to full time freelancing. And I want it to be a resource for
exactly that demographic and have content that really helps people
looking to transition over to freelancing. And the way I want to do
that is with the blog and have helpful articles that teach
you how to do exactly that. So I designed this blog and I wanted to really focus on the content,
not so much on fancy graphics or images, so we have exactly that, we have
different blog articles right here, we have the logo right here,
the hamburger menu icon right here. Underneath that we have different
categories we can select from. And your social media icons as
well as resources, widget and popular posts and
I’m going to be creating e-book as well. So we’re going to have little section for that, as well as an email opt-in area
where they can sign up to an email list. And then your footer, and that grows
into a traditional main area and then a sidebar area layout once you increase the screen size to a tablet,
and then a desktop. Then after the course was over,
actually went back and kind of rethought the design. And since I really was
thinking of mobile first, I thought that having the categories
you could sort through all the way down here
didn’t really make sense. So, I brought them up here and
created this pick-a-category area. So when you’re on your phone you can top
this and these categories slide down, and then you can pick it and then it filters
out all those blog posts in that category. For instance, if you tapped on business
you’d only see business articles, So, that in mind, we’ll actually create
that new layout that I’m working on. So, well, let’s dive right in and
start creating these icons. Sorry UI elements. So we’re starting up pretty simple. It’s just gonna be the logo and
then the hamburger icon. So let’s go to our design page. Hey, Adam. Yes. Sorry to interrupt. I just wanted to know. Do you have these files
available anywhere or will you be making these files available
anywhere for after the live lesson? Yes, I will be. First of all,
they are included in the Sketch course and I can email you the zip file with, first
of all the icons here that I am using, and most of these are open source assets,
so I’ll tell you exactly where to get them online in case
you don’t wanna download this zip file. And then as well as the stock photos that
I’m using, these are all open source, have an MIT license which allows you to
use them for whatever purpose you want. Excellent, all right. So for those who have registered, you’ll have a follow up email
with all of those links included. Okay, excellent. I’ll let you get back to it. Bye All set, thanks. So let’s start with the logo. So in this file,
I already have the logo set up. So we’re just gonna go here and
just copy this, Cmd+C it. And of course this will
be included in the file, so we go back here and
we just Cmd+paste it. And next up we’re going to
be using this navicon icon. Now the source I got these
from are ionicons.com, it’s the icons needed for
the ionic framework. So you can go to ionicons and
then download these. And then they’re they’re all open source,
as I mentioned. And I took the time to find the ones
that worked and pick them out. So for the sake of this tutorial,
we’re not gonna spend time looking for the perfect ones cause I
already found them here. But when you’re designing
a project on your own, you wanna really make sure that you pick
the right icons for the project at hand. So we can just drag this in. And you’ll see it’s pretty big. So what we’re gonna do is size this down,
right here. To make sure that this lock icon is on,
that makes the proportions locked in. So we’re just gonna do 16 height and
unlock this. I like keeping things in pixel grid, and I don’t like having sub pixel sizes,
because one, it doesn’t really look right, and
two, when you export it as a PNG or anything that’s not an SVG,
it turns out really blurry. So yeah, you can since it’s a hamburger icon, it doesn’t
really need to be exact proportion. So you can make it fit to the grid
that you’re working with. Now we’re gonna press R for a rectangle,
and create this kinda background for it. And then we can press Cmd+option down, and once more to make it jump
all the way to the back. What we want to do now is make sure
that we have the correct spacing. And how I’m checking the spacing out is
just simply hovering over the item I want, and pressing down option. This is one of my favorite
features of Sketch. And we wanna size this to where
it’s 16 pixels from every side. And instead of having to drag and
drop like this, you can actually press down command,
and press up, and go up by one increments. Between 20. This is looking good. What we can also do now
is make this white. And go here and press Cmd+R to rename it. Suppress the background, Ibercon. Let’s clean this up as well. I I like organizing as I go along. And I’m pressing Cmd+Shift+G
to ungrip these. Now I have these three rectangles,
I can press Union and it’s shape now, call it navicon. And what we can do is simply select
these three items that we have, and we can create a symbol,
call it “Header”. And what symbols do is,
they allow you to repeat a lot of different
elements in your design. For instance when you’re creating
something like a user interface, with multiple screens. Instead of having to copy paste or even just create the same element over and
over again. You can just simply create a symbol and
then,say it’s another screen. We can just simply go to
Insert>Symbol>Header>Mobile. And have it right there. And this really makes things convenient. And it’s a great feature that Sketch has
it that I haven’t really seen any other other UI tool have yet. So we have our header now, and let’s go back to the blueprints,
or the wire frame’s page. Instead of having to press this and
go up, we can actually press FN, which is on the bottom left of your
keyboard, and up to jump pages. And we’re back at our wireframes. Now what we have here as far as the blogs
go is a featured blog post which is bigger and more prominent than the others, and
then a handful of blog posts below that. And then a Load More button,
which loads more. Instead of having a pagination, where
it’s one two three next, type of thing, you can just simply load
the next batch of blog posts. And that helps to create
a really good user experience. So, let’s take a look at what
the different parts are of a blog posts. We have the category up top,
the title, and underlined, the date, and
the number of comments in it. So you’ll see that these
are all different titles. And the way I made these and
generated the data for these titles, is actually,
I’m using a great plug-in called Craft. You can Google “Craft plugin Sketch”. It’s made by the guys at InVision, which is a really cool prototyping app
that works really well with Sketch. You can go to Craft InVsion. And simply download the plugins. And you’ll see I already
have that up here. And it actually installs a manager for
you. And it actually is like four
plugins wrapped up into a one, as Data, Duplicate, Library, and Sync. We use the data plugin right here,
and to create these titles. And how you can access it is,
once you install it, you’ll see this craft plugin on the side right here, which
is actually quite a perfect place for it. You can go to Data, and
you have Custom, Web and JSON. Now custom is different, kinda pre-populated pieces of data
that the Craft plugin comes with. You can generate random names, headlines,
articles, dates, and so forth. I use headlines for this. You can actually go to live websites and
scrap data from there. And if you are a developer,
or working with developers, you can grab a JSON file and populate your
design with live data from your project, which is really fantastic. So let’s do that right now. Let’s set up one of these blog articles,
and then we can populate it with
different types of data. So let’s jump back to our design. And before we do that, actually I forgot,
we need to put an underline in here, so. Something here. And we’re going to go to the artboard that Header mobile is in, and we’re going to create an underline. Again press down option,
to, to see this spacing, we want it to be flush, so
it’s zero spacing and let’s do and a height of eight, let’s just make
sure that is the correct height. Perfect, and so just copy the hex code,
that’s actually height of 16. Another great way to manipulate
sizes is once you’re in the area to change the height, instead
of having to type in different things. If you want to double it just do *2,
there you go, and it’s really convenient and
then type in the X. And you have document colors and
global colors. Global colors are when you create swatches
and you add them to global colors, still show up on every new
Sketch file that you create. Document colors are specific
to this very document. So if you add this,
it will only show up on this. Document when you open it up again so
I picked this nice blue color. Gonna use the same one here. And we have our header now. So we can go up here and
press or resize to fit and it’ll be exactly the size that
the content is in, within the Star Port. So let’s go back and
you’ll see that the symbol actually, reflected the changes that we made
in the very, in the symbols page. So, this is another great feature of
symbols, is when you make a change it will reflect it throughout every instance that
the symbol is being used in your design. So, let’s let’s work on
our featured blockbuster. So, we have to do
something like business and let’s talk about the typography now,
or the type tool. In this design I’m gonna be using
system fonts which come with your Macs. And I’m going to be using Helvetica Neue
and Georgia which are both system fonts. And we’re going to be using
this 4A4A4A color which is a really nice dark gray color. Just a quick rule of thumb when
you’re designing user interfaces. You don’t want to do just black and white
for text, it looks a little too stark. So you want to lighten up
the text color a little bit. If you’re going to be designing
on a white background. Let’s go back to the design and
see what is this all about. So, we have a category and
you’ll notice that it’s small. And we have a 14 pixel size and
a 16 pixel line. So, when you’re designing on an 8
pixel grid, like I mentioned, you can have the size be whatever you
want, but as long as the line height is within the pixel grid that you’re creating
in, it usually aligns it pretty well. So we have our 14 pixel size and
our 16 pixel line height. Just pretty cool and
let’s go regular, do new text style. I’m working off of the already
created text style, but if you are creating
your design from scratch. You can go down and create new text style,
and you can have it be whatever you want. But for the purposes of this design
you already have a category business. You’ll see we’re using
that blue color again and it is fourteen pixels size and
sixteen pixels line height. And now let’s let’s focus on our heading. So this is where we can go to
the Craft plugin, go to Heading. And let’s do technology. It’s a pretty dated headline. Make my space your best design space. So another one. Okay. That doesn’t look as dated. So let’s pull this up and
make sure it fits within our layout. Perfect and let’s take a look at our design again and we have H1 mega mobile. So, H1 mega mobile. See, it’s Helvetica Neue,
and it’s bold, and it’s 32. And we can actually change,
let’s change the light height here. Let’s make it 40. And I believe this should
be how this looks flushed. Okay, so let’s pick a new headline. This is a little too wordy for us. Perfect. Okay. And underneath that let’s take
a look at our wire frames again. We have this title and then we
underneath that we have a banner and then we have our metadata which is
our post state and the comments. So let’s go back. Believe this should have sixteen pixel,
and it looks good. Sixteen and eight. Okay, cool. Again when it try to work off
of a eight pixel grid and it starts to look really nice. And we can go here and I want this to be
the same color as the category color. So, essentially in the design, you have
a different color for every category. For instance, you have business which is
blue, you have your podcast which links to the podcast and that has actually
a white color with a blue background. Marketing which is red lifestyle
business again creativity, and so forth. So wanna keep that in mind. Go here and we have a banner color or
category business. Let’s see 16 believe it’s eight,
double check, or two actually. That’s two and 16 and then 8, perfect. So you can go here, add 2. And make sure it’s 16 pixels down,
perfect. And let’s create the metadata. This is,
we’re gonna be using these icons again. So let’s bring in the clock SVG, and it’s a sound, its 16, perfect. Maybe eight pixels away. Perfect and let’s ungroup these. Perfect and union, not union. In fact perfect. Put clock renamed this banner, banner. So let’s change the color of this as well. Okay, great color, 9b9b9b. And this is where we’re
gonna start using Georgia. So, let’s do something like Better, right here. So, you can see it’s a Georgia font,
and it’s regular, and it’s 16 pixels, and
it’s the same 9b9b color. So, make sure it is 8 pixels down. And it’s perfect. So, what we’re gonna do here is
we’re gonna turn this into a symbol, call it icon-clock. And we’re gonna use our data
right here to generate dates. So, let’s do, perfect. Being from the US,
this format bugs me, but it’s fine. And we’re gonna also do the same thing for
our comments. But the comments doesn’t need
to be created from the craft. It can just be a comment,
just a zero comments. So, go here and do the same thing. 16, we’re aligned this,
we know where it is, perfect. And undo, and again, go here and create this, perfect. Make sure it is aligned well. Perfect. And we’ll create a new area, comments. Meta, perfect. A new symbol from here as well. Call icon. Perfect. So what we’re going to is work this simply by selecting all these and
pressing command G and call it. Post, featured-post actually, dash post. Now it seems a little trivial to have
to rename things as you go along. But when you’re working with a team or even prototyping this yourself later
in Vision or Frameware or whatever. It really helps to have organized
elements within their proper groups. So let’s make sure that
the order is correct as well. Perfect. And now, this is a new feature in Sketch,
we’re going to actually have resizing tools now that weren’t available when I
was first recording the course for this. So, what we have in our options, in our
tool belt is, stretch in the corner, resize object and float in place,
now by default everything is stretch, so when you stretch things like this, you
will see that the icon’s stretching out. The width for, the width containers for
the text are stretching out, and it just doesn’t look all that pleasant. So we can do is actually pin
different things to corners. Let’s say we want to pin this to a corner. That means no matter how we resize this, that icon is always
gonna stand the corner. And not get stretched out. It’s very cool. So let’s do that with this here as well. So if it’s not in the corner
such as this date. It’s going to find the nearest
corner which is right here and it’s going to try to pin itself to that. So we’re doing the same for this. And the same for this. Now, this we can allow to stretch as
well as this and other than that, it should work pretty well when
we resize it, pretty cool. Now, we have that. And let’s check out the size here,
I believe it’s 32. Let me double check though. Thirty two, yup. And now what we’re gonna do is actually
create the normal blog posts and we’re actually going to
leave out podcast for now. Because it’s just fast to create
the background in blue and then white over again. So we’re gonna focus marketing life
style creativity and so forth. So, let’s. And let’s simply copy this down. To that and then move this down. And then we we call it post,
let’s call it post one. Now let’s go to our data. We’re actually going to create new data. Gonna add item. Gonna add custom. And calls categories and type in business, marketing, life styles. Creativity. And we’re gonna save that. And we’re just going to press this,
and going to press new Headline. Technology’s fine, perfect. And we’re going to also
press state one more time. Okay. And what we’re going to do now is
go to duplicate, and vertical. Before do that let’s make sure
you have the sizing correct 64. So what duplicate lets you do is create different instances of
data that you’re creating with specific sizing or
specific spacing between each one. And the difference between doing this and
copy paste is it lets you create and populate new data with every instance and
with definitely every duplication. So let’s check this out. We will see that it created
a new title every time and it created a random category
from the list that I gave it. I know this the type
spacing is a little off but we can fix that it like really two
seconds, thirty seconds like but. Yeah.
This saves us quite a bit of time. The only thing I don’t like is it creates
a group for you and then masks that. So let’s delete this mask. And let’s ungroup this. Let’s work from the top or
from the bottom up. This is a shorter headline. All right, that’s good. Perfect, and working is, Perfect. And you can do that so forth by actually
apps that’s ready for you guys. And this is what it looks like. So let’s just copy this and paste that in. Is copy. Go back to our design. Get rid of this. Simply paste it. Paste that correctly. Perfect. And we want this to jump to the top. So we can press Cmd+Option+Ctrl+up and
it’ll jump right to the top and we can do the same with the header. So are there any questions so far? So no questions on our front. But what I did find interesting is,
I’ve taken a couple of polls. And it seems as if 38% of our audience have learned how to use
Sketch through our content. So whether that’s a book or a course. Maybe it’s one of your courses, Adam. Or maybe even articles. So that’s really interesting to hear. Now, 27% are saying, or 33% it’s
switching now, are actually saying that they’re learning how to use Sketch
through this live lesson here right now. So good on you. Nice.
Yeah, that’s really good. Actually that’s increasing
now as I’m speaking. 21% have just kinda winged it. So I’m curious,
how did you learn how to use Sketch? Well, I learned Sketch
at a very good time. I was looking for a way to really increase my toolbelt of design. I was a developer first so
I designed with code, with HTML, CSS, but I wanna do some gradient stuff
that I’d couldn’t do in CSS3 yet and whole bunch of things. And I somehow found out about Sketch and I got a trial and
I really picked it up within an hour. I think that’s why a lot of people
are already learning Sketch in this live lesson is just it’s built from
the ground up with UI design in mind. And before this,
you actually just had Photoshop and I believe you have Fireworks, but
more people used Photoshop for UI design. And it’s not meant for UI design,
it’s meant for photo editing. So you had to do a lot of work arounds,
get a lot of plugins and extensions to make it kinda hack
it together to produce UIs. But this is such an incredible tool. It just helps you right off the bat. And you can figure out within an hour or
so. And get right into it. And really focus on your design. And not let bad design get in the way. You can really just focus on
what you wanna create and this helps you extend your
reach of design skills. It’s really cool. Excellent, excellent. Yeah.
Now, we have one question in that time. Rene wants to know in your design. Why did you get rid of the long headlines? What’s your thinking behind that? Well, I was thinking that I wouldn’t
create long headlines myself. I more or less wanted these generated
headlines as placeholders for actual headlines I’d create. If you were creating for a client that
you didn’t know the content that you would be creating, you would design for
the worst case scenario. Meaning, the kind of 60 character
long headlines that you saw could be a possibility then you
would throw those in, but for me, I’m gonna be the one developing this. So I know exactly the type of
content I’m gonna be creating and that’s just the personal
reason I didn’t do it, yeah. Excellent, so do you have a preferred or recommended character length
when it comes to heading sizes? Yeah, actually,
you can look up SEO best practices, but SEO-wise,
you don’t wanna have it too long. I would say character length or
word length, 10 to 15 words is good for
SEO ranking purposes. Aesthetically, I like
shorter length sizes. The Flash Tutorial, this wouldn’t
be a great SEO article headline. But it looks good in the design and
that’s the kinda key difference you wanna keep in mind when
you’re designing sites for a client versus when you’re
designing stuff for your portfolio. For your portfolio,
you can have aesthetic first and then for a client you wanna make sure,
excuse me, you are being realistic in the type
of content they’re gonna be creating. That answer your question? Yeah, it does. And now, we’ve got a new
question from Bobby, as well. He’s asking, Adam, is CSS exported
from Sketch generally usable as is or do you have to do some additional work? Well, that’s a great question actually,
I’ve used CSS exports from Sketch, but I don’t use them in
the way that they export it. Let’s just do a quick example,
let’s do a gradient real quick. Oops. All right, so we have this gradient. This actually looks pretty good. So let’s rename this,
call it background, Gradient. So what we can do is we’ll copy the CSS
attributes, we’ll open up a text editor. And let’s see,
this is already a project I’m working on. So you can just press Cmd+V, and
you’ll see that it creates a note for you. Background gradient. And then, background image and it shows you this CSS3
property of Linear Gradient. And if you have Brackets installed, it actually gives a cool little
preview of what it’s gonna look like. So I don’t really keep this note in. I just use this background gradient. And then I’ll copy it, and add it to whatever elements need to
have that type of gradient background. So yeah, it is helpful, but
I don’t just blindly copy paste it. I’m very particular about
what part of the code I use. Excellent, and you know,
because you come from a perfect split. Of where you were developer previously and
you are now a designer or you also work with design. What is it like using Sketch? Are there any benefits in Sketch
that you would like to highlight to the developers or make designers aware? So that when they are working with
developers, they have little things that they can do to the designs to make it
easier for a developer to recreate. Well, I think Sketch is actually
really good out of the bat to be developer friendly. The biggest thing is, the size,
the distance and the measuring tools. With things like Photoshop,
it’s really hard to measure. And you’d have to really send a Word doc of all the measurements
between your elements. But send a developer a Sketch
file they can just go in and press Option and know the exact
measurements and the sizing. And like we just covered the CSS
attributes if they wanna be really lazy they can just copy
the CSS attributes for every element. Other than that, I like that they
have a very good layout tool. And universally, almost, if you develop or if you design around a 12-pixel grid or
12-column layout, which breaks down to 8 columns on tablet
and then 4 columns on mobile, like so. Developers can use popular frameworks
like Bootstrap or the Zurb Foundation or Bourbon Neat which all have 12
column layouts as a default. So, it’s really easy to
develop them right there. But the then again that’s all design. So you wanna make sure that you’re
designing with good practices in mind. And the actual program that you’re
using like Sketch should be able to allow developers to come right in and
not have to worry about learning it. Just know that they can use option and
check out the distances. And press command, and click to go
through groups like I’m doing right here. This is a group. But if I command click an element, it’ll
go right into that layer as you can see, and then you can check out
the different distances from there. So as long as you have good
communication with your developer sketch is honestly one of the best
programs to hand off to a developer, too. Excellent, all right. So, there are 15 minutes
left of this live lesson, so I’ll let you get back into your design. Now, for everybody else that’s watching,
send through your questions because I’ll interrupt Adam in the last five,
ten minutes, something about there. And field your questions to
make sure that meet the block. All right, I’m going, I’m muting. Awesome, thanks for
the questions so far guys. Yeah, like into I mentioned
just shoot over question and I’ll be happy to answer
during the end of the course. For now let’s finish off this project. So we have these right here and then we have a load more button
now that we need to make. Let’s just simply create that,
press T type in Load More. And this isn’t part of the design but I wanna show you a new feature of
sketch which is text transform. This is a CSS property as well and you can
transform it to uppercase or lowercase. All through the styling not
to the actual typing out your upper case or lower case characters. So if I turn this off or turn this to lowercase it will change
all that which is really cool. So let’s do that,
we’re gonna center that up. Let’s see if we have a text style,
button text. Okay cool we have that, but before we
do that let’s create the actual button. See, it is 56, perfect. And we can and
create a new shirt to call it button blue. The way I’m getting this glow gradient
here is actually I’m using the shadow tool without a blur. So it gives us almost this kind
of border type of look and feel. So that below here and button text
perfect and let’s center this up. Select the two and center this up. Now since we have this little border here
we’ll need to make this go up a bit. Looks good. Press Ctrl L to turn off the layouts. Looking good. That’s much better. Okay, so what we can do here is create
a symbol again, call it button blue. Go to the symbol, and make sure
that this text is float in place. And what that does is it
literally floats in place, so you can mess around with the size
of the button all you want. And what we’re going to do
now quickly is we don’t have too much time to cover this area, but
we will copy this pick a category. All of these and shift. A shift down to move them. And just simply put this here,
center this up. It is, By the way, I’m using big nudges
which is pressing shift and up. And you’ll notice that it’s actually
moving in increments of 16. The reason for
that is I have a plugin called Nudg It. You can Google Nudg it. And by default the big nudge is 10 pixels, I changed it to 16 so I can work
with an 8 pixel grid much easier. And then you press apply, and
changes it that way, it’s pretty neat. Cool, we have that, and
let’s focus on creating one of. These areas right here so
it’s the resource tool. So let’s check that out. You have also notice that there are a lot
of override options for symbols. So, for instance, we have this right here. Maybe I don’t want it to say resources. Maybe I wanted to say free eBooks. Enter and
you’ll see that overrode a symbol. So this is a really cool option for
instances where you want to have something that looks similar but
has slightly different content. So instead of, say yeah, so go to resources, we can do eBook, perfect. That’s really cool option, too. So let’s go to the actual symbol. We have this resources. Which is a group has the banner. Had all the copy, the button, and a resources area and
a background image and a porter. So let’s make that an our
document from scratch. [COUGH] So let’s turn up. On r, r is simply a rectangle, press 0 right here, 0. Okay, and rip, call it, All the way down. And C, Cmd+V will create an overlay. And before you do that,
before we put the image in, let’s just create a title for it. So H2 and H3 white. This is two pixels. And we can can turn on our layout. Perfect, and
make sure it’s 16 pixels away. Perfect, and create our, Make sure it’s light. Copy this right here. H3 white. Perfect and we just simply
need to create a new button. So we’ll just use our symbol that we
just created and put that in here. And we’ll give that, Let’s do 40. 40 looks much better. This is where we can use our
override again to resources. Looks like. [INAUDIBLE] It looks good. Now we can add our image. So we’re going to be using this image. Let’s copy that,
put that in here by pressing Cmd+V. See that it’s huge. So what we’re going to do now is put
that between the overlay in the mask. I go to mask, right click and press Mask. Turn off the visibility for overlay, you’ll see that it’s limited
to this containing mask. So let’s scale this down,
this is much like Illustrator, Photoshop option shift,
to scale this down uniformly. Perfect. And what we can do now is we can actually
go here, and go to Gaussian Blur. Turn that on. We get a nice blurred background. We can go Overlay and
see if we have an overlay area. If not,
we can just simply go to our to design. We have an overlay right here,
which is 60%. We can actually do a little bit
better make it less gray or black. We can do straight up black and do something like this. Now we can actually go to blue and
type in. That looks much better,
now it has a bluer tint which kind of creates a better looking,
more uniform design. And go back here and
increase the blur a bit and there you go. And let’s see if we’re missing. We’re gonna skip this cause
this is essentially the same what we’re gonna do now
is create Popular Post. I’m actually just going to copy it and
then show you how exactly I made it. Okay, so
we have just basic text right here and then we have H3 which is 16 but
it’s Helvetica Bold. And this is where it helps to, everything
is stretch so you can just simply, And one actually, so we can big
stretch it up big nudge stretch, just Cmd+Shift right and
it’s fully flush with the layout. And see if there’s anything
else we can show you how to do. So you can notice that I’m also using
backgrounds for areas like the footer even though it’s just the text right here we
have a rectangle or the footer background. Like this. Copy that and hide that. In your design you can and paste it and, So it’s SA symbol, footer. So, the benefits of saving the area that’s
gonna be essentially the padding is. Say you have something
like this right here. And let’s say you’re done with the design. You can simply go to your artboard and
press Resize to Fit and it will re-fit it to
the area that you have here. Now if I didn’t have this kind of
background area with all this white space. It would just cut it off to
the very end right here and that’s not a really good
looking way to end your design. Same principle applies to this header
that we made in the beginning. I noticed that I added a background and
when we resized the artboard to fit, it accounts for
this background that we made. And that’s really cool. And yeah, that essentially is how
I created the user interface for this design, and if you haven’t already,
make sure to sign up for the course for Sketch 4, and
you will get to see how I made the elements for the bigger design, bigger screen sizes such as the tablet and
the desktop, you’ll see I scaled up design sizes for
instance. Talk about scaling up typography. This is very design specific it’s not
really something that Sketch controls but you have to account for. You have to realize that when you have a
type that someone’s looking at on a phone, it’s gonna be much smaller than someone’s
looking at on a iPad or their desktop. A good way to systematically
do this is you can check out resources like Type Scale. And what that does is it gives you
a really good guideline to follow. And the bigger your screen size, the
bigger you can make your Type Scale for instance. Say we have a desktop size blog. This is using this 1.41
augmented fourth Type Scale. You’ll see that each next up heading
is much bigger than the last. This is H1, H2, H3, so forth. It doesn’t have to be this exact decimal. But you can round it to the nearest
number that makes sense. For instance, if you’re trying to round
this to the nearest 16 pixel grid you can you can do that, too. And the smaller your screen size gets,
the smaller you want to make your scale. For instance if desktop is 1.414,
you can do 1.25. You’ll see that the size
changes aren’t as drastic. This makes more sense for
a mobile screen size. Yeah.
Did you guys want me to cover anything else that you see
here that I didn’t cover? Yeah. I’ll interrupt you just here, Adam. We have reached our one hour limit. Let me just quickly field
four questions across to you, before we start wrapping up. Sure. First of all, Mike wants to know, do you
use symbols across artboard sizes, or different devices? Or do you create symbols for
each artboard? Well, I used to create different ones for
each screen size but now that Sketch 4, these are,
actually this is 3.9 I believe. They have resizing tools so
within a symbol now, you can say pin this to a corner and
you can, for instance if you don’t want
to have different content, so for instance the tablet actually
has all of the menu links laid out. But if you had the same sort
of format as your mobile, you could simply just,
I’ll create a one right now. Header, mobile. You can simply do this and
just drag it out. And it would make sense if
you positioned it right. For instance, you have to pin this
to corner so it doesn’t stretch. You can do things like this. It really makes it easier for
you to change it and adapt it to different screen sizes. The only thing that you would wanna create
a new symbol for is like I mentioned, when you change your content within
a content format within the symbol. Excellent. All right so right now Bobby wants
to know are there any plugins that can automate vertical rhythm of
text element given a base unit? A number that I’m aware of and
the ones that happen now I’ve tried messing with them and
it gets a little too fussy. I would say use the type scale
I showed you as a guideline. And then fit it into your grid. And something I didn’t
mention as much is you can control your vertical rhythm by pressing
Ctrl+G, which is your actual grid. And you’ll notice that
you can do things like. Just fit it to exactly your grid, and of course you can change
the grid settings here. You’ll see that I have
an eight pixel grid and I think I’ve been preaching
all live lesson long. And you can make sure if it’s nice and tidy within your design, and
establishes a good vertical rhythm. But as far as like exact dimensions go,
it really depends on your project. For instance, if you’re working on
something that’s more typography heavy like this, you wanna make sure
that your text really stands out. In that case, use a larger type scale
like I am, or if you have something where the text is secondary and
you’re focusing more on designs and illustrations, then it doesn’t
need to be as large necessarily. And yeah, it really is a more, it depends. Question whether or not. What exactly your type scale should be. But to answer your question, there’s no
specific plugins I can mention right away. Excellent, all right. Melissa wants to know when
organizing symbols and type styles using the forward slash,
what groupings do you find works best? What I like using is for different states,
I’m coming from a developer background, I have just the regular one
right here as you can see. And then you’ll see I have
different screen sizes and then whether or not it’s centered. And that helps break things down. And then the thing I use a dash for
is when it’s a different color, such as white, so you can do H2,
this is a perfect example. You have regular H2 right here and
then you have H2/center. Then you have H2-white, and
then you have H2-white/Center within that. And that’s what works best for me and
if it works great for you then feel free to use that but if you find something
better, make sure to use that and let us know about it but this is what’s been
working well for me for over a year now. I’ve been sticking to that. Sorry, I was starting to ask the question
and I didn’t realize that I was on mute. All right, so the last question was from
Mina, I feel like you may have already answered this, but maybe there’s
something that you can add to it. She wanted to know why are you leaving so
much space between element groups? Is it just looks spaced out, or
is there a technical reason for this? Well it’s both. Good design is problem solving, and there’s a lot of reason behind
different decisions people make. Using white spaces universally
a very good thing. Especially in UI design where you don’t,
well where pixels are free. The more something is spaced out
the more attention you can give it. When you’re looking at it. If this is all bunched up. First it would look like one big thing and
it wouldn’t look as nice. And it would look messy. Now that they’re spaced out you
can actually go through it, and see that there,
see the different hierarchy between them. And you’ll see that, the more something
is closer, or the closer something is, the more it belongs to that group. And the closer it is in the vicinity, the closer you see it in your mind and
you associate it with that. So you’ll see that the metadata below and
the category above is close to the title. But the actual groups
themselves are far apart, because you should be able to discern the
difference between the different posts. And as I mentioned,
you can give each different post a little bit more attention,
so you know where to tap. And that’s the reason I like using
like space between different elements. Excellent, so for everybody that’s
attended, thank you very much. I love that everyone comes from
all different parts of the world, some of these countries I’ve been
to myself, so I really miss and love it when I hear that
you come from those places. All right, so, thank you Adam for
giving us such a nice detailed lesson on creating your UI design for,
I think the blog was freelance job? Yes. Yes, all right, cool, so hopefully we’ll
see those changes live on your site soon. Yeah. Yeah, I hope you really
learned something from this. Feel free to send me a message on Twitter,
it’s @__angelamolina, or hit Adam up,
Adam what’s your Twitter handle. It’s @arasheedphoto, so Adam,
A, Rasheed and then photo. You can hit me up and
ask anything you want, and I’m pretty good at replying
right away- Excellent. So thanks again for having me,
Angela, appreciate it. And I hope you guys found this useful, and
thanks for giving us an hour of your day. Yeah, definitely. So you have all registered,
everybody that’s here watching this live. We will send you an email with an update of where to find this video live
just in case you wanna watch again. We’ll be writing up a couple of
things about it on SitePoint. Now, Hector, you asked if whether we’re
gonna write about the attendance. Maybe not so much the attendance, but definitely a recap on what
we’ve learned from the session. So look out for that on SitePoint. If you have any suggestions,
if you have any feedback, you know how to find me on
Twitter @__angelamolina. I’m at SitePoint, so
thank you very much for attending, and I love the little
things that are coming in. Thank you, Bobby, thank you, Nadia. Hopefully we catch you soon, and
if you want to learn more about Sketch, I’ve sent a link in the chat room, which
has a link to all our Sketch content. So that’s articles, books,
and the course, obviously, check out the course on SitePoint Premium. It’s User Interface Design with Sketch 4,
so, it has been updated to Sketch 40, and
includes all the new features as well. Apart from that, I think you can even
download a Sketch cheat sheet right now, if you go to SitePoint.com, so
look out for that, it’s free. So, anything to help you learn, anyway so we’ll see you at the next live event and
thanks, catch you around. Thanks guys. [NOISE]

2 Comments

Add a Comment

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