진짜 문제를 알아내는 유저 인터뷰 하기

가짜문제의 무덤을 벗어나, 진짜 문제를 해결하는 프로덕트 만들기 | 스타트업은 대부분 두 가지의 이유로 망한다. 1. 가짜 문제를 푼다. 2. 문제를 제대로 풀지 못하는 솔루션을 만든다. 진짜 문제를 규명하고, 그것을 잘 풀 수 있는 솔루션을 만들면 (즉 Zero to One을 하면) 나머지 문제는 어떻게든 해결할 수 있다. 팀의 문제해결능력이 평균 이하가 아니라는 가정 하에. 하지만 내가 만드는 서비스는 잘 될 수 밖

웹 사이트 디자인 개선을 위한 모범 사례 6가지

웹 디자인은 높은 소비자 특성과 미적 특성을 제공하기 위한 것이다. 방문자가 사이트에 머무르는 시간은 사이트가 얼마나 이해 가능하고 적응력 있고 매력적인가에 따라 다르다. 사용자가 올바른 사이트를 열었는지 확인하는 데 보통 15초 미만이 걸린다. 따라서 웹 디자인과 사이트 유용성은 전환율에 직접적인 영향을 미친다.

Fixing your BAD Alignment! Stop doing this one thing..

https://designcourse.com - Launching on January 4, 2022 (4 days!).
-- Today, I'm going to show you how to fix your improper alignment when designing layouts. It's a pet peeve of mine, and I see it often. Watch the video to find out what I'm talking about!

0:00 - Introduction
0:50 - First Example
2:15 - Second Example
4:11 - Final Example
5:46 - Recap
6:23 - Outro

Let's get started!

#alignment #ui #ux

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

1 Design Trend in 2022 That I Think will be BIG! (7 Examples)

https://designcourse.com - Learn UI/UX with my Interactive Platform!
-- Today, I'm going to examine 7 fantastic websites to identify a key trend that I think we'll see more of in 2022. Let's just say, it has to do with movement!

0:00 - Introduction
0:25 - Learn UI Design
1:06 - Example 1
3:55 - Example 2
5:06 - Example 3
5:45 - Example 4
6:32 - Example 5
7:05 - Example 6
8:29 - Example 7
9:19 - Final Thoughts

Let's get started!

#ui #trends #2022

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Designcourse.com.

Come to my discord server or add me on social media and say Hi!

Create A Responsive Repair Service Website Design [ HTML / CSS / SASS / JavaScript ] From Scratch

how to make a complete responsive repair services, computer repair, laptop repair, smartphone / mobile repair service website design using html css / sass and vanilla javascript step by step.
create a responsive single page repair service website design using html css / sass / scss and vanilla javascript tutorial for beginners.

the main feature of this website are:
✅ responsive header with toggle menu effect using vanilla javascript.
✅ responsive home section using css flexbox.
✅ responsive fun fact section using css grid.
✅ responsive about section using css flexbox.
✅ responsive services section using css grid.
✅ responsive lightbox gallery section using css grid.
✅ responsive facilities section using css grid.
✅ responsive team card section using css grid.
✅ responsive reviews section using css grid.
✅ responsive contact section using css flexbox.
✅ responsive footer section using css grid.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/17CS69n43Jxem_8ncpSadnNJJlyPFAJ0O/view?usp=sharing
( *you are free to use this source code )

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

lightgallery.js official website:
https://sachinchoolur.github.io/lightgallery.js/

lightgallery.js cdn links:
https://cdnjs.com/libraries/lightgallery-js

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

google fonts:
https://fonts.google.com/specimen/Montserrat

clip-path generator:
https://bennettfeely.com/clippy/

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/

New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas

Timestamp:
0:00 demo
2:57 file structure
4:04 header
22:55 home
28:02 fun fact
33:08 about
35:36 services
41:24 gallery
45:32 facilities
49:48 team
55:33 reviews
1:01:55 contact
1:08:10 footer
1:18:41 final demo


#FrontEnd
#RepairService
#SinglePage

Create A Responsive Multipage Education Website Design - HTML / CSS / SASS / JavaScript From Scratch

