How to design a website like a pro

[@developerfilip]

I actually think that website design is quite neat and definitely a big improvement :D Nice work!

[@AdrianTwarog]

Thanks Filip!

[@achukstok]

I belive Figma

[@shakhzod_ayibov]

@@AdrianTwarog Hello. Shoot video abot how to develop a project for themeforest and how to upload a project to themeforest

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@AdrianTwarog]

This was heaps of fun to do, if you want to check out another cool vid, watch kzbin.info/www/bejne/fX7RaqaueLyBZq8 shows you what a day in my life looks like!

[@CodingFire]

You: Design website *Like a pro* Me: _huh it takes me millions of years to just pick the color pallete 🤣_

[@AdrianTwarog]

Hahaha!!!

[@CodingFire]

@@AdrianTwarog lol

[@zerosandones7547]

I usually go to dribble, behance, or similar websites, then just color pick a nice website 🤣

[@CodingFire]

@@zerosandones7547 XD Big brain Thanks for the tip because i always get stuck in picking color specially in making videos lol 🤣

[@yestermonth]

@@zerosandones7547 I do that too but still get stuck trying to tweak it

[@amantiwari1190]

Anybody else obsessed with that curved monitor.

[@AdrianTwarog]

I am!

[@swafiaakter5295]

i also

[@siasquad7360]

I am also

[@stackingflow]

omg. I can't unsee that humongous monitor

[@pezreloaded8436]

I absolutely hate designing on curved monitors. Bought a couple for my dual monitor setup and now looking to replace them.

[@BugaMarco]

When you are moving around and spamming ctrl + z to make things appear on the screen is the smartest way I've seen someone simulate a time lapse:D

[@AdrianTwarog]

What can I say, I’m a wizard

[@Saidur07]

@@AdrianTwarog okay, this is epic 🤣

[@AZisk]

Your attention to detail in this video is inspiring. Love the subtle slider movements

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@uex-c]

Really smooth foundational work. As I always say "Get the ground work done first and properly, and the site will simply flow out."

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@francescociulla]

These videos give me imposter syndrome, but I watch them anyway. You are incredible Adrian!

[@AdrianTwarog]

It's getting hard and harder to improve by 1% each video, but I love seeing your growth in double digets!

[@fredg8655]

this is the first video I see from your channel. I suscribed.

[@doroaros]

Great video, is very difficult for a web dev to propose an interesting design and not to fall into templates or repetitive designs. It's true that is a long process to sketch, then figma and then start to code from scratch, but in the end you'll create a very unique piece.

[@AdrianTwarog]

It's all about working small and building it up progressively!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@hamsta-rush6906]

The dedication is top notch.. Showing the process :) subscribed

[@AdrianTwarog]

:D

[@tb_media3219]

very interesting pls more of this videos where you design from the ground off

[@AdrianTwarog]

Thanks, will do!

[@TheRusticWanderer]

Love the revamped design. I've also recently started using Figma. Previously I used to directly do mockups on a staging site.

[@tears_falling]

Really nice! I'm a developer too, but I always struggle with designing, this was inspirational for me.

[@RedJackWZ]

It happens because you want to follow patterns, stop and think about something no one created before

[@AdrianTwarog]

Work small, work your way up!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@CREATIVEEXPERTZ]

@@RedJackWZ exactly same thing happens with me

[@aminefarhat8382]

Thank you for the content I really enjoying watching your vids and tutos Can't w8 for the book to be released

[@AdrianTwarog]

Figma!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@AbdulWahab-ue4xx]

Simply awesome. I'm a freelance designer and really liked the way you did it. I use Photoshop most of my web work but it takes further steps to get it live... Just subscribed your channel. Keep up the good work.

[@immortalforce9467]

where are you from bro?

[@dailymeow3283]

It's really nice, they way you make a style guide, buttons, cards, colors .. is neat and organized

[@AdrianTwarog]

Thanks :)

[@beenmicrophone5817]

Amazing video, two questions though: 1: how do you dertermine other colors to use, eg the different shades of greens. 2: how do you figure out what to size things so each section is distinct and takes up enough space to take up the full height of the viewport, eg.. your hero and top section just so happens to look great and fill out the viewport height, what if it doesnt? what if someone on a bigger screen reaches your site and perhaps half of the next section is showing and is cutoff abrubtly? that seems to be the biggest blocker for me trying to manage this vertical space in relation to each section.

[@abelareiza9269]

Awesome content as always Adrian! Keep it up, man

[@AdrianTwarog]

Thanks!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@mohammadraufzahed]

this was awesome bro. keep going, man.

[@mrthepilvitv4105]

Make more videos like this one! Good job!

[@corneliustucker6939]

Well I think it's the best one I have seen so far

[@mukulrana1616]

Love these camera shots. Amazingly cinematic!

[@gauravkharel3074]

