필터
-
2
노 코드 툴, 버블(Bubble) A to Z
이것만 보면, 나도 버블할 수 있어! | 목차 1. 구현하지 못하면 죽도 밥도 못 된다. 2. 왜 버블인가? 3. 버블 기능 맛보기! 4. 버블로 이런 것도 돼?5. 관련 아티클 하나라도 해당되면, 재밌게 읽을 수 있어요 1. 사이드 프로젝트를 진행하고 싶다. 2. 아이디어를 상상만 하는 게 아니라, 직접 구현하고 싶다. 3. 진취적인 기획자가 되고 싶다. 구현하지 못하면 죽도 밥
-
Web Design for Beginners | FREE COURSE
If you're new to web design, this course on web design for beginners will teach you everything you need to know. ► Download creative digital assets with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
“How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial.
In terms of fundamentals, you’ll learn about color, typography, spacing, sizing, imagery, and responsive web design. We’ll discuss the theory, best practices, and some tools you can use to make your job easier.
When it comes to common web design patterns, you’ll learn about the elements you can use to design a web page—things like headers, hero areas, buttons, image galleries, contact forms, and more.
For each of these patterns, we’ll look at the definition and some use cases, and then we’ll apply that knowledge to a demo project: a three-page portfolio website designed specifically for this course.
► Check out this link for the project brief and course assignments: https://bit.ly/37YMk4W
► Read the course notes (and more!) for Web Design for Beginners on Envato Tuts+: https://webdesign.tutsplus.com/articles/web-design-for-beginners-epic-free-course--cms-41118?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Link to wireframe portfolio website with Figma: https://www.figma.com/file/Ak0JQMv65digqiASGnoLI0/Portfolio-Website?node-id=0%3A1
What You'll Learn:
00:00:00 Welcome!
00:04:31 Course brief and assignment
00:05:48 UI design vs. UX design vs. web design
00:14:08 Learning to work with project briefs
00:19:59 Working with wireframes
00:28:08 Picking the right design tool
00:33:53 Color theory
00:51:36 Color harmonies, psychology and tools
01:03:11 Creating a color palette for our project
01:20:00 Let’s talk about typography
01:31:11 Creating the typography for our project
01:46:01 Spacing and sizing in web design
01:54:47 Using icons and images in web design
02:03:33 Definition and use cases for headers
02:11:39 Let’s design a header
02:28:16 Definition and use cases for hero areas
02:33:06 Let’s design a hero area
02:39:08 Definition and use cases for buttons
02:44:46 Let’s design some buttons
02:57:27 Definition and use cases for image galleries
03:01:38 Let’s design an image gallery
03:12:34 Definition and use cases for footers
03:17:55 Let’s design the footer
03:26:37 Definition and use cases for testimonials
03:31:48 Let’s design some testimonials
03:44:15 Definition and use cases for tabs
03:48:11 Let’s design some tabs
03:59:47 Definition and use cases for accordions
04:04:03 Let's design an accordion
04:13:19 Definition and use cases for contact forms
04:18:17 Let’s design a contact form
04:32:49 What is a responsive website?
04:36:55 Making layout changes for tablets and phones
04:56:44 Making a component responsive
05:09:52 A quick word about prototyping
05:16:11 Next steps and key takeaways
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
![[Storybook] 스토리북에 대해 알아보자](https://blog.kakaocdn.net/dn/be1lUk/btqEP27cqsZ/UoiGIxJPWqMhjOQBydkWf0/img.png)
[Storybook] 스토리북에 대해 알아보자
안녕하세요, Einere입니다. 이번 포스트에서는 Storybook이라는 툴에 대해 알아보도록 하겠습니다. Storybook이란? Storybook은 React나 Vue, Angular를 위한 고립된 환경에서 컴포넌트 UI 개발을 위한 오픈소스 툴입니다.
React의 철학 중 하나가 "고립된 컴포넌트를 이용해 재사용성을 높이는 것"임을 생각하면, 꽤나 잘 -
Don’t use 100vh for mobile responsive
Generally, we use height:100vh it is for fullscreen layout which is an easy hack and a convenient way to get better design. Here, the documentHeight function sets a new style property var(‘ —…
-
Writing Cleaner CSS using BEM Methodology
Have you ever come across this syntax and assumed it was autogenerated and didn’t give it much thought? There’s a good chance you have. That’s what we’ll look at in this article, where you’ll learn…
-
Building landing pages: A sneak peak behind our process
The ultimate guide to building landing pages
-
11 steps to keep Figma clean
We all probably already know how it is to receive a project from someone else. Not everyone works the same way, it’s what makes our field…
-
Using Figma interactive components to create functional buttons
Using Figma’s new Interactive Components to make reusable buttons in your prototypes
-
How we use Figma’s API to deliver design to the production
Why did we choose Figma?
-
Elements of Design: Color and Contrast
Use color and contrast to grab attention and gain brand trust.. “Elements of Design: Color and Contrast” is published by Kristi Pelzel in Upskilling.
-
UI/UX Design: 100% Remote Usability Testing with Maze
How to setup streamlined remote usability testing with maze.co, and get real, actionable results.
-
잘 팔리는 기업용 소프트웨어 디자인하기
우리가 만드는 소프트웨어는 잘 팔려야 합니다. 하지만 그러한 제품(특히 기업용 소프트웨어)이 갖춰야 하는 기능이 겉으로 잘 드러나지 않는 것이라면, 잘 팔리는 제품을 만들기란 쉽지 않습니다. 이런 특성으로 인해서 다음과 같은 2가지의 어려움이 발생합니다.
-
회사 업무 시스템도 UX 시대! 업무효율 높이는 노하우 대방출~
이 세상의 모든 제품, 시스템을 만드는 사람들에게 ‘사용성’이라는 단어는 이제 매우 익숙해졌습니다. 달라진 것이 있다면 ‘사용성’이라는 개념이 일반 사용자뿐만 아니라 제품이나 시..
-
실무자를 위한 앱, 웹 UI 디자인 분석법 | 요즘IT
UI를 통해 원하는 정보를 얻기 위한 과정은. 수많은 선물박스 속에서. 내가 좋아하는 상품을 찾는 과정과 비슷합니다. 예를 들어 100개의 선물박스가 있다고 했을 때. 내가원하는 박스는 두개 정도라고 해볼게요. 다만 어디에 무엇이있는지는 모르다보니, 여러가지 방식을 써야합니다.