how to make a complete responsive multi pages online education / university / college website design using html css / sass and vanilla javascript step by step.
create a complete responsive online education / online learning / e-learning / college / university / school website design using html css / sass and vanilla javascript tutorial for beginner.

the main feature of this website are:
✅ responsive header with toggle menu effect using vanilla javascript.
✅ responsive login / register form with toggle / switch effect using vanilla javascript.
✅ responsive home slider using swiper.js.
✅ responsive subjects slider using css grid.
✅ responsive home courses slider using swiper.js.
✅ responsive about section / page using css flexbox.
✅ responsive teacher section slider using swiper.js.
✅ responsive reviews / testimonial section slider using swiper.js.
✅ responsive courses section / page with load more button using css grid and javascript.
✅ responsive contact section / page using css flexbox.
✅ responsive FAQ section with accordion effect using vanilla javascript.
✅ responsive logo section slider using swiper.js.
✅ responsive footer section with css grid.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1ZFEuiasBfQRduPrPDmi_vo8QoxEEeGYd/view?usp=sharing
( *you are free to use this source code )

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

swiper.js link:
https://swiperjs.com/

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

google fonts:
https://fonts.google.com/specimen/Nunito

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/

New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas

Timestamp:
0:00 demo
4:29 file structure
5:57 header
21:33 account form
37:02 footer
48:15 home
57:33 subjects
1:02:58 home courses
1:11:03 about
1:21:37 teachers
1:31:25 reviews
1:38:48 courses
1:50:30 contact
2:01:11 FAQ
2:09:49 logo slider
2:12:43 final demo


#EducationWebsite
#FrontEnd
#MultiPages

Create A Responsive Coffee Shop Website Design Using HTML - CSS - SASS - JavaScript - Bootstrap

how to make a complete responsive coffee shop website design using html, css / sass, javascript and bootstrap 5 from scratch.
create a responsive coffee shop website design template using html css / sass vanilla javascript and bootstrap 5 tutorial for beginners.

the main feature of this website are:
✅ responsive header section with menu toggler effect using javascript.
✅ responsive login form.
✅ responsive home section.
✅ responsive about section.
✅ responsive menu section using css grid.
✅ responsive gallery section using css grid.
✅ responsive reviews section.
✅ responsive contact form section using css grid.
✅ responsive blogs / post / news card section using css grid.
✅ responsive fooder section.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/13VtHLnlypbRM4ZfPMCn-Z21fkXxUhILW/view?usp=sharing
( *you are free to use this source code )

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

bootstrap cdn link:
https://cdnjs.com/libraries/bootstrap

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

google fonts:
https://fonts.google.com/specimen/Montserrat

clip-path generator:
https://bennettfeely.com/clippy/

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/

New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas

Timestamp:
0:00 demo
3:31 file structure
5:05 header & login form
35:25 home
41:59 about
48:36 menu
53:59 gallery
59:29 reviews
1:03:49 contact
1:16:20 blog
1:22:29 newsletter
1:27:10 footer
1:31:37 final demo


#FrontEnd
#CoffeeShop
#SinglePage

Create A Responsive Christmas Website Design - HTML CSS / SASS And Vanilla JavaScript - Step By Step

how to make a complete responsive animated Christmas ecommerce website design using html css / sass and vanilla javascript from scratch.
create a Christmas ecommerce / christmas decore / new year website design using html css / sass / scss and vanilla javascript template step by step for beginners.

the main feature of this website are:
✅ responsive header section with search icon and menu toggler using vanilla javascript.
✅ responsive home section with parallax scrolling effect using vanilla javascript.
✅ responsive about section using flexbox.
✅ responsive products section using grid.
✅ responsive services section using grid.
✅ responsive gallery section.
✅ responsive contact form section.
✅ responsive blogs section using grid.
✅ responsive footer section using grid.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1aLxFyyM_kfXvog9-NYKPWXbRcSvhhYyu/view?usp=sharing
( *you are free to use this source code )

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

AOS github:
https://github.com/michalsnik/aos

AOS website:
https://michalsnik.github.io/aos/

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

google fonts:
https://fonts.google.com/specimen/Nutito

clip-path generator:
https://bennettfeely.com/clippy/

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/

New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas

