mobile web app ui design
hi everyone, welcome to today'slive lesson with adam rasheed. we are going to be learningsome serious sketch stuff. so we're going to be jumpinginto a lesson in mobile user interface design using sketch andthe latest features and updates. so we are joined by adam rasheed, who is going to take us through thisdesign in the one hour session where he will be teaching us how to use sketchand build this wonderful design and then you can then start answering yourquestions for adam in the chat area, which is located on your right if youare 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 anyquestions over to me, or field them over to me, andi'll get them through to adam. so that's the way that this works. so welcome andlet me know where you're all coming from. i'm in australia,adam's in the united states. so let's see how far wecan get in this webinar.
all right, so now i guess i'llintroduce you adam, say hi. hey guys, how's it going? my name is adam rasheed andi am a freelance developer and designer, and i just released a newcourse on sketch 4 on sitepoint so, here to show you how sketch works. excellent. so, can you give us a little bit ofinformation about what you're going to be covering today's live lesson. yeah, sure.
let me actually pull up myscreen to show you exactly what i'm going to be working with. well, in this live lesson we're going tobe 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 fromthe ground up for user interface design. and what i'm going to becovering in this lesson is, i'm going to be going over how tocreate the mobile screen size for
this blog i created forthe sketch 4 course we just released. so this looks a little intimidating butwe're going to break down exactly how to create differenttext styles and shapes and use all the features in sketch thathelp us to really speed up our workflow. so this is the finished file, butwe're going to start off actually with our wire frame, andwire 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 asyou can see it's just text and lines and
different kind of placeholder imagesjust to give us an idea of the layout. now when creating a user interface in2016, you wanna make sure you design mobile first because over 60% of alltraffic is coming through a mobile device. so you want to keep that mind and reallymake sure mobile design is a big priority, and then you work your way upto tablet and then desktop. and what we're gonna do iswe're gonna dive right in and get started by creating a new page andcalling it design. now we're going to pressa to create an artboard. press iphone 7, cool.
and let's just drag outthe height real quick. so what we're going to do nowis to set up a good layout, and sketch is amazing with it's layout andgrid features, because when you're creating any typeof visual design, even in graphic design you want to work off of the grid orlayout to really make sure you have a unified design that like just looksright and has some uniformity to it. so we can go to layout settings andlet'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 designsoff of and eight pixel grid.
that allows me to really scale up anddown 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 atthe wire frames again, and see exactly what we'regoing to be creating. so this is a blog that i'm actuallydeveloping on my own, on the side, and it's going to be for freelancers andit's really going to show freelancers how they can switch over from a nine tofive job to full time freelancing. and i want it to be a resource forexactly that demographic and
have content that really helps peoplelooking to transition over to freelancing. and the way i want to dothat is with the blog and have helpful articles that teachyou 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 havedifferent blog articles right here, we have the logo right here,the hamburger menu icon right here. underneath that we have differentcategories we can select from. and your social media icons aswell as resources, widget and
popular posts andi'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 areawhere they can sign up to an email list. and then your footer, and that growsinto 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 wasthinking of mobile first,
i thought that having the categoriesyou could sort through all the way down heredidn't really make sense. so, i brought them up here andcreated this pick-a-category area. so when you're on your phone you can topthis and these categories slide down, and then you can pick it and then it filtersout all those blog posts in that category. for instance, if you tapped on businessyou'd only see business articles, so, that in mind, we'll actually createthat new layout that i'm working on. so, well, let's dive right in andstart creating these icons. sorry ui elements.
so we're starting up pretty simple. it's just gonna be the logo andthen 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 filesavailable anywhere or will you be making these files availableanywhere 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, firstof 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 caseyou don't wanna download this zip file. and then as well as the stock photos thati'm using, these are all open source, have an mit license which allows you touse them for whatever purpose you want. excellent, all right. so for those who have registered,
you'll have a follow up emailwith 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 andjust copy this, cmd+c it. and of course this willbe included in the file, so we go back here andwe just cmd+paste it.
and next up we're going tobe using this navicon icon. now the source i got thesefrom are ionicons.com, it's the icons needed forthe ionic framework. so you can go to ionicons andthen download these. and then they're they're all open source,as i mentioned. and i took the time to find the onesthat worked and pick them out. so for the sake of this tutorial,we're not gonna spend time looking for the perfect ones cause ialready found them here. but when you're designinga project on your own,
you wanna really make sure that you pickthe 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 andunlock 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, andtwo, 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'treally need to be exact proportion. so you can make it fit to the gridthat 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 jumpall the way to the back. what we want to do now is make surethat we have the correct spacing. and how i'm checking the spacing out isjust simply hovering over the item i want,
and pressing down option. this is one of my favoritefeatures of sketch. and we wanna size this to whereit's 16 pixels from every side. and instead of having to drag anddrop 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 nowis 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+gto 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 selectthese 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 differentelements in your design. for instance when you're creatingsomething like a user interface, with multiple screens. instead of having to copy paste or even just create the same element over andover again. you can just simply create a symbol andthen,say it's another screen. we can just simply go toinsert> symbol> header> mobile. and have it right there.
and this really makes things convenient. and it's a great feature that sketch hasit 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 andgo up, we can actually press fn, which is on the bottom left of yourkeyboard, and up to jump pages. and we're back at our wireframes. now what we have here as far as the blogsgo is a featured blog post which is bigger
and more prominent than the others, andthen a handful of blog posts below that. and then a load more button,which loads more. instead of having a pagination, whereit's one two three next, type of thing, you can just simply loadthe next batch of blog posts. and that helps to createa really good user experience. so, let's take a look at whatthe different parts are of a blog posts. we have the category up top,the title, and underlined, the date, andthe number of comments in it. so you'll see that theseare all different titles.
and the way i made these andgenerated 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 appthat works really well with sketch. you can go to craft invsion. and simply download the plugins. and you'll see i alreadyhave that up here. and it actually installs a manager foryou.
and it actually is like fourplugins 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, whichis actually quite a perfect place for it. you can go to data, andyou have custom, web and json. now custom is different, kinda pre-populated pieces of datathat 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 andscrap data from there. and if you are a developer,or working with developers, you can grab a json file and populate yourdesign 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 withdifferent 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, soit's zero spacing and let's do and a height of eight, let's just makesure that is the correct height. perfect, and so just copy the hex code,that's actually height of 16.
another great way to manipulatesizes is once you're in the area to change the height, insteadof having to type in different things. if you want to double it just do *2,there you go, and it's really convenient andthen type in the x. and you have document colors andglobal colors. global colors are when you create swatchesand you add them to global colors, still show up on every newsketch file that you create. document colors are specificto this very document. so if you add this,it will only show up on this.
document when you open it up again soi picked this nice blue color. gonna use the same one here. and we have our header now. so we can go up here andpress or resize to fit and it'll be exactly the size thatthe content is in, within the star port. so let's go back andyou'll see that the symbol actually, reflected the changes that we madein the very, in the symbols page. so, this is another great feature ofsymbols, is when you make a change it will reflect it throughout every instance thatthe symbol is being used in your design.
so, let's let's work onour featured blockbuster. so, we have to dosomething like business and let's talk about the typography now,or the type tool. in this design i'm gonna be usingsystem fonts which come with your macs. and i'm going to be using helvetica neueand georgia which are both system fonts. and we're going to be usingthis 4a4a4a color which is a really nice dark gray color. just a quick rule of thumb whenyou're designing user interfaces. you don't want to do just black and whitefor text, it looks a little too stark.
so you want to lighten upthe text color a little bit. if you're going to be designingon a white background. let's go back to the design andsee what is this all about. so, we have a category andyou'll notice that it's small. and we have a 14 pixel size anda 16 pixel line. so, when you're designing on an 8pixel grid, like i mentioned, you can have the size be whatever youwant, but as long as the line height is within the pixel grid that you're creatingin, it usually aligns it pretty well. so we have our 14 pixel size andour 16 pixel line height.
just pretty cool andlet's go regular, do new text style. i'm working off of the alreadycreated text style, but if you are creatingyour 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 designyou already have a category business. you'll see we're usingthat blue color again and it is fourteen pixels size andsixteen pixels line height. and now let's let's focus on our heading. so this is where we can go tothe 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 andmake 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 shouldbe how this looks flushed. okay, so let's pick a new headline. this is a little too wordy for us. perfect. and underneath that let's takea look at our wire frames again.
we have this title and then weunderneath that we have a banner and then we have our metadata which isour 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 offof a eight pixel grid and it starts to look really nice. and we can go here and i want this to bethe same color as the category color.
so, essentially in the design, you havea different color for every category. for instance, you have business which isblue, you have your podcast which links to the podcast and that has actuallya white color with a blue background. marketing which is red lifestylebusiness again creativity, and so forth. so wanna keep that in mind. go here and we have a banner color orcategory 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'regonna 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, andit's the same 9b9b color.
so, make sure it is 8 pixels down. and it's perfect. so, what we're gonna do here iswe're gonna turn this into a symbol, call it icon-clock. and we're gonna use our dataright 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 forour comments. but the comments doesn't needto 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. and we'll create a new area, comments. meta, perfect. a new symbol from here as well.
call icon. so what we're going to is work this simply by selecting all these andpressing command g and call it. post, featured-post actually, dash post. now it seems a little trivial to haveto rename things as you go along. but when you're working with a team or even prototyping this yourself laterin vision or frameware or whatever. it really helps to have organizedelements within their proper groups.
so let's make sure thatthe order is correct as well. and now, this is a new feature in sketch,we're going to actually have resizing tools now that weren't available when iwas first recording the course for this. so, what we have in our options, in ourtool 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, youwill see that the icon's stretching out. the width for, the width containers forthe text are stretching out, and it just doesn't look all that pleasant. so we can do is actually pindifferent 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 alwaysgonna 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 cornersuch as this date. it's going to find the nearestcorner 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 aswell as this and other than that, it should work pretty well whenwe 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 actuallycreate the normal blog posts and
we're actually going toleave out podcast for now. because it's just fast to createthe background in blue and then white over again. so we're gonna focus marketing lifestyle 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 alsopress state one more time. and what we're going to do now isgo to duplicate, and vertical. before do that let's make sureyou have the sizing correct 64. so what duplicate lets you do is create different instances ofdata that you're creating with specific sizing orspecific spacing between each one. and the difference between doing this andcopy paste is it lets you create and populate new data with every instance andwith definitely every duplication. so let's check this out.
we will see that it createda new title every time and it created a random categoryfrom the list that i gave it. i know this the typespacing is a little off but we can fix that it like really twoseconds, thirty seconds like but. yeah.this saves us quite a bit of time. the only thing i don't like is it createsa group for you and then masks that. so let's delete this mask. and let's ungroup this. let's work from the top orfrom 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 actuallyapps 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. and we want this to jump to the top. so we can press cmd+option+ctrl+up andit'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 usesketch 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'sswitching now, are actually saying that they're learning how to use sketchthrough this live lesson here right now. so good on you. nice.yeah, that's really good.
actually that's increasingnow 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 sketchat a very good time. i was looking for a way to really increase my toolbelt of design. i was a developer first soi designed with code, with html, css, but i wanna do some gradient stuffthat 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 andi really picked it up within an hour. i think that's why a lot of peopleare already learning sketch in this live lesson is just it's built fromthe ground up with ui design in mind. and before this,you actually just had photoshop and i believe you have fireworks, butmore 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 hackit 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 orso. 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 onwhat you wanna create and this helps you extend yourreach 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'tcreate long headlines myself. i more or less wanted these generatedheadlines as placeholders for actual headlines i'd create. if you were creating for a client thatyou didn't know the content that you
would be creating, you would design forthe worst case scenario. meaning, the kind of 60 characterlong headlines that you saw could be a possibility then youwould throw those in, but for me, i'm gonna be the one developing this. so i know exactly the type ofcontent i'm gonna be creating and that's just the personalreason i didn't do it, yeah. excellent, so do you have a preferred or recommended character lengthwhen 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 orword length, 10 to 15 words is good forseo ranking purposes. aesthetically, i likeshorter length sizes. the flash tutorial, this wouldn'tbe a great seo article headline. but it looks good in the design andthat's the kinda key difference you wanna keep in mind whenyou're designing sites for a client versus when you'redesigning 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 typeof content they're gonna be creating. that answer your question? yeah, it does. and now, we've got a newquestion from bobby, as well. he's asking, adam, is css exportedfrom 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 inthe 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 cssattributes, 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, andyou'll see that it creates a note for you. background gradient.
and then, background image and it shows you this css3property of linear gradient. and if you have brackets installed, it actually gives a cool littlepreview 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 tohave that type of gradient background. so yeah, it is helpful, buti don't just blindly copy paste it.
i'm very particular aboutwhat part of the code i use. excellent, and you know,because you come from a perfect split. of where you were developer previously andyou are now a designer or you also work with design. what is it like using sketch? are there any benefits in sketchthat you would like to highlight to the developers or make designers aware? so that when they are working withdevelopers, they have little things that they can do to the designs to make iteasier for a developer to recreate.
well, i think sketch is actuallyreally 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 measurementsbetween your elements. but send a developer a sketchfile they can just go in and press option and know the exactmeasurements and the sizing. and like we just covered the cssattributes if they wanna
be really lazy they can just copythe css attributes for every element. other than that, i like that theyhave a very good layout tool. and universally, almost, if you develop or if you design around a 12-pixel grid or12-column layout, which breaks down to 8 columns on tabletand then 4 columns on mobile, like so. developers can use popular frameworkslike bootstrap or the zurb foundation or bourbon neat which all have 12column layouts as a default. so, it's really easy todevelop them right there. but the then again that's all design.
so you wanna make sure that you'redesigning with good practices in mind. and the actual program that you'reusing like sketch should be able to allow developers to come right in andnot have to worry about learning it. just know that they can use option andcheck out the distances. and press command, and click to gothrough groups like i'm doing right here. this is a group. but if i command click an element, it'llgo right into that layer as you can see, and then you can check outthe different distances from there. so as long as you have goodcommunication with your developer
sketch is honestly one of the bestprograms to hand off to a developer, too. so, there are 15 minutesleft 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 tomake sure that meet the block. all right, i'm going, i'm muting. awesome, thanks forthe questions so far guys. yeah, like into i mentionedjust shoot over question and
i'll be happy to answerduring 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 buttonnow 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 ofsketch which is text transform. this is a css property as well and you cantransform it to uppercase or lowercase. all through the styling notto the actual typing out
your upper case or lower case characters. so if i turn this off or turn this to lowercase it will changeall 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 wedo that let's create the actual button. see, it is 56, perfect. and we can andcreate a new shirt to call it button blue. the way i'm getting this glow gradienthere is actually i'm using the shadow tool
without a blur. so it gives us almost this kindof border type of look and feel. so that below here and button textperfect and let's center this up. select the two and center this up. now since we have this little border herewe'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 createa symbol again, call it button blue. go to the symbol, and make surethat this text is float in place. and what that does is itliterally floats in place, so you can mess around with the sizeof the button all you want. and what we're going to donow quickly is we don't have too much time to cover this area, butwe 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 nudgeswhich is pressing shift and up. and you'll notice that it's actuallymoving in increments of 16. the reason forthat 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 workwith an 8 pixel grid much easier. and then you press apply, andchanges it that way, it's pretty neat. cool, we have that, andlet's focus on creating one of.
these areas right here soit's the resource tool. so let's check that out. you have also notice that there are a lotof 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 andyou'll see that overrode a symbol. so this is a really cool option forinstances where you want to have something that looks similar buthas 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 anda background image and a porter. so let's make that an ourdocument 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, andmake 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 simplyneed to create a new button. so we'll just use our symbol that wejust 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 ouroverride 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 putthat 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 limitedto this containing mask. so let's scale this down,this is much like illustrator, photoshop option shift,to scale this down uniformly. and what we can do now is we can actuallygo here, and go to gaussian blur. turn that on. we get a nice blurred background.
we can go overlay andsee 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 bitbetter make it less gray or black. we can do straight up black and do something like this. now we can actually go to blue andtype 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 andincrease the blur a bit and there you go. and let's see if we're missing. we're gonna skip this causethis is essentially the same what we're gonna do nowis create popular post. i'm actually just going to copy it andthen show you how exactly i made it. okay, sowe have just basic text right here and then we have h3 which is 16 butit's helvetica bold. and this is where it helps to, everythingis stretch so you can just simply, and one actually, so we can bigstretch it up big nudge stretch,
just cmd+shift right andit's fully flush with the layout. and see if there's anythingelse we can show you how to do. so you can notice that i'm also usingbackgrounds for areas like the footer even though it's just the text right here wehave 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'sgonna be essentially the padding is.
say you have somethinglike this right here. and let's say you're done with the design. you can simply go to your artboard andpress resize to fit and it will re-fit it tothe area that you have here. now if i didn't have this kind ofbackground area with all this white space. it would just cut it off tothe very end right here and that's not a really goodlooking way to end your design. same principle applies to this headerthat we made in the beginning. i noticed that i added a background andwhen we resized the artboard to fit,
it accounts forthis background that we made. and that's really cool. and yeah, that essentially is howi created the user interface for this design, and if you haven't already,make sure to sign up for the course for sketch 4, andyou will get to see how i made the elements for the bigger design, bigger screen sizes such as the tablet andthe desktop, you'll see i scaled up design sizes forinstance. talk about scaling up typography.
this is very design specific it's notreally something that sketch controls but you have to account for. you have to realize that when you have atype that someone's looking at on a phone, it's gonna be much smaller than someone'slooking at on a ipad or their desktop. a good way to systematicallydo this is you can check out resources like type scale. and what that does is it gives youa really good guideline to follow. and the bigger your screen size, thebigger you can make your type scale for instance.
say we have a desktop size blog. this is using this 1.41augmented fourth type scale. you'll see that each next up headingis 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 nearestnumber that makes sense. for instance, if you're trying to roundthis 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 sizechanges aren't as drastic. this makes more sense fora mobile screen size. yeah.did you guys want me to cover anything else that you seehere that i didn't cover? yeah. i'll interrupt you just here, adam. we have reached our one hour limit. let me just quickly fieldfour questions across to you,
before we start wrapping up. sure. first of all, mike wants to know, do youuse symbols across artboard sizes, or different devices? or do you create symbols foreach artboard? well, i used to create different ones foreach screen size but now that sketch 4, these are,actually this is 3.9 i believe. they have resizing tools sowithin a symbol now, you can say pin this to a corner andyou can,
for instance if you don't wantto have different content, so for instance the tablet actuallyhas all of the menu links laid out. but if you had the same sortof format as your mobile, you could simply just,i'll create a one right now. header, mobile. you can simply do this andjust drag it out. and it would make sense ifyou positioned it right. for instance, you have to pin thisto corner so it doesn't stretch. you can do things like this.
it really makes it easier foryou to change it and adapt it to different screen sizes. the only thing that you would wanna createa new symbol for is like i mentioned, when you change your content withina content format within the symbol. all right so right now bobby wantsto know are there any plugins that can automate vertical rhythm oftext element given a base unit? a number that i'm aware of andthe ones that happen now i've tried messing with them andit gets a little too fussy. i would say use the type scalei showed you as a guideline.
and then fit it into your grid. and something i didn'tmention as much is you can control your vertical rhythm by pressingctrl+g, which is your actual grid. and you'll notice thatyou can do things like. just fit it to exactly your grid, and of course you can changethe grid settings here. you'll see that i havean eight pixel grid and i think i've been preachingall live lesson long. and you can make sure if it's nice and
tidy within your design, andestablishes a good vertical rhythm. but as far as like exact dimensions go,it really depends on your project. for instance, if you're working onsomething that's more typography heavy like this, you wanna make surethat your text really stands out. in that case, use a larger type scalelike i am, or if you have something where the text is secondary andyou're focusing more on designs and illustrations, then it doesn'tneed 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 nospecific plugins i can mention right away. melissa wants to know whenorganizing 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 oneright here as you can see. and then you'll see i havedifferent screen sizes and then whether or not it's centered. and that helps break things down.
and then the thing i use a dash foris 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 andthen you have h2/center. then you have h2-white, andthen you have h2-white/center within that. and that's what works best for me andif it works great for you then feel free to use that but if you find somethingbetter, make sure to use that and let us know about it but this is what's beenworking well for me for over a year now. i've been sticking to that. sorry, i was starting to ask the questionand i didn't realize that i was on mute.
all right, so the last question was frommina, i feel like you may have already answered this, but maybe there'ssomething that you can add to it. she wanted to know why are you leaving somuch space between element groups? is it just looks spaced out, oris there a technical reason for this? well it's both. good design is problem solving, and there's a lot of reason behinddifferent decisions people make. using white spaces universallya very good thing. especially in ui design where you don't,well where pixels are free.
the more something is spaced outthe 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 andit wouldn't look as nice. and it would look messy. now that they're spaced out youcan actually go through it, and see that there,see the different hierarchy between them. and you'll see that, the more somethingis 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 andyou associate it with that. so you'll see that the metadata below andthe category above is close to the title. but the actual groupsthemselves are far apart, because you should be able to discern thedifference 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 usinglike space between different elements. excellent, so for everybody that'sattended, thank you very much.
i love that everyone comes fromall different parts of the world, some of these countries i've beento myself, so i really miss and love it when i hear thatyou come from those places. all right, so, thank you adam forgiving us such a nice detailed lesson on creating your ui design for,i think the blog was freelance job? yes, all right, cool, so hopefully we'llsee those changes live on your site soon. yeah, i hope you reallylearned 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 andask anything you want, and i'm pretty good at replyingright away- excellent. so thanks again for having me,angela, appreciate it. and i hope you guys found this useful, andthanks 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 livejust in case you wanna watch again.
we'll be writing up a couple ofthings about it on sitepoint. now, hector, you asked if whether we'regonna write about the attendance. maybe not so much the attendance, but definitely a recap on whatwe'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 ontwitter @__angelamolina. i'm at sitepoint, sothank you very much for attending, and i love the littlethings that are coming in.
thank you, bobby, thank you, nadia. hopefully we catch you soon, andif you want to learn more about sketch, i've sent a link in the chat room, whichhas 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, andincludes all the new features as well. apart from that, i think you can evendownload a sketch cheat sheet right now, if you go to sitepoint.com, solook out for that, it's free.
so, anything to help you learn, anyway so we'll see you at the next live event andthanks, catch you around. thanks guys. [noise]
Tidak ada komentar:
Posting Komentar