Design a Travel App UI | UI Design in Sketch

Поділитися
Вставка
  • Опубліковано 15 гру 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!

  • @bellecbarber
    @bellecbarber 6 років тому +18

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

  • @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 👍🏼

  • @Aadjemonkeyrock
    @Aadjemonkeyrock 5 років тому +1

    Very nice to follow alone with the design process

  • @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.

  • @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

  • @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!! 🤙

  • @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.

  • @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!

  • @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 👍🏼

  • @Drunm1112
    @Drunm1112 6 років тому +1

    Awesome video, Jesse! Thank you!

  • @Iiquify
    @Iiquify 6 років тому +1

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

  • @ВАЖНАЯЖИЗНЬ
    @ВАЖНАЯЖИЗНЬ 5 років тому +1

    That looks fantastic

  • @JakePomperDesign
    @JakePomperDesign 6 років тому +1

    I like your style man!

  • @sophiekwong5954
    @sophiekwong5954 5 років тому +1

    Great work!

  • @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 🤘🏻

  • @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 :/

  • @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!

  • @vasilkooov_des
    @vasilkooov_des 5 років тому +2

    Thanks for video, hello from Ukraine )

  •  4 роки тому

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

  • @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

  • @pichapobsuwannil4624
    @pichapobsuwannil4624 4 роки тому +1

    4:19 what is plugin name is you do?

  • @benjisify
    @benjisify 6 років тому +3

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

  • @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?

  • @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 👍🏼

  • @ДарьяСкиридова
    @ДарьяСкиридова 5 років тому +2

    thank you, it was very useful

  • @sidneyjohnson6895
    @sidneyjohnson6895 5 років тому +1

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

  • @joogamal8228
    @joogamal8228 6 років тому +2

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

  • @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

  • @vladalx8820
    @vladalx8820 5 років тому +1

    what are the keys to command option?

  • @xinyanxu8273
    @xinyanxu8273 3 роки тому

    How do you make it scroll?

  • @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!

  • @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

  • @abhishekpaul8310
    @abhishekpaul8310 4 роки тому

    what design software are you using

  • @DeepakVerma-xl9wx
    @DeepakVerma-xl9wx 6 років тому +2

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

  • @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)

  • @naeemahmed1540
    @naeemahmed1540 5 років тому +1

    love it kindly guide about wireframing \

  • @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 😇

  • @dangeorge6514
    @dangeorge6514 6 років тому +1

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

  • @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

  • @yoshanvilochana9328
    @yoshanvilochana9328 5 років тому +1

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

  • @zeetuprasa
    @zeetuprasa 3 роки тому

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

  • @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!!

  • @aizaz-shahid
    @aizaz-shahid 4 роки тому

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

  • @helenahaggstrom5273
    @helenahaggstrom5273 6 років тому +1

    Great!

  • @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 👍🏼

  • @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

  • @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.

  • @alex_van_ratingen
    @alex_van_ratingen 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?

  • @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" ua-cam.com/play/PLrtjkLnNjGHu7QIc8jN7hZmuP6wMby2QZ.html

  • @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

  • @lilliabolton700
    @lilliabolton700 5 років тому +1

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

  • @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.

  • @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..

  • @anuragkalra7511
    @anuragkalra7511 6 років тому +1

    awesome!

  • @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 ?

  • @erronwhite8771
    @erronwhite8771 6 років тому +1

    Very nice video

  • @oussamabendakir9608
    @oussamabendakir9608 6 років тому +1

    cool i like it , thank you ^^

  • @mohamedfariz
    @mohamedfariz 6 років тому +1

    Cool Intro

    • @JesseShowalter
      @JesseShowalter  6 років тому

      Thanks, it makes me seem cooler than I am 🤣

  • @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.

  • @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 👍🏼

  • @shubhankarbera2
    @shubhankarbera2 4 роки тому

    How to create full fledged travel app?

  • @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.

  • @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?

  • @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 👍🏼

  • @jcmunoz2386
    @jcmunoz2386 6 років тому +1

    Do you have any courses on UI/UX design?

    • @JesseShowalter
      @JesseShowalter  6 років тому

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

  • @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.

  • @yaoniesusu
    @yaoniesusu 6 років тому +3

    nice

  • @mehrgitakbs3645
    @mehrgitakbs3645 5 років тому +1

    You beautiful
    Yessss

  • @mohabmoftah874
    @mohabmoftah874 3 роки тому

    Hello!

  • @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 👍🏼

  • @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