I just saw the link to this video on Twitter - good job! Sketch is really an useful and important app these days, especially for UX designers. Great tutorial for all the beginners!
Just i installed sketch software in my mac book.. I watched other tutorials but little confused and thinking that from where do i start the tool.. really it is help me that.. Keep uploading more videos.. thank you very much cody...
Hey thank you! Yeah, That's sort of my personality type so I guess that's why it works for me. haha. I appreciate the kind words! More content on the way.
Thanks Cody, for this awesome video! You make it very simple and fun to understand. Only thing that Sketch has changed things around and now it doesnt seem to work like your video. :( Do you happen to have an updated version of this video?
Hey Cody, I will be taking a UX course in a few weeks, I liked your vid as it allowed me to get a feel for the software......one little advice is that, if you could be even more crystal clear with what keys you are pressing for some short cuts that would be awesome for newbies like me. For example, you were shifting the texts at 10 pixel intervals.....maybe as you're doing it just say "Hold shift and then down key, down key, down key", just one of the examples i could think of.....but anyways awesome content =)
fun video. ixnay on the grackbound music. but why did you duplicate the "splash page" only to delete everything on it? why not just insert a new one? and how did you delete everything like that? (8:40-52) looks like you selected over a portion of the page and then did some fancy move/shortcut....? I think I'm sort of stuck until I can figure this out. Thanks!!
Awesome stuff! Just for your own reference, you can use the option key to see pixel distances between elements. So if you click an element, hover your mouse over another element, and press the option key, itll tell you how far away they are from eachother. (thatll save you some time so you dont have to move the element and then use shift and arrow keys to move 30 pixel distances)
Also get the Craft plugin for sketch! Itll allow you to do alot of random things one of which is to pull high res stock photos from stock websites like Unsplash. That way you dont have to leave Sketch in order to insert a stock photo into your stuff! :D
iTipster thanks for the advice! I'm all about working towards being more efficient with these programs. I'm gonna start integrating that in my workflow!
iTipster and yeah, I've already got Craft synchronized and it's fricken delightful. Such a seamless experience between platforms and the publishing is so quick!
You're awesome! There is so much work/detail/thought in this video and it's all very well explained. The 'why' on every little thing from experience adds up on so many things. definitely subbed recommendation, perfect combo: 1,2 x speed, 'drugged' background repeated melody and your way of teaching
From the comments it seems like this is a worthwhile video and exactly what I am looking for. But I just can't get past the noise (I really want to avoid using the term "music") that's endlessly looping in the background.
David, I agree. It's hard for me to even watch now. I made this video quite some time ago, and I've learned to drastically tone down the background music. I appreciate the feedback, it's from comments like this that I was able to make better videos. Thanks for the honest feedback. :D
Funny thing is, my aunt is a cacti collector, she has thousands of them, and she goes on conventions with other cacti fanatics. It's one of the weirdest specific hobbies I came across. I was left in shock - why do these people collect so many cacti? Why is there so many people who collect so many cacti? Why do they travel on the other side of the country to see some cacti? So yes...there are actually people who would use this app... Great tutorial btw.
Hey there! Thank you so much for the awesome tutorial. One quick question I had is...where did you get your GT Walsheim font? I just downloaded Sketch myself and I don't see that as one of the fonts available for me to use. Is this a plug-in you downloaded? do you by any chance have a video to teach us about those or a resource that you can guide me to? Would appreciate the help! Thanks again for the video!
Great video! Really appreciate the tips! Quick question...I noticed when you move stuff around sometimes it shows a white glove instead of the typical arrow. Is there any advantage to this? I've noticed if I hold spacebar I get the glove option, but that moves the entire artboard around and not just individual elements. Thanks!
Yeah that white glove appears when I'm holding down spacebar to move my viewport around. Sounds like you got it worked out, let me know if you have any other questions :D
Thanks! One more question haha. I noticed you create one "page" and have every app screen on that one page. Is there an advantage to this? I've noticed other people doing it that way as well. I was making a separate page for each screen before, but now that seems dumb. Also, if doing multiple screens on one page, is there a shortcut to front/center a specific screen? Thanks!
Any chance you can upload a new tutorial for Sketch version 50? They have changed the interface dramatically and it is hard to find iOS elements and so many other things. 🤕 But the content is great. Good job man!
Rohan Patel I actually just made a video regarding Sketch 49 if you go to my recent uploads. But you’re right, there is a lot of updates they’ve released to 50. I’ll have to make another video!
deciding which prototyping software to start learning, i think you just made me go for sketch, man. thanks ~ ps: the photo on the wall behind you needs adjusting:)
Sketch is a wonderful application, highly recommend using it. Also keep your eyes peeled for Invision Studio, that's coming out soon too! Straightening the picture now...
Oh so cool video, I like it so much. I am not using Sketch but feeling the best design on it. If it possible can you give me the software link? Because I want to shift from Photoshop to Sketch & learn from you. Good luck.
Thank you so much for this tutorial!! Can you please make more tutorials using Sketch App Like maybe how to create Animations, UI/UX widgets, etc. That would be awesome!
Great video. Learn much faster doing it in this step-by-step way instead of the videos that do an intro or overview. And I like how the background music is just two bars repeated 10 million times! :/
Thanks! I appreciate the feedback. Haha, yeah if you watch more of my recent videos I've been adding in more background songs to change it up. Watching my videos I discovered that it definitely gets repetitive with just one song!
In File > New from template I have only IOS App icon and not IOS UI Design. So how do I find it ? Yesterday I downloaded the free trial version of Sketch and maybe that's the reason I don't have that.
Thanks for the question! I think I may have the answer. You might not have the latest version of Sketch? I believe they released Improved padding for the iPhone X Status Bar Symbols within the built-in iOS UI Design Library in Version 48. Here's a link of Sketch's upadates! www.sketchapp.com/updates/
Download the template file here iosdesignkit.io/ios-11-gui/ and learn where to put it here medium.com/@jskrn/the-location-of-the-sketch-app-templates-folder-da9f9819f494
Can you get an affiliate link for Sketch? if yes than please have a link on your description where we can click and download. If it's free, a link in your description would help too... Thank you for this video...I desperately needed it...
Select your element, go to bottom right, click "Make Exportable". There's also a video where I go over it here: ruclips.net/video/3QOtP3XCSQc/видео.html . Timecode: 21:21
downloaded the trial version of sketch and it does not have the template "IOS UI Design". is this a feature in the full version or is there something I can download to access those files?
I have the full version so I'm not 100% sure on that. But here are some free resources you can use in Sketch! www.sketchappsources.com/free-source/2067-ios-10-gui-kit-sketch-freebie-resource.html v1.designcode.io/ios9
Cody Brown Design Hey man. I actually figured it out it's one of those stupid little things. When you choose your background colour there's a tick box for "include in export". Thanks for the reply my guy been watching your tutorials all day my family.
So once you make say 4 or 5 screens, what next? Do you hand it off to a developer? Have you done a follow-up video on this? Would love to watch if you have!
Good question.. Once you have your file ready to go, and all your pages are designed, you want to make sure each element on your artboards are export ready. That means going in, selecting icons. images, etc, and going to the bottom right of the screen and clicking "Make Exportable". I usually make icons into SVG files. Once everything is ready to go and exportable, I would download a software called "Zeppelin". It integrates very nicely to Sketch and your developer can open this to download all the assets, as well as see pixel heights, color, and even a style guide. I know this is a lot, which is why I'll probably make a video for this!
Thanks for the feedback, I've been toning down the volume on my latest videos and adding more songs to help mitigate the distraction factor. After watching this again I agree!
@@CodyBrownDesign Not Really.... I was actually wondering what the title was.....If anything, the music helps you to stay awake, focus and creative at the same time
![YoungBoy Never Broke Again - Sneaking [Official Video]](http://i.ytimg.com/vi/1ILUps2zDFU/mqdefault.jpg)
I am starting to learn Sketch. I followed your tutorial and made my first little Sketch project. Thank you so much!!
Nice touch with the music, makes the tutorial more fun 👍
I just saw the link to this video on Twitter - good job! Sketch is really an useful and important app these days, especially for UX designers. Great tutorial for all the beginners!
Learn UX that's awesome! I don't think I even shared this on Twitter, haha. Yeah I'm lovin' sketch, very helpful tool for us designers! Thank you
Best sketch tutorial video for me❤️❤️❤️
Glad to hear! Thank you :)
Very simple, very clean, very easy to follow along. Great stuff and always good for a re-cap. Thanks for a fun tutorial...
Thanks Rothelle! I appreciate the kind words. Yeah, that's my goal is to make these super simple and digestible. :D
Love your videos with clear and simple instructions. Please upload more tutorials for Sketch app!!!
Thank you Jennifer! My next video is a collaboration tutorial on designing a UI in Sketch for the iPhone X. There will be animation interactions too!
Was the iOS UI Design Template automatically available or did you have to install something special? If so, what?
same doubt i could not get it in my sketch library
BEST Sketch tutorial on the internet. Thanks Cody!
Thank you! You're too kind :D
😎 awesome. Easy to understand as a beginner.
Just i installed sketch software in my mac book.. I watched other tutorials but little confused and thinking that from where do i start the tool.. really it is help me that.. Keep uploading more videos.. thank you very much cody...
Thank you Cody! You explained and delivered information very well! Pleasant to watch and to listen to your video.
Thanks for watching and for the kind words, I'm glad I could help!
Loved this video! Chill music, easy to follow and everything was clear! :) Thanks!
Hey man, I dig the unstructured "go with the flow" method you have to these tuts. Keep it up! Look forward to seeing some more content from you
Hey thank you! Yeah, That's sort of my personality type so I guess that's why it works for me. haha. I appreciate the kind words! More content on the way.
Thanks Cody, for this awesome video! You make it very simple and fun to understand. Only thing that Sketch has changed things around and now it doesnt seem to work like your video. :( Do you happen to have an updated version of this video?
Hey Cody, I will be taking a UX course in a few weeks, I liked your vid as it allowed me to get a feel for the software......one little advice is that, if you could be even more crystal clear with what keys you are pressing for some short cuts that would be awesome for newbies like me. For example, you were shifting the texts at 10 pixel intervals.....maybe as you're doing it just say "Hold shift and then down key, down key, down key", just one of the examples i could think of.....but anyways awesome content =)
Awesome video man, please do more! Subscribed!
got me started pretty fast, good video
Thanks Carlos! Glad I could help :D
fun video. ixnay on the grackbound music. but why did you duplicate the "splash page" only to delete everything on it? why not just insert a new one? and how did you delete everything like that? (8:40-52) looks like you selected over a portion of the page and then did some fancy move/shortcut....? I think I'm sort of stuck until I can figure this out. Thanks!!
where did you get the iOS elements template?
Thank you Cody!!!
Awesome stuff! Just for your own reference, you can use the option key to see pixel distances between elements. So if you click an element, hover your mouse over another element, and press the option key, itll tell you how far away they are from eachother. (thatll save you some time so you dont have to move the element and then use shift and arrow keys to move 30 pixel distances)
Also get the Craft plugin for sketch! Itll allow you to do alot of random things one of which is to pull high res stock photos from stock websites like Unsplash. That way you dont have to leave Sketch in order to insert a stock photo into your stuff! :D
iTipster thanks for the advice! I'm all about working towards being more efficient with these programs. I'm gonna start integrating that in my workflow!
iTipster and yeah, I've already got Craft synchronized and it's fricken delightful.
Such a seamless experience between platforms and the publishing is so quick!
This is awesome, nice tutorial Cody!
You're awesome! There is so much work/detail/thought in this video and it's all very well explained.
The 'why' on every little thing from experience adds up on so many things.
definitely subbed
recommendation, perfect combo: 1,2 x speed, 'drugged' background repeated melody and your way of teaching
Thanks Victor! I've started adding more than one song in my videos to not get too repetitive.
Where did you get this software from? Is it only for ios computer? thanks
I'm so behind the game but this has been inspirational and I'm going to learn this. tnx
Wonderful tutorial.... straight to the point... thanks for making it
jeremiah mamman thanks for watching! Glad I could help :)
Thanks Cody, I follow along for practice as I watch you creating this app. Thumbs up! :)
Awesome! Glad it's helping you :D
I came i saw, I subscribed and shared Lol. For pete's sake man please roll out some sketch videos(for apps) for sake of humanity.
Thanks for sharing and subscribing! Yes, I'll be making more Sketch videos soon!
Just awesome! Mellow to watch and just what I needed! Subscribed
Thanks for the comment and subscribing! :D
From the comments it seems like this is a worthwhile video and exactly what I am looking for. But I just can't get past the noise (I really want to avoid using the term "music") that's endlessly looping in the background.
David, I agree. It's hard for me to even watch now. I made this video quite some time ago, and I've learned to drastically tone down the background music. I appreciate the feedback, it's from comments like this that I was able to make better videos. Thanks for the honest feedback. :D
What are the books in the background?
This is a neat little video
Thank you! Glad you enjoy :D
I love that you just started making a Cacti app out of nowhere HAHAHAH. Please make more Sketch tutorials, subscribed immediately!!
Funny thing is, my aunt is a cacti collector, she has thousands of them, and she goes on conventions with other cacti fanatics. It's one of the weirdest specific hobbies I came across. I was left in shock - why do these people collect so many cacti? Why is there so many people who collect so many cacti? Why do they travel on the other side of the country to see some cacti?
So yes...there are actually people who would use this app...
Great tutorial btw.
That's incredible! I had no idea. I guess there's tons of super specific niches out there and people are crazy about them. Thanks for watching!
Very helpful! Thanks so much!
Thank you for the tutorial. Have you made any tutorial about the 'component' and 'symbol' feature on Sketch? Thanks in advance.
Thanks a lot. Very helpful. Liked and subscribed!
Thanks Alan! Glad you enjoyed ;D
U can use grid tho to align ur objects
Hey there! Thank you so much for the awesome tutorial. One quick question I had is...where did you get your GT Walsheim font? I just downloaded Sketch myself and I don't see that as one of the fonts available for me to use. Is this a plug-in you downloaded? do you by any chance have a video to teach us about those or a resource that you can guide me to? Would appreciate the help! Thanks again for the video!
Where did u get those ios elements? Thats the part u didnt explain. Its part of sketch?
I learned a lot as a beginner
For some reason, I dont have the iOS UI Design option under File Menu. Do I need to download something?
thanks for the tutorial!
great tutorial! thank u so much
Great video! Really appreciate the tips! Quick question...I noticed when you move stuff around sometimes it shows a white glove instead of the typical arrow. Is there any advantage to this? I've noticed if I hold spacebar I get the glove option, but that moves the entire artboard around and not just individual elements. Thanks!
Nvm figured it out! Looks like i just have to hold down Command button :)
Yeah that white glove appears when I'm holding down spacebar to move my viewport around. Sounds like you got it worked out, let me know if you have any other questions :D
Thanks! One more question haha. I noticed you create one "page" and have every app screen on that one page. Is there an advantage to this? I've noticed other people doing it that way as well. I was making a separate page for each screen before, but now that seems dumb. Also, if doing multiple screens on one page, is there a shortcut to front/center a specific screen? Thanks!
Any chance you can upload a new tutorial for Sketch version 50? They have changed the interface dramatically and it is hard to find iOS elements and so many other things. 🤕 But the content is great. Good job man!
Rohan Patel I actually just made a video regarding Sketch 49 if you go to my recent uploads. But you’re right, there is a lot of updates they’ve released to 50. I’ll have to make another video!
This is gold, thank you !
Glad you like! Thanks for the comment and watching :D
deciding which prototyping software to start learning, i think you just made me go for sketch, man. thanks ~
ps: the photo on the wall behind you needs adjusting:)
Sketch is a wonderful application, highly recommend using it. Also keep your eyes peeled for Invision Studio, that's coming out soon too!
Straightening the picture now...
really awesome video bro subscribed please make more sketch videos in the future I have enabled notifications :)
Thank you!
did you create your symbols?
I have to admit that i like the cacti brand.
Great Job, thank you for sharing :)
Excellent work
Thank you!
Pleasant to listen to....I feel like your going to play a slow jam soon lol. Nice vid
When it comes to pixels and spacing items how do you gage how much to use? Love your videos, very helpful!
To be honest, it's from experience, looking at other digital products, and sort of eye balling it.
Great tut!
Thank you! Glad you enjoyed :D
i don't have those UI... strange, it mostly consist of the iPhone xs and iPhone xs Max UI. Is my sketch application missing those UI or its broken?
Do you use the paid version of Sketch? I have just downloaded the free trial version and the iOS UI doesn't seem to be on the templates list.
What app did you use?
interesting start
Where can i get that template from? sketch removed the ios templates other than ios icons in the latest update. they only left android stuff in there
Are you running Sketch 49.3? I've got it in my drop-downs..
im new to sketch and i don't have none of those UI elements from the old iOS? Need help.
Oh so cool video, I like it so much. I am not using Sketch but feeling the best design on it. If it possible can you give me the software link? Because I want to shift from Photoshop to Sketch & learn from you. Good luck.
Thank you!!! Fantastic!
Thanks for watching Cindi!
Thank you so much for this tutorial!!
Can you please make more tutorials using Sketch App
Like maybe how to create Animations, UI/UX widgets, etc. That would be awesome!
I just released another video regarding Sketch. Check it out!
how i download it on MacOS
Great video. Learn much faster doing it in this step-by-step way instead of the videos that do an intro or overview. And I like how the background music is just two bars repeated 10 million times! :/
Thanks! I appreciate the feedback.
Haha, yeah if you watch more of my recent videos I've been adding in more background songs to change it up. Watching my videos I discovered that it definitely gets repetitive with just one song!
how do you have iOS ui design? i don't have that
What microphone did you use for this recording?
I believe this mic was the Blue Spark: amzn.to/2iIOxVZ
In File > New from template I have only IOS App icon and not IOS UI Design. So how do I find it ? Yesterday I downloaded the free trial version of Sketch and maybe that's the reason I don't have that.
I have the full copy and I don't have it either.
Thanks for the question! I think I may have the answer. You might not have the latest version of Sketch? I believe they released Improved padding for the iPhone X Status Bar Symbols within the built-in iOS UI Design Library in Version 48. Here's a link of Sketch's upadates! www.sketchapp.com/updates/
I've downloaded Sketch version 49 but there is no IOS UI Design template
Insert -> iOS UI Design
Download the template file here iosdesignkit.io/ios-11-gui/ and learn where to put it here medium.com/@jskrn/the-location-of-the-sketch-app-templates-folder-da9f9819f494
Link to download Sketch?
where did i get "IOS UI DESIGN"? i dint have in my menu
You can download the Sketch package from Apple for all their UI designs.
ui isnt an option for me do i have to buy?
I'm not sure I understand your question?
16:55 realizes he made an app about cacti 😂
Cool style, bro -> keepItOn)))
Many thanks friend!
Question: Why does no one mention Affinity Designer?
Can you get an affiliate link for Sketch? if yes than please have a link on your description where we can click and download.
If it's free, a link in your description would help too...
Thank you for this video...I desperately needed it...
Good question, I'll look into it!
@@CodyBrownDesign well?
What version is this Sketch?
Hmm, I'm not entirely sure! I made this video almost close to a year ago. It's definitely not the most current version for sure
How advanced can this program get? Im looking into making a scanning app like for merchandise... Please answer
I'm not sure I understand your question fully, this software is meant solely for designing... so I guess it can be as advanced as you want it to be?
Awesome tutorial.... :)
But how to export its resources?
Select your element, go to bottom right, click "Make Exportable". There's also a video where I go over it here: ruclips.net/video/3QOtP3XCSQc/видео.html . Timecode: 21:21
I got it.
Thank you for this awesome tutorial.
What is your background music?
It should all be listed in the description ;D
Nice Thanks alot
Thanks for watching!
i want more lesson where can found it
There's more videos on my channel to check out!
downloaded the trial version of sketch and it does not have the template "IOS UI Design". is this a feature in the full version or is there something I can download to access those files?
I have the full version so I'm not 100% sure on that. But here are some free resources you can use in Sketch!
www.sketchappsources.com/free-source/2067-ios-10-gui-kit-sketch-freebie-resource.html
v1.designcode.io/ios9
Thanks for the quick reply. Liked and Subbed!
You can find some UI to d/l from Apple
developer.apple.com/design/resources/
Peter Shih thank you!!
got it, THANKS!
How do I add a scrolling view?
Make your art-board longer in length I believe
Cody Brown Thanks Cody!
What array of tools do you personally use?
My day to say software is Photoshop, Illustrator, After Effects, Premiere, Sketch, Invision, and Zeppelin
The title is very misleading. It should read, "I will start to show you how to build an app but won't complete it". thanks.
Thanks for the feedback! Yeah did not intend to mislead but I can see what you mean. I'll consider that for my next videos.
I can do this with mspaint, what is the added value of the video?? Creating images and squares??
Anyone know why my colours are faded on preview prototype and export?
I've never experienced that or heard of it.. Do you have the latest version of the software installed?
Cody Brown Design Hey man. I actually figured it out it's one of those stupid little things. When you choose your background colour there's a tick box for "include in export". Thanks for the reply my guy been watching your tutorials all day my family.
Oh glad to see you figured it out! Thanks for watching, greatly appreciate it!
So once you make say 4 or 5 screens, what next? Do you hand it off to a developer? Have you done a follow-up video on this? Would love to watch if you have!
Good question.. Once you have your file ready to go, and all your pages are designed, you want to make sure each element on your artboards are export ready. That means going in, selecting icons. images, etc, and going to the bottom right of the screen and clicking "Make Exportable". I usually make icons into SVG files. Once everything is ready to go and exportable, I would download a software called "Zeppelin". It integrates very nicely to Sketch and your developer can open this to download all the assets, as well as see pixel heights, color, and even a style guide. I know this is a lot, which is why I'll probably make a video for this!
please, background music is too high........
What did you press to duplicate the lines to make a hamburger
Option (or alt) , + Shift and Drag
This guy kind of looks like John Krasinski
The background music is very distracting.
Thanks for the feedback, I've been toning down the volume on my latest videos and adding more songs to help mitigate the distraction factor. After watching this again I agree!
@@CodyBrownDesign Not Really.... I was actually wondering what the title was.....If anything, the music helps you to stay awake, focus and creative at the same time
Great video and clear instructions! Marry me!
Thanks for the kind words!
commmmooooon i need another videos like this one 😭😭😭😭
Check out my latest vids!
This is such a North Park app 😂 Another San Diegan designer here!
Haha totes! Gotta represent :D
this is great, but can you please turn the stupid music off?
Man why the music? it's so loud and distracting!
Howd he know lolll
Come onQ!
great tutorial but your music is annoying
Good feedback, if you look at my more recent videos I've toned down the music quite a bit!
Great tutorial and sexy voice ;) more apps design videos please~