I like to design and develop web apps but, I am confused to go with all this thing together. So, I thought to get better in the development of web apps to get a job and with time, learn design. I chose you as a mentor seeing your content more with what I like to do. I would be glad if you can share your part because seeing you most of my things collide with your works and, I really appreciate your works. So, in which way should I go for getting better in both ways and give myself a good career on this.

[@AdrianTwarog]

Find which you enjoy learning and doing without feeling like its work, and follow that path, it's okay to do a bit of both you that's the answer too

[@tforrest6779]

Great Video! Would love to see another one like this!!!

[@emmanueldiogu5968]

This is awesome, I like your process and your the output just blew my mind completely. Thanks for sharing🙏🏾

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@designup8]

I am doing web design in Korea. I enjoyed watching your good video. That's cool.

[@hamzahmd_]

I really enjoy watching your video. New Style and your setup is amazing.

[@simonvandenhende5274]

Clever how you made the breakdown segments by undoing (Ctrl+Z) the deletion of elements. Great video overall and nice design :) keep it up!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@jevespada324]

So you're the one that designed that! Very nice!

[@SunnyJaySabuero]

I like it, and I feel I kinda learn a lot from you so I'm gonna subscribe.

[@atamohammadi3965]

Maaan , I just started to learn UI Design & this video Motivated me to do more & more & more ....

[@meow-lily]

You're Coffee is getting cold haha😂, Great video btw💌

[@AdrianTwarog]

Oh no!!!

[@w3mw]

What kind of program did you on your ipad for painting the website first? :)

[@AdrianTwarog]

Concepts App

[@suryarajbhaduri994]

Super awesome!🚀

[@chiragsingla.]

I am a new react dev, and doing some web dev stuff. One tip - design first for mobile, then go on with the screen sizes to make it reponsive, I made a whole ass webapp only to realize it looked so bad on mobile, had to rebuild it

[@prashantrayamajhi]

looking forward to more videos like this :)

[@AdrianTwarog]

Good to know and hear!

[@badhonebrahim7707]

time to get it up, so much fun don't stop. :) :) :)

[@codesus99]

This is incredible Adrian

[@AdrianTwarog]

Thanks!

[@isiahjones_33]

Wow! Great design.

[@AdrianTwarog]

Cheers!

[@vcmattsucr]

How's the book coming along? I'm waiting for it

[@AdrianTwarog]

Going well, it’s a book, example content and video course combine now!

[@kleytman]

You know what you are doing man

[@JeramieSaito]

wow so quick and simple!

[@pablowbk]

great video Adrian! I wouldnt mind a full blown series of videos on completing a website project from scratch. Travis Neilson from DevTips used to do that kind of stuff and it was very cool watching then whole process

[@adamm7206]

It's great video, simple but really nice looking improvment old site. Looks nice and very modern great job !!!

[@AdrianTwarog]

Great to hear, thank you!

[@DzxZzz]

Awesome redesign and great walkthrough through the process!

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@peoplearecool8766]

WOW it looks amazing!

[@AdrianTwarog]

That’s the goal!

[@milestehmad117]

I would really love to see a video in this style taking this design and then coding it out, Just found your channel great video instant sub

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@aminemaamir5287]

Looks amazing Adrian, thanks for sharing, you made it look so easy, that's not fair 😅

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@ahmedferradj8653]

This is amazing.Using Figma and the other prototyping softwares are going to be more virzl day after day.Which you a good career.

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@grupith8310]

As a new web developer, I found out that wire-framing is amazing. Something as little as "I don't know where this should go" could completely derail my focus on a project.

[@الإسلامدينالحق-خ5ت]

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life... kzbin.info/aero/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

[@Posimistic]

You've got a great setup bro

[@md.ranjumia8000]

wow!!!!!! what a nice video bro many many Thanks.

[@tirtharajchakraborty8100]

Wow so good 🔥... lesson I've learned from this video...1. create a rough idea or sketch, you can do that with a pen and paper also, u don't need an ipad . 2. Then design it into figma ....

[@AdrianTwarog]

Exactly on point!

[@PowerBiWithVivek]

You really helped m e get started

[@dorin-trusca]

Adrian can you show us how to make a website look good on big screens? For exemple let's say that i want to open a website in fullscreen mode on a Samsung Odisey (like the one that you have).How that website should look? I hope You get the point...english isn't my first language.

[@AdrianTwarog]

Interesting idea, i like it, yeah sure ill add it to my future planned videos

[@jlotayco]

That was epic! Neat Design!

[@shareb1t]

as a guy with 14years experience in web development (me) i can say that guy knows what he doing :)

[@fyuchargroup611]

True master composition

[@AkashYadav-pq6de]

What is that tablet you are using ? Looks useful & supercool .

[@AdrianTwarog]

iPad with Concepts App

[@fvgoya]

THAT is a really good type content. Please do more videos like this one.

