Design a Travel App UI | UI Design in Sketch

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 พ.ย. 2024

ความคิดเห็น • 151

  • @Linda-zq6tp
    @Linda-zq6tp 4 ปีที่แล้ว +24

    Hi Jesse! I watched this video last week and it motivated me to design an app (just for practice/fun) and to post a screenshot of it on dribbble. And then a day later I got an email from a design agency, saying that they like my work and asking me for a job interview for my first real ux job!! This has never happened before, I'm so excited!! Thank you for making these videos, they really really help :)

    • @JesseShowalter
      @JesseShowalter  4 ปีที่แล้ว +1

      Holy Cow Linda!!! Congrats!!! That’s so awesome. I can’t wait to hear about how the interview went. I’m so humbled to be a small part of your journey. Keep me updated

    • @shawnaleigh5047
      @shawnaleigh5047 3 ปีที่แล้ว

      Awesome!

  • @bellechuangg
    @bellechuangg 6 ปีที่แล้ว +18

    would love to see more ui design walk throughs like this!

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว +2

      More coming soon👍🏼

    • @doglover1834
      @doglover1834 5 ปีที่แล้ว

      Sketch crack on my channel

  • @KevinPowell
    @KevinPowell 6 ปีที่แล้ว

    Love seeing how other people work and approach their designs, really nice stuff 👍

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว +1

      Me too, thanks for the encouragement 👍🏼

  • @maivang558
    @maivang558 4 ปีที่แล้ว +1

    This is so simple and helpful at the same time. You're amazing!! I don't normally subscribe, but you've got my subscription!

    • @JesseShowalter
      @JesseShowalter  4 ปีที่แล้ว

      Thank you so much, Mai! Welcome aboard!! 🤙

  • @Lexxi0
    @Lexxi0 4 ปีที่แล้ว +1

    You just inspired me to create my own travel app. Thanks for the tutorial!

  • @angelvelazquez1792
    @angelvelazquez1792 3 ปีที่แล้ว

    Just what I was looking for. Thank you.

  • @Aadjemonkeyrock
    @Aadjemonkeyrock 5 ปีที่แล้ว +1

    Very nice to follow alone with the design process

  • @pn183
    @pn183 5 ปีที่แล้ว +1

    I started my UX major around a year ago and have been doing mostly UX research. Now I am also trying to get into the UI and I have started playing with sketch. Could you do a video on creating wireframes using material design and also putting the screens on a phone screen and to make the product look finished. I love your videos they're super helpful!!

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว +1

      I will do a video about material design and presenting designs.

  • @oliver13deft
    @oliver13deft ปีที่แล้ว +1

    i just starting and I guess sketch is outdated, but I gotta say I love your videos. I'm learning a lot!

    • @JesseShowalter
      @JesseShowalter  ปีที่แล้ว +1

      Glad you like them! Best to you on your journey!!

  • @evalunaguerraz6100
    @evalunaguerraz6100 6 ปีที่แล้ว +1

    wow cool video! Thanks for the clear explanation, you are now my new favorite designer to follow!

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Wow! Thanks for the encouragement and support 👍🏼

  • @saymawaleh
    @saymawaleh 4 ปีที่แล้ว +1

    This was very helpful and great for a beginner like myself. Thank you for this.

    • @JesseShowalter
      @JesseShowalter  4 ปีที่แล้ว +1

      I’m so glad I was able to help out, Sayma! Have a good day!

  • @josegonzalez570
    @josegonzalez570 6 ปีที่แล้ว +1

    Thanks for the bit about when to use guides (6:14). Hard to find explicit statements about whether most designers used them to align everything or just certain things.

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว +1

      That’s “my way”, not necessarily “the way” thanks for watching

  • @vasilkooov_des
    @vasilkooov_des 5 ปีที่แล้ว +2

    Thanks for video, hello from Ukraine )

  • @Drunm1112
    @Drunm1112 6 ปีที่แล้ว +1

    Awesome video, Jesse! Thank you!

  • @IkechiGriffith
    @IkechiGriffith 6 ปีที่แล้ว +1

    Good stuff as always. Thanks. I was able to follow. I may need to watch some other Sketch videos for additional context.

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      I have another video on Sketch basics, check it out 🤘🏻

  • @Iiquify
    @Iiquify 6 ปีที่แล้ว +1

    'sredding like a pro' , really enjoyed the video thanks for the help

  • @benjisify
    @benjisify 6 ปีที่แล้ว +3

    That's my favourite TH-camr, thanks Jesse. Please can you do a video about building a UI library in sketch? Thanks

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      That’s a great idea, added it to the list

    • @alicesblog
      @alicesblog 6 ปีที่แล้ว +2

      I'd love to see this! :)

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว +2

      Coming soon

  • @Rick-bp6ty
    @Rick-bp6ty 6 ปีที่แล้ว +24

    "let's eat some mysterious food that food that will mess up our stomachs and ruin our trips" LOL

  • @ВАЖНАЯЖИЗНЬ
    @ВАЖНАЯЖИЗНЬ 5 ปีที่แล้ว +1

    That looks fantastic

  • @JakePomperDesign
    @JakePomperDesign 6 ปีที่แล้ว +1

    I like your style man!

  • @macneila84
    @macneila84 6 ปีที่แล้ว +2

    Awesome video man. Wondering if you could do a sketch video on horizontal / carousel sliders (i.e. top of instagram slider where the rest of the page stays fixed). Thanks!

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Great idea! Added it to the list 👍🏼

  • @joogamal8228
    @joogamal8228 6 ปีที่แล้ว +2

    Love you man - really ~ I hope to start designing my apps - YOU'RE MY INSPIRATION NOTHING MORE TO TALK ABOUT ;) •_•

  • @sidneyjohnson6895
    @sidneyjohnson6895 5 ปีที่แล้ว +1

    Thank you for an Awesome Video! Now, I want to travel lol

  • @venturejay
    @venturejay 3 ปีที่แล้ว +1

    Good lord, you're moving at light speed. I guess I need to get better at Sketch before I try this. I can't keep up!

    • @JesseShowalter
      @JesseShowalter  3 ปีที่แล้ว

      I’m so sorry Jay, I get so excited! Thanks for watching!

  • @Bubu1o1
    @Bubu1o1 4 ปีที่แล้ว

    hey Jesse, how did u do the sliding or scrolling in your prototype preview of the product page? I can't scroll or move my product page in the prototype preview :/

  • @sophiekwong5954
    @sophiekwong5954 5 ปีที่แล้ว +1

    Great work!

  • @marisawangpallin3329
    @marisawangpallin3329 5 ปีที่แล้ว +3

    Hi Jesse, I’m a bit confused when I watch different tutorials because some say that it’s super important to use pixel fitting/snap and to never use values with decimals in Sketch. But then I see other tutorials where they don’t seem to bother at all and they have decimal values in many of their objects?? :)
    Thanks for your great videos!

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว +1

      I think at first it doesn't matter but as you start tightening up your design working off a grid system will help make your design consistent

  • @ДарьяСкиридова
    @ДарьяСкиридова 5 ปีที่แล้ว +2

    thank you, it was very useful

  • @naeemahmed1540
    @naeemahmed1540 5 ปีที่แล้ว +1

    love it kindly guide about wireframing \

  • @matthewtyndall1918
    @matthewtyndall1918 6 ปีที่แล้ว +3

    I would love to follow this, but I can't see what you're doing when you zoom in.

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Awww bummer. I have since learned to bump the resolution of my screen and zoom in more, hopefully you stick around and try another tutorial soon.

  •  4 ปีที่แล้ว

    Hi there, what was the plug-in you used for prototyping stage?

  • @zeetuprasa
    @zeetuprasa 3 ปีที่แล้ว

    nice but can be more better if explains the tools and symbols used to create the app. happy tutorial

  • @sharadee2009
    @sharadee2009 5 ปีที่แล้ว +2

    I couldn't find the links to the assets that you used in this video. Would really help if you could provide the same. Great work man ... Thanks!

  • @Kristiansonderup
    @Kristiansonderup 6 ปีที่แล้ว

    Please do more vids like this ! Maybe a bit slower 😂 but overall i really like this video really much! (And all your other stuff too)

  • @incacube
    @incacube 6 ปีที่แล้ว +1

    cool one! i havent used sketch but xd and sketch are look alike tho

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว +1

      They are similar, I feel like Sketch is a little more built out 👍🏼

  • @DeepakVerma-xl9wx
    @DeepakVerma-xl9wx 5 ปีที่แล้ว +2

    jesse can you please a short video on the app design of spotify please

  • @AntonDanilchenko
    @AntonDanilchenko 4 ปีที่แล้ว +1

    @jesee have you used AirBnb's react-sketchapp to build a prototype of the app and have resulting ReactJS code in the result? Maybe you have a video that shows pros and cons of this solution?

  • @aizaz-shahid
    @aizaz-shahid 4 ปีที่แล้ว

    Jesse, what's the editing & recording soft ? if possible let me know

  • @nateli627
    @nateli627 5 ปีที่แล้ว +1

    Thanks Jesse! First design video I watched here. Could you recommend some online courses for learning some basic knowledge, I'm a starter on UI/UX design, thanks:)

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว

      I'll be putting out a course this year so stay tuned

    • @ijeomaagbugba7305
      @ijeomaagbugba7305 4 ปีที่แล้ว

      @@JesseShowalter Is the course out now? Link please. Thanks

  • @joycec3119
    @joycec3119 5 ปีที่แล้ว +1

    Hi Jesse, the link "www.makersandshakers.io"’ seems to have some problems cuz the server IP address could not be found.

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว

      It has been since shut down due to some personal matters

  • @muhammadsarwani5298
    @muhammadsarwani5298 6 ปีที่แล้ว +2

    I think your "sign up" is hard to read, nice content, keep it up bruh

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Good feedback, thanks for checking it out 👍🏼

  • @lizavalon7942
    @lizavalon7942 5 ปีที่แล้ว +1

    Great video thanks, have been looking into ways to create a moving mock up like you have in the intro on the right. How did you make yours?

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว

      there are a lot of prototyping tools out there, most of them are good

  • @alexvanratingen1887
    @alexvanratingen1887 4 ปีที่แล้ว

    When replacing the image in the card symbol for the new cards the ratio of the actual image gets messed up on my side here and gets forced in the mask. Is there a solution for that?

  • @brunofinhana9805
    @brunofinhana9805 4 ปีที่แล้ว +1

    Hey Jesse, I know this video is a bit old (still awesome tough), but I'm starting out in this area and I have a doubt: After this design process, what comes next? Should we hand the design to a developer, or, in case you're doing this on your own, are there any design/code tools that you can use to build it and take it to the app store?

    • @JesseShowalter
      @JesseShowalter  4 ปีที่แล้ว

      yes you would hand designs off to a developer or use something like supernova studio to build your app

  • @petrahellqvist6660
    @petrahellqvist6660 5 ปีที่แล้ว +1

    What other programs do you recommend for making micro interactions in app/tablet prototypes? :) and I'd love to see more animation/interaction design videos 😇

  • @osmanmusse6223
    @osmanmusse6223 6 ปีที่แล้ว +1

    Cool video man keep it Jesse😎😎😎😎😎😎😎

  • @EMSLeitoPL
    @EMSLeitoPL 6 ปีที่แล้ว

    Okey we have a design ready, do you need any coding for apps like websites need? How it works after we have done App Design ?

  • @helenahaggstrom5273
    @helenahaggstrom5273 6 ปีที่แล้ว +1

    Great!

  • @lilliabolton700
    @lilliabolton700 4 ปีที่แล้ว +1

    The links for the files to join you on these tutorials no longer works which is very sad =(

  • @oussamabendakir9608
    @oussamabendakir9608 6 ปีที่แล้ว +1

    cool i like it , thank you ^^

  • @SL-qr1yn
    @SL-qr1yn 5 ปีที่แล้ว +2

    But how do we convert a sketch prototype into a real functioning application? Please your reply is highly welcomed.

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว

      For that you would need development experience or maybe try our Supernova Studio

    • @nycto16
      @nycto16 5 ปีที่แล้ว

      That is software engineers work to develop the design designed by a ux designer..

  • @erronwhite8771
    @erronwhite8771 6 ปีที่แล้ว +1

    Very nice video

  • @SuperVoodude
    @SuperVoodude 6 ปีที่แล้ว +1

    Just finished an intro to Sketch class so this was a great reinforcer.
    Question: Aren’t you able to set the background color of your artboards instead of using a colored box?

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Glad you enjoyed the video...Yes you can set the canvas color instead of using a shape.

  • @mohamedfariz
    @mohamedfariz 6 ปีที่แล้ว +1

    Cool Intro

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Thanks, it makes me seem cooler than I am 🤣

  • @vladalx8820
    @vladalx8820 5 ปีที่แล้ว +1

    what are the keys to command option?

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว

      i'm not sure i understand the question?

  • @dangeorge6514
    @dangeorge6514 6 ปีที่แล้ว +1

    Great video Jesse! What font are you using in the design?

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Thanks. I am using Futura 👍🏼

  • @anuragkalra7511
    @anuragkalra7511 6 ปีที่แล้ว +1

    awesome!

  • @EMSLeitoPL
    @EMSLeitoPL 6 ปีที่แล้ว +1

    Do you have tutorials for Where to start with coding/designing web if I'm new? I don't have problems with graphic, but java,html, css etc. are completely new to me.
    btw. Great and fun video!

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว +1

      I did a tutorial series called "Design and code a landing page from start to finish" th-cam.com/play/PLrtjkLnNjGHu7QIc8jN7hZmuP6wMby2QZ.html

  • @pratikjagtap7014
    @pratikjagtap7014 5 ปีที่แล้ว +1

    which font did you use for the logo 'Travel App'?

  • @lisaqu4237
    @lisaqu4237 5 ปีที่แล้ว +1

    Hi Jesse, thank you for the work! One question: where to download those symbols you used, the arrow, the heart?

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว +2

      Thanks so much, The noun project.

    • @lisaqu4237
      @lisaqu4237 5 ปีที่แล้ว

      @@JesseShowalter You are DA best! You give me the passion and confidence to design on my own, thank you!!

  • @Rick-bp6ty
    @Rick-bp6ty 6 ปีที่แล้ว +2

    the arrows are point to the left and right now while the animations are up and down. This feels weird.
    You maybe could mimic the animations from the app store today screen.

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว +2

      Your right on this, I ended up fixing this after but I was going to fast while filing to recognize. It should have most definitely pushed left and back to the right 👍🏼

  • @abhishekpaul8310
    @abhishekpaul8310 4 ปีที่แล้ว

    what design software are you using

  • @yaoniesusu
    @yaoniesusu 6 ปีที่แล้ว +3

    nice

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Thanks for checking it out 👍🏼

  • @yoshanvilochana9328
    @yoshanvilochana9328 5 ปีที่แล้ว +1

    tell me what is the software when you use for the this designing

  • @xinyanxu8273
    @xinyanxu8273 3 ปีที่แล้ว

    How do you make it scroll?

  • @pichapobsuwannil4624
    @pichapobsuwannil4624 4 ปีที่แล้ว +1

    4:19 what is plugin name is you do?

  • @goxherecorp7316
    @goxherecorp7316 5 ปีที่แล้ว +1

    do you have the final sketch project? thank you

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว

      I don't think I provided this Sketch file but I will for most projects going forward.

  • @shubhankarbera2
    @shubhankarbera2 4 ปีที่แล้ว

    How to create full fledged travel app?

  • @harshdarji639
    @harshdarji639 4 ปีที่แล้ว

    Hey, can you share .pad file or . Sketch file... i want also do like you... by my own... can you share plz?

  • @KabbaModern03
    @KabbaModern03 6 ปีที่แล้ว

    I have 4 months to create an app before I move to NYC. I recently stopped using Adobe products since they always change things around and take things away. It makes it difficult to us designers.

  • @emilcupic
    @emilcupic 6 ปีที่แล้ว +1

    This tutorial is really good for learning new techniques if you're a sketch newbie, but the app itself is really bad

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว +3

      Thanks for the feedback. It's really not supposed to be a fully formed concept... just a design for funzies 👍🏼

  • @ne9835
    @ne9835 6 ปีที่แล้ว +1

    Nice vid, what are you using?

    • @JesseShowalter
      @JesseShowalter  6 ปีที่แล้ว

      Using Sketch

    • @ne9835
      @ne9835 6 ปีที่แล้ว

      Jesse Showalter Ok, I think you were using Photoshop.

  • @jcmunoz2386
    @jcmunoz2386 5 ปีที่แล้ว +1

    Do you have any courses on UI/UX design?

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว

      Coming soon. Sign up for my newsletter for when they launch.

  • @mehrgitakbs3645
    @mehrgitakbs3645 5 ปีที่แล้ว +1

    You beautiful
    Yessss

  • @mohabmoftah874
    @mohabmoftah874 3 ปีที่แล้ว

    Hello!

  • @elmonterrosa
    @elmonterrosa 5 ปีที่แล้ว +1

    Great video but you talk too fast and move too quickly through the menus and software.

    • @JesseShowalter
      @JesseShowalter  5 ปีที่แล้ว

      Sorry about that, I’ll try to pace it better

    • @jonasz_
      @jonasz_ 4 ปีที่แล้ว +2

      you can set 0.5 speed