This was so so helpful...I've been working on a design in Sketch for a class project and this tutorial was the best one I found for making the actual prototype. Thank you!!
Are you thinking of getting into Invision Studio tutorials too Cody? You're prob the only designer I prefer going to for tutorials bc you're super easy to follow and understand! Also you're the only designer whose thought process I can relate to LOL.
Hi Cody, thanks for this great video. I'm completely new to prototype making in Sketch. Have you a tutorial on how to get the iphone screen set up that you added? I don't seem to have that installed. Thanks again, Eleanor
I was kind of struggling to find it because it was not well explained but I mad search and found it, so Go to developer.apple.com/design/resources/ scroll down then you can find the sketch iOS library
Hi Cody! I am fairly new in the design world. First and foremost I would like to thank you for making these amazing tutorials. Also ... I am even embarrassed to ask BUT ... Any possibility of a tutorial on how you’ve built that shopping cart? I know may sound like a silly question! Thanks :)
great video, the question I have been trying to find the answer to is what is the process when done with the Sketch file -- how is is taken to the market for people to download? I cant seem to find that answer
You've really got me into Sketch, I've nearly finished my app! Keep the sketch vids coming! Especially if you happen to know the best way to convert artboards into code - that would be incredible.
There is an import feature in Axure RP that let's you import Sketch designs. You can then treat the elements like objects. I am not sure, but it is possible that once you have moved from Sketch to Axure you could export HTML. I am learning myself and just saw a video about using Sketch with Axure.
Hey great video. I'm trying to figure out how you made the badge on the last slide (the circular one). I'm trying to do "text on path" but cant seem to get the words in "muir woods" to face the right way. It seems like you did it a completely different way when I look at the source file you provided. I'm new to this stuff, is there any way you can help me figure out how to do this, besides copying and pasting yours? lol.
Caro Cody Brown! Muito obrigado por tudo os seus ensinamentos sobre sua experiência. Cada dia que assisto uns do seus vídeos eu tenho mais conhecimentos. Valeu!!!
Hi Cody, great video. I'm new to Sketch so this is just what I was after. 1 question... How will this render on smaller phones or larger tablets? Do you have to sketch for all screen sizes?
Hey Alan, great question and thanks for watching! You'd need to consider designing for smaller and larger breakpoints. Most devices would probably be similar aspect ratios so it wouldn't be too much tweaking, but definitely would need a adapted layout for tablet.
Hi Cody, I'm new to Sketch and designing UI/UX in general. Looking up on TH-cam I saw people using Adobe Xd and/or Sketch for designing. Now as a beginner what would you recommend me to use?
Why do some tutorials ask us to use Invison for the prototyping? It is an additional charge and other than the slide in, slide out etc, it really has little to offer. The artboards lose their vibrancy on Invision.
First of all, beautiful UI! I'm new to sketch, been trying to find how to do the independent slide everywhere. Please update if there's a way to do this. Thanks for the video.
It would be good if you could explain how to get the apple symbols you used as a background. Is not as intuitive as it should be, and when you are just starting, it can be frustrating if you don´t know how to add the library.
Thank you so much for this great video! I’ve been trying to find the SofiaPro font that you used but it seems to be super expensive. Where did you get it from?
Thanks! I'm not the best person to answer questions regarding code unfortunately, I'm more on the design side of things. This guys has a great channel though, he may be able to better answer your question! th-cam.com/channels/4xKdmAXFh4ACyhpiQ_3qBw.html
Good question, I'll look into that. I just re-designed my portfolio on Squarespace, which is what I recommend because it's easy to manage and it's already "mostly" responsive.
Where can I download invision software, and if it works in offline mode. I just want to install it on my computer and do the prototyping. I want the free version though. Please ...
Love your videos! :) is there any alternative for windows users. I wanted to try “sketch” and didn’t know it’s for Mac only and I was quite disappointed :(
Hmm.. some other folks have been asking about that too. The only thing I can think of is maybe you don't have the latest update of Sketch? Either way, here's a comprehensive UI kit that has tons of elements for you: developer.apple.com/design/resources/
Absolutely. A prototype is a great way demonstrate your idea and put it in the hands of your potential investors, clients, etc. It's the closest thing you can get to a real app for a fraction of the cost.
Hey man I'm building a social networking app, I was wondering if you can easily port a design from either sketch or adobe XD to a programmer and then they can do some programming functionality on it? or does that not work. I've been told by my programmer to design the whole UI in illustrator, so I was wondering if you could do a UI build just in illustrator.
That's awesome to hear about your project. My honest opinion would be to not design your app in illustrator, it's not made for UI design. Illustrator is great for illustration, quick wire-framing, and lots of other vector based things, but it's not going to be as effective as XD or Sketch. CAN you do it? Of course, but you're better off using softwares that are made for UI design. Hope this helps!
Cody Brown yeah hah I was so confused when my programmer was like "yeah you can't use sketch" she just wants a bunch of random PNG assets but the whole UI design is on me so I wanted to use software's designed to get that job done... I'm just confused 😅
I would probably use a software called Zeppelin which integrates very nicely with Sketch. In that software, all the pixel dimensions, colors, type styles, etc are all easily viewable for the developer. You can also make each element exportable.
"i've always felt that buy now's a little pushy, lets do add to cart. that way they can add it to their cart and buy it if they want, let's not be the pushy salesman" LOL
your thumbnails are so visually pleasing, I felt at peace when I looked at all of them
Thanks Gisselle! I try to keep them minimal and to the point ;D
This was so so helpful...I've been working on a design in Sketch for a class project and this tutorial was the best one I found for making the actual prototype. Thank you!!
Glad I could help! Thanks for watching and good luck with your design :D
Great job. I appreciate your channel. Not only is your content helpful but I really like the speed and your style. Keep up the good work.
SydviciousHawaii that’s really nice of you to say, thank you! Glad I could help ;)
I don’t think I have ever enjoyed watching anything more than this
Ani Ovakimyan thanks for the kind words, and watching!
Awesome tutorial! I wish all tutorials on TH-cam were as good as this! Learned a lot. Now onto putting it into practice. Thank you.
Are you thinking of getting into Invision Studio tutorials too Cody? You're prob the only designer I prefer going to for tutorials bc you're super easy to follow and understand! Also you're the only designer whose thought process I can relate to LOL.
Love your approach and method on your tutorials! For someone new in this field trying to build a portfolio this channel is super helpful.
Great tutorial, I'm an Android developer and I find your work inspiring, keep up
Abdelkader Bouazza thank you for the kind words! Glad you enjoy 😊
Hi Cody, thanks for this great video. I'm completely new to prototype making in Sketch. Have you a tutorial on how to get the iphone screen set up that you added? I don't seem to have that installed. Thanks again, Eleanor
Stupid question, but where do you get the IOS UI Design Template Drop Down option?
I was kind of struggling to find it because it was not well explained but I mad search and found it, so Go to developer.apple.com/design/resources/ scroll down then you can find the sketch iOS library
Your lesson is very helpful thank you, & you explain it very well thanks you so much for tutorials
looks like im gonna watch this whole channel now
Nice! This is really helpful for a non designer. I'm a coder by trade but this definitely helps!!
Cody thank you for a wonderful lesson, you make it looks very easy. keep them coming.
Very nice and informative can you do more projects in Adobe XD, highlighting keyboard shortcuts etc...
Loved it. Very useful and nicely taught
Lahar Arora thank you!
Hi Cody! I am fairly new in the design world. First and foremost I would like to thank you for making these amazing tutorials. Also ... I am even embarrassed to ask BUT ... Any possibility of a tutorial on how you’ve built that shopping cart? I know may sound like a silly question! Thanks :)
great video, the question I have been trying to find the answer to is what is the process when done with the Sketch file -- how is is taken to the market for people to download? I cant seem to find that answer
Inspiring as always
thank ya!
awesome tut! also great taste in lofi jazz haha
Help! When I hit insert I couldn't find anything saying: "IOS UI Design" Where did you get it from?
command + , and go to libraries and then add ios kit
awesome video, nice and light. Sketch it pretty much a watered down version of illustrator, built specifically for building UX
You've really got me into Sketch, I've nearly finished my app!
Keep the sketch vids coming! Especially if you happen to know the best way to convert artboards into code - that would be incredible.
Thanks for watching! There is no way to convert the artboards into code, you'd need to hand over your assets to a developer to implement a real app.
Try Zeplin
There is an import feature in Axure RP that let's you import Sketch designs. You can then treat the elements like objects. I am not sure, but it is possible that once you have moved from Sketch to Axure you could export HTML. I am learning myself and just saw a video about using Sketch with Axure.
Thank you very much for this!! The independet "slide menu" is really the only thing thats missing...
Thanks!
very useful video to learn sketch beginners.. Thank you for uploading Cody... :)
Hey great video. I'm trying to figure out how you made the badge on the last slide (the circular one). I'm trying to do "text on path" but cant seem to get the words in "muir woods" to face the right way. It seems like you did it a completely different way when I look at the source file you provided. I'm new to this stuff, is there any way you can help me figure out how to do this, besides copying and pasting yours? lol.
Just downloaded Sketch, loved watching this!! Can't wait for more :)
Thanks! I should be back with more tutorials soon. :D
Super helpful walkthrough, thanks for sharing Cody!
David O. Andersen of course! Thanks for the kind words ;)
do you need the paid version to have access to Insert > iOS UI Design > iPhone X frame? I can't seem to find that in my free version
just go on sketch website and go on libraries. You need to install it, then follow instructions.
@@nobytes2 thank you so much. I was wondering the same thing and wondering why he didn't mention it.
Very helpful to learn in short time, keep uploading more awesome videos👍
Thank you! I'll do my best to keep brining you all awesome videos :D
Thank you Sir. Very informative.
Caro Cody Brown! Muito obrigado por tudo os seus ensinamentos sobre sua experiência. Cada dia que assisto uns do seus vídeos eu tenho mais conhecimentos. Valeu!!!
Hey Cody, I was wondering how you are to create the actual iphone look for the still photo you're using for this video. I hope that makes sense.
Great video but how do I get the iOS UI Design Kit?
3:09 how to insert ios ui design. cause I don;t have its. :)
really smooth app building ....
Hi Cody, great video. I'm new to Sketch so this is just what I was after. 1 question... How will this render on smaller phones or larger tablets? Do you have to sketch for all screen sizes?
Hey Alan, great question and thanks for watching!
You'd need to consider designing for smaller and larger breakpoints. Most devices would probably be similar aspect ratios so it wouldn't be too much tweaking, but definitely would need a adapted layout for tablet.
so once you're done using sketch to design your app/website would you hand it over to a programmer who can actually make it functional?
Amazing work.Really helpful.
thanks man. keep up with the good work. Your videos really helps
Thanks for the kind words, and thanks for watching! :D
Hi Cody do you have tutorial on interactive desktop prototype like this one?
why you design elements like Hamburger menu from scratch ? isn't there any ready to insert menu somewhere in plugins?
Awesome! What font did you use on the Muir Woods packaging?
I believe I used Graystroke font. You can see the design process here: th-cam.com/video/PF1iYXntX5c/w-d-xo.html
Hi Cody, I'm new to Sketch and designing UI/UX in general. Looking up on TH-cam I saw people using Adobe Xd and/or Sketch for designing. Now as a beginner what would you recommend me to use?
is there a software similar to sketch where we can actually animate the prototypes? I have seen many prototypes full of cool animations etc...
Thanks Cody, that's really helpful
How do I prototype something with epoxy plastic or something to make a enclosure for my projects
your work is pretty awesome great tutos
Thanks! I appreciate the support :D
Hi, i am so struggling with the prototype which could show on the phone mock up, how can i do that?
Why do some tutorials ask us to use Invison for the prototyping? It is an additional charge and other than the slide in, slide out etc, it really has little to offer. The artboards lose their vibrancy on Invision.
First of all, beautiful UI! I'm new to sketch, been trying to find how to do the independent slide everywhere. Please update if there's a way to do this. Thanks for the video.
Like the background music!
It would be good if you could explain how to get the apple symbols you used as a background. Is not as intuitive as it should be, and when you are just starting, it can be frustrating if you don´t know how to add the library.
This video helped me a lot. Thanks
Glad to hear! :D
thank you very much for sharing such a great tutorial!
How do you download this app? I typed in the app store Sketch 49, but it did not pop up.
Thank you so much for this great video! I’ve been trying to find the SofiaPro font that you used but it seems to be super expensive. Where did you get it from?
Thanks for watching! You should be able to find it here on Typekit: typekit.com/fonts/sofia
Awesome! Thanks so much.
Super Helpful, Thanks!
Thanks! Glad I could help :D
Great work. Thank you ! for sharing Sketch Project File......
Thanks!
how do you install the ios ui design? its no longer in the app, i did find a file on the apple site though
thanks man for videos.
Anytime! Thanks for watching Mustafa! :D
Amazing help, I'm trying to learn how to build an app. Any advice on how to design with Sketch and do the UI on Xcode? Thanks
Thanks! I'm not the best person to answer questions regarding code unfortunately, I'm more on the design side of things. This guys has a great channel though, he may be able to better answer your question!
th-cam.com/channels/4xKdmAXFh4ACyhpiQ_3qBw.html
Great work. Thank you !
abdou ett thank you!
Hey man, can you recommend the best way to demonstrate a prototype for a portfolio site. So as a small video/gif type thing. Cheers in advance!
Good question, I'll look into that. I just re-designed my portfolio on Squarespace, which is what I recommend because it's easy to manage and it's already "mostly" responsive.
Great content
Thanks!
Hi brother can you please make a tut for ios app design using apple design guide line with modern app design
good demo !
Fantastic!
Thank you very much!
Cool Tutorial, Thanks. What is your idea about building Apps without Coding. Does it really work?
Thanks William! Currently you need a developer to build the app, these programs only get you halfway there
Where can I download invision software, and if it works in offline mode. I just want to install it on my computer and do the prototyping. I want the free version though. Please ...
Which platform do you use
Great Video 👍
so sketch doesn't have a sitemap like Axure... :(
The tools you have I do not found it,,,,, I'm working on Windows
Thank you for your videos and keep it up!
Thanks for the love!
Love your videos! :) is there any alternative for windows users. I wanted to try “sketch” and didn’t know it’s for Mac only and I was quite disappointed :(
Adobe XD :D
Do you have a tutorial on the shopping cart? lol.
Instagram link on the description not working/correct? wanted to check out your profile :)
I cannot find the ios ui design drop down is it because3 have the trial version
Hmm.. some other folks have been asking about that too. The only thing I can think of is maybe you don't have the latest update of Sketch? Either way, here's a comprehensive UI kit that has tons of elements for you: developer.apple.com/design/resources/
@@CodyBrownDesign thank you I will check this out
thanks man, really good tutorial :)
Cool. Thanks.
No prob! Thanks for watching :D
Hi, can I use sketch to improve an existing app (with its buttons and pages) ?
Yes you can, you would just have to recreate existing paged within the software.
pages*
hi mate would you recommend a interactive app prototype to run a pilot for new business? - or mvp
Absolutely. A prototype is a great way demonstrate your idea and put it in the hands of your potential investors, clients, etc. It's the closest thing you can get to a real app for a fraction of the cost.
you made me like sketch
Hey man I'm building a social networking app, I was wondering if you can easily port a design from either sketch or adobe XD to a programmer and then they can do some programming functionality on it? or does that not work. I've been told by my programmer to design the whole UI in illustrator, so I was wondering if you could do a UI build just in illustrator.
That's awesome to hear about your project. My honest opinion would be to not design your app in illustrator, it's not made for UI design. Illustrator is great for illustration, quick wire-framing, and lots of other vector based things, but it's not going to be as effective as XD or Sketch. CAN you do it? Of course, but you're better off using softwares that are made for UI design. Hope this helps!
Cody Brown yeah hah I was so confused when my programmer was like "yeah you can't use sketch" she just wants a bunch of random PNG assets but the whole UI design is on me so I wanted to use software's designed to get that job done... I'm just confused 😅
If you use Sketch, you can export all the assets for your developer as PNG's in the bottom right corner!
Cody Brown oh sweet thank you so much man! I'm glad I subscribed. Looking forward to your new content.
Thanks for subbing, really appreciate it! Stay tuned for more vids :D
Where can I get the resources you used for the tutorial.
Thanks for asking, here's a link to my Sketch project file: bit.ly/2HKb3vP
Cody Brown Design thanks alot bro
By the way please can you show us how to use symbols and overrides I still get very confused on how to use it...I hate repeating my designs
So can this be viewed on a PC. Is will this be sent off to a coder? And did u just do the ux and ui aspect of this in one?
I would probably use a software called Zeppelin which integrates very nicely with Sketch. In that software, all the pixel dimensions, colors, type styles, etc are all easily viewable for the developer. You can also make each element exportable.
Cody Brown very useful info, I’ll check it out! Thanks
"i've always felt that buy now's a little pushy, lets do add to cart. that way they can add it to their cart and buy it if they want, let's not be the pushy salesman" LOL
Hahahaha, so true tho right? Or Maybe it's just me....
Thank's bro
When it’s done how can you make it become a real working
App ?
You would need to hand over your assets to a developer, they are the ones who will code everything out and make it real.
Keep going
Thanks man! Will do
Hello sir please pouch mockup create please solved my problem sir
it's for proof of concept for a project
Great voice. I wish you were my yoga teacher.
Thanks Cody. I owe you a couple pounds of your favorite coffee.
Carl Dietz thanks for watching! Oohhh yes! I’m a sucker for medium roast ;)
Would you be interested in making an app with me. With a pay we can figure out.
I'm fully booked at the moment!
Cody Brown let me know when you are available. In the planning phase at this time. Where can I reach you?
And a fucking huge notch.
N
Great technical skills but designer you are not...
Konrad Grabowski thanks for watching my video :)