Timestamp:
0:00 demo
3:17 file structure
4:32 header
27:22 home
41:45 about
46:56 products
56:26 services
1:01:35 gallery
1:03:32 contact
1:07:03 blogs
1:12:55 footer
1:24:00 AOS
1:29:15 final demo


#ChristmasWebsite
#FrontEnd
#SinglePage

Responsive Burger Website Design Using HTML / CSS / SASS / JavaScript From Scratch

how to make a complete responsive single page burger / fast food / restaurant website design using html css / sass and vanilla javascript step by step.
create complete responsive animated burger website design template using html css and vanilla javascript tutorial for beginners.

the main feature of this website are:
✅ responsive home section.
✅ responsive service section using grid.
✅ responsive service section using grid.
✅ responsive menu section using grid.
✅ responsive about section using flex.
✅ responsive reviews section using grid.
✅ responsive contact section using flex.
✅ responsive blogs section using grid.
✅ responsive footer section.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1W3H-eciziZa74DzXbgqqehYYDeXgZ_Wj/view?usp=sharing

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

AOS github:
https://github.com/michalsnik/aos

AOS website:
https://michalsnik.github.io/aos/

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

google fonts:
https://fonts.google.com/specimen/Raleway

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/
08 - https://pngtree.com/
09 - https://www.pngegg.com/

New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas

Timestamp:
0:00 demo
2:39 file structure
3:52 header
24:34 home
29:33 service
32:56 menu
38:28 about
43:36 reviews
47:08 contact
55:43 blogs
1:01:16 footer
1:04:51 AOS
1:09:43 final demo


#FrontEnd
#BurgerWebsite
#SinglePage

How To Make A Responsive Online Education Website Design With HTML / CSS / SASS / Vanilla JavaScript

how to make a complete responsive online education / e-learning / online classes / college / online courses selling website design using html css / sass and vanilla javascript.
create a complete responsive online education website design template using html css / sass and vanilla javascript from scratch for beginners.

the main feature of this website are:
✅ responsive side bar menu with toggle effect using vanilla javascript.
✅ responsive home section using css flex.
✅ responsive info section using css grid.
✅ responsive grid section using css grid.
✅ responsive about section using css flex.
✅ responsive course section using css grid.
✅ responsive pricing table section using css grid.
✅ responsive contact section using css flex.
✅ responsive reivews section using css grid.
✅ responsive blogs section using css grid.

* SOURCE CODES *

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):
https://drive.google.com/file/d/1ZGgSMOrWRd5cfN9oH_PFgwCXTpBYc-qT/view?usp=sharing

*How To Download*

Step 1 :- click the google drive link ☝☝☝
Step 2 :- click on download link in the google drive.
Step 3 :- extract the zip file into your desired folder.
Step 4 :- open the folder and then rename each coding files.
Step 5 :- convert each coding files example ( index.txt to index.html ) - ( style.txt to style.css ) - ( script.txt to script.js ).
Step 6 :- open the converted index.html file into your browser.
Step 7 :- open your editor and put your converted into it and then edit it as you like.

font awesome cdn link:
https://cdnjs.com/libraries/font-awesome

google fonts:
https://fonts.google.com/specimen/Montserrat

Editor : - visual studio code with Laetus: Dark Vibrant Theme
Browser : - google chrome
UI Tool : - Figma
Images / Video / SVG : -
01 - https://www.freepik.com/
02 - https://storyset.com/
03 - https://undraw.co/
04 - https://pixabay.com/
05 - https://unsplash.com/
06 - https://pixabay.com/
07 - https://www.flaticon.com/

New To My Channel Subscribe Now And See More Stuff Like This:
https://www.youtube.com/c/MrWebDesignerAnas

Timestamp:
0:00 demo
2:57 file structure
4:15 header
21:52 home
28:11 info
32:46 category
40:22 about
43:57 courses
52:47 pricing
59:56 contact
1:11:22 reviews
1:15:45 blogs


#FrontEnd
#OnlineEducation
#SinglePage

Music Credit :
"Scott the Pisces - Crazy About You (feat. RAENE)" is under a Creative Commons (CC BY 3.0) license.
Spotify: https://open.spotify.com/artist/2DDeX...
Soundcloud: https://soundcloud.com/scottthepisces
Music promoted by BreakingCopyright: https://youtu.be/LXgxSg5DIuI