How to design a website like a pro

Рет қаралды 336,715

Күн бұрын

How to design a website like a pro from scratch. In this video I go through the whole process of making a website for Erik, a youtube programmer like me. The full video timelapse of the graphics design will also be posted on his channel for those interested.
The video covers how I plan out the wireframe design, prototype different ideas, before coming to a good UI and UX web design.
Website design is a process so hopefully seeing what steps I go through to create it will help others on the same journey.
Programming with Erik Channel:
/ programwitherik
Figma Design File:
www.figma.com/file/aHDUkYPVTT...
#website #design #programming
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui.com/
Feel free to follow me on:
🐦 Twitter: intent/follow?scr...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Software & Discounts:
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
✖ Editor X: www.editorx.com/adrian-twarog
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE

Пікірлер: 428

@developerfilip 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

Thanks Filip!

@achukstok 2 жыл бұрын

I belive Figma

@shakhzod_ayibov 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

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... kzfaq.info/sun/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

@amantiwari1190 2 жыл бұрын

Anybody else obsessed with that curved monitor.

@AdrianTwarog 2 жыл бұрын

I am!

@swafiaakter5295 2 жыл бұрын

i also

@siasquad7360 2 жыл бұрын

I am also

@stackingflow 2 жыл бұрын

omg. I can't unsee that humongous monitor

@pezreloaded8436 2 жыл бұрын

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

@CodingFire 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

Hahaha!!!

@CodingFire 2 жыл бұрын

@@AdrianTwarog lol

@zerosandones7547 2 жыл бұрын

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

@CodingFire 2 жыл бұрын

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

@yestermonth 2 жыл бұрын

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

@userexperienceconsulting6725 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

@TheRusticWanderer 2 жыл бұрын

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

@AZisk 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

@hamzahmd_ 2 жыл бұрын

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

@mukulrana1616 2 жыл бұрын

Love these camera shots. Amazingly cinematic!

@mohammadraufzahed 2 жыл бұрын

this was awesome bro. keep going, man.

@LoLMultiGamingRO 2 жыл бұрын

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 2 жыл бұрын

What can I say, I’m a wizard

@Saidur07 2 жыл бұрын

@@AdrianTwarog okay, this is epic 🤣

@emmanueldiogu5968 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

@fredg8655 2 жыл бұрын

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

@DzxZzz 2 жыл бұрын

Awesome redesign and great walkthrough through the process!

@user-ri2ms2mm7w 2 жыл бұрын

@dailymeow3283 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

Thanks :)

@tforrest6779 Жыл бұрын

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

@pablowbk 2 жыл бұрын

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

@jlotayco 2 жыл бұрын

That was epic! Neat Design!

@fvgoya 2 жыл бұрын

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

@abelareiza9269 2 жыл бұрын

Awesome content as always Adrian! Keep it up, man

@AdrianTwarog 2 жыл бұрын

Thanks!

@user-ri2ms2mm7w 2 жыл бұрын

@hamsta-rush6906 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

@JeramieSaito Жыл бұрын

wow so quick and simple!

@jevespada324 2 жыл бұрын

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

@mrthepilvitv4105 2 жыл бұрын

Make more videos like this one! Good job!

@suryarajbhaduri994 2 жыл бұрын

Super awesome!🚀

@aminefarhat8382 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

Figma!

@user-ri2ms2mm7w 2 жыл бұрын

@SunnyJaySabuero 2 жыл бұрын

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

@atamohammadi3965 2 жыл бұрын

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

@corneliustucker6939 2 жыл бұрын

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

@d.chaney8615 2 жыл бұрын

Awesome work!!!

@TechMantra2 2 жыл бұрын

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

@francescociulla 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

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

@milestehmad117 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

@AbdulWahab-ue4xx 2 жыл бұрын

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?

@peoplearecool8766 2 жыл бұрын

WOW it looks amazing!

@AdrianTwarog 2 жыл бұрын

That’s the goal!

@Posimistic 2 жыл бұрын

You've got a great setup bro

@designup8 2 жыл бұрын

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

@adamm7206 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

Great to hear, thank you!

@aminemaamir5287 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

@user-pm4vd6ij8i 2 жыл бұрын

Really awesome!

@md.ranjumia8000 2 жыл бұрын

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

@badhonebrahim7707 2 жыл бұрын

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

@tb_media3219 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

Thanks, will do!

@kleytman 2 жыл бұрын

You know what you are doing man

@tears_falling 2 жыл бұрын

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

@RedJackWZ 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

Work small, work your way up!

@user-ri2ms2mm7w 2 жыл бұрын

@CREATIVEEXPERTZ 2 жыл бұрын

@@RedJackWZ exactly same thing happens with me

@prashantrayamajhi 2 жыл бұрын

looking forward to more videos like this :)

@AdrianTwarog 2 жыл бұрын

Good to know and hear!

@osolinkcanada Жыл бұрын

Very interesting, thanks for sharing such good videos.

@doroaros 2 жыл бұрын

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 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

@isiahjones_33 2 жыл бұрын