[@osolinkcanada]

Very interesting, thanks for sharing such good videos.

[@babakdorani5914]

Would you mind tell me What do you use for wireframing and which application you used to draw with your mouse on screen .thank you so much

[@philmingo]

I need to see "from design to coding"

[@genjioto]

What was that wireframing software that he was using on that tablet? Are there any videos for that and figma?

[@wt4509]

What is that drawing app you are using on your tablet please? Thank you!

[@AdrianTwarog]

Concepts app

[@Hlvtse]

I loved this video ❤

[@lalitadityar.d1968]

Thank you , You deserve a sub

[@sycrox2]

Good job Adrian, thanks for sharing. What kind of monitor are you using?

[@kabogotechnology.100]

I subscribed your channel, I like your design.

[@AdrianTwarog]

Thanks!

[@NNNedlog]

Your setup is amazing

[@AdrianTwarog]

Thank you!

[@nikitakumawat6365]

Such a informative video

[@AdrianTwarog]

Awesome!

[@bmw428]

Great video!!! I just shared this to 3 of my friends. What app are you using on the iPad to sketch the wireframes?

[@AdrianTwarog]

Concepts App, thanks!

[@d.chaney8615]

Awesome work!!!

[@AMNOWTECH]

Great view created I started using blogger 4 now Can I use the figma there

[@alifhasanshah8057]

Will you make a playlist for adobe xd design to responsive frontend with Html Css bootstrap 5 JS ??... ( Ecommerce, Trave, Digital Agency )

[@AdrianTwarog]

Yeah plan to do some stuff there too!

[@TechMantra2]

That was a great design. I wonder how did you create this without considering a typescale from the beginning. Loved it

[@mahmutolcaycelik1909]

Hello, what ios app are you using in the video for drawing ? Thx.

[@AdrianTwarog]

Concepts App!

[@techzzoid]

Loved it❤️

[@RomilJain-wt3lb]

pressing cmd+z for being a pro designer

[@AdrianTwarog]

It definitely makes life easier after the fact!

[@AnggaPratamaAsalNgawur]

lol yeah im with u bro

[@user-nw3ok8ud4f]

people think something wrong with them, because 10x designers from youtube are lightning fast)

[@rhysdyson2880]

I love the way you used a gradient to extend the hero image and left align it😍 What app do yo use to sketch on the iPad? I’ve tried quite a few but none have stuck for me

[@the.mackuha]

The app he used is called Concepts. I used it before and it was amazing for wireframing since it uses an infinite canvas

[@orlius]

Very nice vidéo format

[@AdrianTwarog]

Thanks!

[@d8nya1]

For redesigns do you need to do research, journey maps etc?

[@icealgagan3485]

Hey there what builder do you use to build this on cms platform

[@twistedbam5842]

Hello. What are you using in order to draw on screen like this: 0:12 . Thanks

[@AdrianTwarog]

Epic Pen

[@twistedbam5842]

@@AdrianTwarog Hey, just installed it. Thanks a lot for taking your time to reply. I owe you a beer! :)

[@mika_il8170]

🖐plz what is the diff between coding a website with html/css and what in the video🙏

[@linjianru]

Really awesome!

[@constWardtz]

So Cool. ❤️

[@AdrianTwarog]

Thanks!

[@rudyls]

AMMAZING. THANK YOU

[@jimmyj.6792]

Awesome website 😍

[@dabashesadhikery1507]

impressive work Twarog

[@Abhishek-_-Sharma]

this is 🔥🔥🔥🔥🔥🔥🔥

[@burner918]

Great video. Thanks for sharing this. Really helpful. What app did you use to create your mockups on the iPad? Was that Procreate?

[@AdrianTwarog]

Concepts App

[@burner918]

@@AdrianTwarog Thanks :-)

[@Leo_Santisteban]

Hi! I don’t know anything about web design but, as of what i understood, figma helps you make the design, but how do you make it actually work? Like, to add links to each button, hover effects, etc...?

[@codevev]

Great video! Design skills is something that I definitely lack. Any tips on how to get better at it?

[@jetzemeilink]

I'm new to design to and what I like to do is looking up different websites to get inspiration and then try to recreate the design and if you want you can give it your own flavour. It's really hard just to be original if you lack the skills and are not seeing patterns a experienced designer sees. as Picasso said: "learn the rules like a pro so you can break them like an artist" I'll leave you a repo of Brad Traversy lots of awesome design tools and resources: github.com/bradtraversy/design-resources-for-developers

[@DivijShrivastava]

Great video 👌🏻

[@AngriestEwok]

What's that tablet he's using to sketch up the design to begin with?

[@AlinGP4]

i love that ctrl+z and yor move 3:28

[@thecodetex]

Nice 👍

[@AdrianTwarog]

👌

[@aymanmakhoukhi3591]

MASTERPIECE