How to design a web application from start to finish

Поделиться
HTML-код
  • Опубликовано: 2 ноя 2024

Комментарии • 132

  • @IbraheemAsif
    @IbraheemAsif 2 года назад +9

    Props to all the hard work you have done. 700+ hours is not a small span of time.

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад

      Thanks! Haha, I probably wouldn't have the tenacity to do it again now if you ask me.

  • @luisbello4837
    @luisbello4837 3 года назад +11

    Bruh, absolutely amazing and concise video with everything i was looking for, from the developer/designer perspective, got yourself a new subscriber!

  • @ibanu349
    @ibanu349 3 года назад +25

    This was a very informative video. Great detail of the steps and sums up the actual process pretty well too!

  • @shivudesign9210
    @shivudesign9210 2 года назад +4

    Thats what I was searching for web app process..thank you for that please start a playlist on such from requirement gathering doc to wireframe to wireframe to UI design webapp end to end. no one had such tuts on any channel for better understanding 😊

  • @tung_uiux
    @tung_uiux 3 месяца назад

    This video is awesome. This is what I am looking for. It's specific. Thank you a lot. Hope wonderful things come to you guy 🍀💖

  • @maphokengmetseeme4442
    @maphokengmetseeme4442 3 года назад +5

    I am always looking forward to your videos. Thank you once again.

  • @micaelaflax9745
    @micaelaflax9745 Год назад

    Thanks for all the information, not only the video but also the info in the comments. It's really helpful ☺ Hope you're doing well and thanks again!

    • @KaYungCalebLai
      @KaYungCalebLai  Год назад

      Thanks for watching! Let me know if you have any questions about building a product, maybe I can make a video for it

    • @micaelaflax9745
      @micaelaflax9745 Год назад

      @@KaYungCalebLai Actually, it's great to see your answer! I'm leading a big web application project. Perhaps a video on the use of Scrumban and those things. I already saw your comments about more useful stuff like Jira and Whimsical.
      Also, a video about the use of Figma it would be great. Thanks! ♥

  • @GrantSolomon-px5ei
    @GrantSolomon-px5ei 10 месяцев назад +3

    Which tool were you using for the product map and prototype?

  • @sevdalink6676
    @sevdalink6676 3 года назад +3

    Excellent content!!! Thanks a lot. I thought I must work in a Webdev- or Design company for some time to gather this useful information.

    • @KaYungCalebLai
      @KaYungCalebLai  3 года назад

      no problem! let me know if you have any other product design questions :)

  • @braindead2237
    @braindead2237 3 года назад

    Excellent... I'll use your black and white model during the initial stages next time!

  • @julzarboleda5744
    @julzarboleda5744 4 года назад +4

    I hope to learn more on product spec feature document making. Can you make a video of it in depth lesson? Or you might go in depth with each points you’ve given I think that would be a great content too.
    I have lots of questions and searching for this process I’m glad that i have found you. Now I’m subscribing more power to u bro

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад +7

      Hey thanks for watching. I'll think about making a video on product spec if people are interested!

  • @thaoha9164
    @thaoha9164 4 года назад +1

    Great process - thanks for sharing Caleb!

  • @Oswee
    @Oswee 4 года назад +2

    Great video. Going through same process for own project.

  • @solutionanalysts1
    @solutionanalysts1 2 месяца назад

    Master web application design from start to finish. Our comprehensive guide covers planning, UX/UI, development, testing, and deployment for a seamless app creation process.

  • @jessemwangi2998
    @jessemwangi2998 2 года назад

    I totally love this. Great work. Please keep uploading such videos. Could you do one for integrating apis with a web app

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад

      Thanks! I'm not a backend dev so probably don't have too much input on that..

  • @simonsmashup
    @simonsmashup 2 года назад

    Very nice video. Gonna design my product idea myself.

  • @nikolagalvan1254
    @nikolagalvan1254 4 года назад +4

    Wow, looks very professional! Impressive! What tools do you use for the frontend and backend of your app?

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад +4

      Lovely to hear! Some react and rail for FE and ruby for BE. I only did the Html & css for development tho

  • @rahulmishra3820
    @rahulmishra3820 3 года назад

    It helped me a lot..Thanku so much brother

  • @qualitysnaps680
    @qualitysnaps680 3 года назад +4

    Hey ,Thanks . This has been very helpful . What tools would you recommend for wirframing and mock up ? What software are you using ? Thanks

    • @KaYungCalebLai
      @KaYungCalebLai  3 года назад

      I was using sketch in my video, but it's outdated. Everyone is on figma now.

  • @dwaynerobare1153
    @dwaynerobare1153 Год назад +1

    Hi... what platform do you use to pit together those design screens? Personal project and I'm using MS Word. Terrible. Thanksm

  • @IQYAUNIVERCITY
    @IQYAUNIVERCITY 2 года назад

    Please consider posting the overview word doc online for download. Good Video!!!

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад

      Hey~~ I have it up here :)
      docs.google.com/document/d/19l7zWMGqrPNPrg7DLvrIhrxpVZjpKmSlyVmbOw45sXk/edit?usp=sharing

  • @worksafe2369
    @worksafe2369 9 месяцев назад

    Very helpful. Thanks

  • @Tomyb11
    @Tomyb11 Год назад +1

    What is the app are you using during your product map and high fidelity mockup?? Thanks for all your help!

    • @yen-8680
      @yen-8680 Год назад

      I think.. it’s figma?

    • @Tomyb11
      @Tomyb11 Год назад

      @@yen-8680 Thanks Yen

  • @mwichenakamba4702
    @mwichenakamba4702 Год назад

    Thanks this is helpful.

  • @uncletan888
    @uncletan888 3 года назад

    The question should be , What is the best approach to designing a product or a web application ?
    a) Base on knowledge
    b) Gather data from users
    c) brain storm ideas
    d) Systematic thinking.

  • @xia-yu
    @xia-yu 2 года назад +1

    What is the app for writing that Kayung used?

  • @muhamadsaeedd
    @muhamadsaeedd 8 месяцев назад

    Thank you
    +700 hours including development
    Or only the design?

  • @lobster6899
    @lobster6899 Год назад

    Thank you, very usefull.

  • @abed-almajeedmansour9015
    @abed-almajeedmansour9015 2 года назад

    Thanks a lot, it is a great guide :)

  • @waymo88
    @waymo88 4 года назад +9

    What application did you use for your product map?

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад +4

      I just use sketch. There are a lot of prototyping tools out there tho.

  • @jerymaebernales8031
    @jerymaebernales8031 3 года назад

    I hope to learn to make web based information system for my school in the philippines...you make video from start to finish on how to make a web based system. Thank you

    • @KaYungCalebLai
      @KaYungCalebLai  3 года назад

      Man that needs a full course! You'll need to start from understanding UX. And UX is basically common sense. You can to use a bunch of apps to improve your common sense in product design.

  • @mrgngrn
    @mrgngrn 5 лет назад +4

    Thank you❤️

  • @paih_paan
    @paih_paan 4 года назад

    thank you, great knowledge

  • @JaneLe-s4t
    @JaneLe-s4t Год назад

    Hi, thanks for your sharing. Which platform/ application do you use to design and create high fidelity mockup? Is that Canvas? Thank you!

    • @KaYungCalebLai
      @KaYungCalebLai  Год назад +1

      I use figma :) no serious designer would use canvas

    • @JaneLe-s4t
      @JaneLe-s4t Год назад

      @@KaYungCalebLai Thanks for your reply. Will go for figma then :)

  • @rubensverstappen3458
    @rubensverstappen3458 4 года назад

    Bro, very helpful. Thank you!

  • @galymzhanmakhaliev5392
    @galymzhanmakhaliev5392 4 года назад +1

    You are cool man!

  • @mjchuang11
    @mjchuang11 2 года назад +1

    Hello Caleb, since it's a web app, I am curious if you also designed the mobile version for it as well since the interactions and the UI are different as well? Did you design them simultaneously, or you worked on the web version first?

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад +1

      I did the web version first, I'm not really a mobile first type of guy :) If you check the website, it's fully responsive.

  • @matheo4934
    @matheo4934 4 года назад

    amazing. thank you OP bro.

  • @isharaperera419
    @isharaperera419 4 года назад

    Really Helpful!

  • @sunlord75
    @sunlord75 5 лет назад +2

    Hi Caleb! Awesome video guide. Curious how to get a view of your featured spec document.

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад +5

      Thanks! You can check out a template here
      docs.google.com/document/d/19l7zWMGqrPNPrg7DLvrIhrxpVZjpKmSlyVmbOw45sXk/edit?usp=sharing

    • @kyrieshiloh9518
      @kyrieshiloh9518 3 года назад

      I know it's kind of off topic but do anyone know a good place to watch new series online ?

    • @dakarikaysen1898
      @dakarikaysen1898 3 года назад

      @Kyrie Shiloh i watch on Flixzone. You can find it by googling :)

  • @666aladdin
    @666aladdin 3 года назад

    i want to learn to develop web based apps , plz advise a set videos i can use to learn this process

  • @MahalakshmiTechTalks
    @MahalakshmiTechTalks 4 года назад

    Cool one. Thanks a lot!!

  • @seasonaldeveloper5882
    @seasonaldeveloper5882 4 года назад

    Great video. Been wondering how real world development looks like.

  • @palacera
    @palacera Год назад

    Which app can I use to do this

  • @hahabobblehead2059
    @hahabobblehead2059 4 года назад +1

    what software are you using in your video? great video thanks for sharing!

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад +2

      I used Sketch for this project, but recently I've been using Figma more.

    • @filhanislamictv8712
      @filhanislamictv8712 3 года назад

      @@KaYungCalebLai on my first day on a web application course my guide and i used this.

  • @afrcanmoviecollection
    @afrcanmoviecollection 2 года назад

    Good day, Caleb
    I have been following your videos and I like how you explain for us to understand, I'm new to website development. I have a website that I paid a developer to help me develop. He has developed it and hosted it, but my problem with him is that when ever I want to make any corrections on the website it takes my developer to much time to make the corrections, I want to know how to build and work on my website my self to avoid all the delay from my developer. Thank you as I expect your reply

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад

      Hey man, this reply is pretty late, if you're still having issues with it, here's what you can do. First, you need to ask your dev how your site is built. If it's pure HTML/CSS, you can convert your site to WordPress and install their CMS. That way you'll be able to edit all the content on your own without the help of your dev. Second, if you're site is not that big, consider rebuilding it with webflow, it's another more user friend CMS that you can edit copy. Hope that helps!

  • @kgarun
    @kgarun 3 года назад

    Thank you!!

  • @GarnetMo
    @GarnetMo 3 года назад

    Have you designed an analytics web app on XD yet? If yes, please point me to the video. I am an amateur trying to do that. thanks.

    • @KaYungCalebLai
      @KaYungCalebLai  3 года назад +1

      I’ve done a lot of analytic dashboard but not on XD.

    • @GarnetMo
      @GarnetMo 3 года назад

      @@KaYungCalebLai Do you have any videos?

  • @randomuser66438
    @randomuser66438 5 лет назад +2

    Thanks for this video, man! What you've done on Clascity is really inspiring.
    Did you code it too?

    • @KaYungCalebLai
      @KaYungCalebLai  5 лет назад +2

      Thanks man, I developed the front-end of the site and I have a team to help me with the backend :)

    • @randomuser66438
      @randomuser66438 5 лет назад

      @@KaYungCalebLai Really cool. Congratulations!

    • @IbraheemAsif
      @IbraheemAsif 2 года назад

      @@KaYungCalebLai how did you got the investment could you guide me

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад

      @@IbraheemAsif I didn't get any investment, I bootstrapped the company.

  • @louiseemily1214
    @louiseemily1214 2 года назад

    Nice video! Does anyone know the name of the software used for the Product Map?

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад

      Thanks! It was just in Sketch. Now I use whimsical for product mapping :)

  • @Gager.Family
    @Gager.Family 4 года назад

    Hi @Kayung Caleb Lai - I am setting out on a similar journey so thank you very much for taking the time to explain how you went about it. Can I ask a favour please? Could you share just the template of the word document where you capturing all your thoughts and requirements?

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад

      hey yea, I have a template here
      docs.google.com/document/d/19l7zWMGqrPNPrg7DLvrIhrxpVZjpKmSlyVmbOw45sXk/edit?usp=sharing

    • @Gager.Family
      @Gager.Family 4 года назад

      @@KaYungCalebLai Super star. Thank you for the very prompt response!

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад

      @@Gager.Family no worries man

  • @Swite
    @Swite 2 года назад

    what do you use to build your websites?

  • @mandagore4931
    @mandagore4931 6 месяцев назад

    Could you share the clascity overview word document?

    • @KaYungCalebLai
      @KaYungCalebLai  6 месяцев назад +1

      here you go :)
      docs.google.com/document/d/19l7zWMGqrPNPrg7DLvrIhrxpVZjpKmSlyVmbOw45sXk/edit?usp=sharing

    • @mandagore4931
      @mandagore4931 6 месяцев назад

      @@KaYungCalebLai Woow thank you, this really helped me!

  • @SeanWalsh75
    @SeanWalsh75 3 года назад

    thank you

  • @immanuelkathindwa5864
    @immanuelkathindwa5864 2 года назад

    Is it possible to share the document you used?😥

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад

      Yea totally, feel free to use this spec template
      docs.google.com/document/d/19l7zWMGqrPNPrg7DLvrIhrxpVZjpKmSlyVmbOw45sXk/edit?usp=sharing

  • @JeeteshNariya
    @JeeteshNariya 4 года назад

    which tools are you use for project planning & management?

  • @Ocebatv
    @Ocebatv Год назад

    Hi I wanna build a booking webapp what’s the price for it

    • @KaYungCalebLai
      @KaYungCalebLai  Год назад

      Hi! I have a video here for pricing :) ruclips.net/video/92wpzCzO5gM/видео.htmlsi=Wfo99RwlzHZaxR0b

  • @ajbrxdley
    @ajbrxdley 3 года назад

    In the functionalities document, what is the meaning of the "[CLA-xx]" at the side of some of the features?

    • @KaYungCalebLai
      @KaYungCalebLai  3 года назад +1

      Oh, that's the naming for each feature. I break them into smaller piece and assign to the dev team on Jira.

    • @ajbrxdley
      @ajbrxdley 3 года назад

      @@KaYungCalebLai Thanks! Is there any chance you can make the features document available, it seems like so many pages for functionalities and i don't know where to start.

  • @AshikKhan
    @AshikKhan 4 года назад

    Can you please make a small web app as an example and show in a video...

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад +2

      Probably not, it'll take too much time and without much thoughts, a demo app will likely be shit anyways

  • @MahalakshmiTechTalks
    @MahalakshmiTechTalks 4 года назад

    What tool did you used for wireframing?

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад +1

      I used Sketch for this project, but recently I've been using Figma more.

  • @afrcanmoviecollection
    @afrcanmoviecollection 2 года назад

    Thank you Caleb, I am seriously lost because am new to website design, can I chat with you private, I want to learn more

  • @andytamburino1743
    @andytamburino1743 3 года назад

    how is the front end made? react?

  • @DomnickK
    @DomnickK 3 года назад

    What software was he using?

  • @KuldeepKumar-qg6gg
    @KuldeepKumar-qg6gg 2 года назад

    Hi :)
    Want to hire you for a web app project. Are you available for work?

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад +1

      I am :) are you bootstrapping? My rate is around 15~30k for an MVP design.

  • @hayretech2783
    @hayretech2783 2 года назад

    could you share me the sample document bro if you can send me

    • @KaYungCalebLai
      @KaYungCalebLai  2 года назад

      hey man, check here
      docs.google.com/document/d/19l7zWMGqrPNPrg7DLvrIhrxpVZjpKmSlyVmbOw45sXk/edit?usp=sharing

  • @chemonson
    @chemonson 4 года назад

    What application did you use for the high Fidelity muckup?

    • @KaYungCalebLai
      @KaYungCalebLai  4 года назад +2

      I used Sketch for this project, but recently I've been using Figma more.