Wow! Great design.

@AdrianTwarog 2 жыл бұрын

Cheers!

@techzzoid 2 жыл бұрын

Loved it❤️

@fyuchargroup611 2 жыл бұрын

True master composition

@mahlatsemabulane7870 4 ай бұрын

I loved this video ❤

@codesus99 2 жыл бұрын

This is incredible Adrian

@AdrianTwarog 2 жыл бұрын

Thanks!

@PowerBiWithVivek 2 жыл бұрын

You really helped m e get started

@simonvandenhende5274 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

@rudyls 2 жыл бұрын

AMMAZING. THANK YOU

@chiragsingla. 2 жыл бұрын

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

@dabashesadhikery1507 2 жыл бұрын

impressive work Twarog

@lalitadityar.d1968 2 жыл бұрын

Thank you , You deserve a sub

@jimmyj.6792 2 жыл бұрын

Awesome website 😍

@winterassociation5739 2 жыл бұрын

You are amazing!

@thiagodias5508 2 жыл бұрын

Awesome!!!

@sycrox2 2 жыл бұрын

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

@beenmicrophone5817 2 жыл бұрын

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.

@swapnilcodes 2 жыл бұрын

Awesome♥️

@DivijShrivastava 2 жыл бұрын

Great video 👌🏻

@mauriciomatias6261 2 жыл бұрын

nice desing!

@aymanmakhoukhi3591 2 жыл бұрын

MASTERPIECE

@ahmedferradj8653 2 жыл бұрын

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

@user-ri2ms2mm7w 2 жыл бұрын

@gauravkharel3074 2 жыл бұрын

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 2 жыл бұрын

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

@nikitakumawat6365 2 жыл бұрын

Such a informative video

@AdrianTwarog 2 жыл бұрын

Awesome!

@mohit1483 2 жыл бұрын

Yr design videos are shooting up make more design videos loved yr figma crash course and ofcourse this video is also 🔥

@naveenkumarb2746 2 жыл бұрын

Can you make a video regarding how to place website from figma to live: it's my request, thank you This video is awesome 💜

@grupith8310 2 жыл бұрын

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.

@user-ri2ms2mm7w 2 жыл бұрын

@milindkhadse556 2 жыл бұрын

Just amazing

@AdrianTwarog 2 жыл бұрын

Thank you :)

@ismailvedia17 2 жыл бұрын

Perfect broo 👌💜

@AdrianTwarog 2 жыл бұрын

Thanks :)

@philmingo 2 жыл бұрын

I need to see "from design to coding"

@meow-lily Жыл бұрын

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

@AdrianTwarog Жыл бұрын

Oh no!!!

@icealgagan3485 2 жыл бұрын

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

@kabogotechnology.100 2 жыл бұрын

I subscribed your channel, I like your design.

@AdrianTwarog 2 жыл бұрын

Thanks!

@PixiLoveOfficial 2 жыл бұрын

amazing good job

@flarethriveltd 2 жыл бұрын

Nice one guy

@orlius 2 жыл бұрын

Very nice vidéo format

@AdrianTwarog 2 жыл бұрын

Thanks!

@DeveloperRimon 2 жыл бұрын

so awesome

@Abhishek-_-Sharma 2 жыл бұрын

this is 🔥🔥🔥🔥🔥🔥🔥

@Sna_33 2 жыл бұрын

Great!!!

@chellam578 2 жыл бұрын

Make videos on beautiful web design like how to choose colors shapes fonts and from design to actual code

@AlinGP4 2 жыл бұрын

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

@marcelocch 2 жыл бұрын

3:27 there is something weird happening on the keyword, looks like CTRL SHIFT Z is the only keys working LOL! Nice VIDEO, Loved it!

@koolkidz9193 2 жыл бұрын

I was expecting codes but this nice too.

@aminedaimallah310 2 жыл бұрын

nice design

@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

@bmw428 2 жыл бұрын

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

@AdrianTwarog 2 жыл бұрын

Concepts App, thanks!

@eguchiyuuki 2 жыл бұрын

great!!!

@pauljohn3898 2 жыл бұрын

It was great, I want to see How you make it using html css

@constWardtz 2 жыл бұрын

So Cool. ❤️

@AdrianTwarog 2 жыл бұрын

Thanks!

@madiyarabdukhashimov8570 2 жыл бұрын

Awesome)

@AdrianTwarog 2 жыл бұрын

Thanks!

@denniec7994 2 жыл бұрын

Great redesign and thank you for sharing your design process. I'd like to ask what the name of the app is that you use to sketch on your iPad. Thanks!

@user-fs2zt4tk6q Жыл бұрын

Concepts app

@AdrianTwarog 2 жыл бұрын

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

@nhanchi4320 2 жыл бұрын

So great

@_timestamp 2 жыл бұрын

Hi in your yt channel banner you forgot to do some color correction to remove the green screen from the edges (hair, arms,...), it doesn't look that professional :)

@AdrianTwarog 2 жыл бұрын

I had green lighting in the background, but I blame the camera, I need to get something better! Eventually!