웹사이트 레이아웃 및 디자인 방법(디자인 기술 없이!)

고객을 위한 프리랜서 웹사이트를 구축하거나 포트폴리오를 구축하려는 경우 다음과 같은 난제에 봉착했을 수 있습니다.

웹 디자인 기술이 없다면 어떻게 웹사이트를 만들 수 있습니까?

다음은 몇 가지 옵션입니다.

• 웹 디자이너를 고용하여 디자인을 만들어줄 수도 있지만 (훌륭한) 디자이너는 저렴하지 않습니다.
• Fiverr 또는 Upwork에서 값싼 디자이너를 찾을 수 있지만 위험할 수 있다는 것을 알고 있습니다.
• 또는 무료 또는 프리미엄 테마나 템플릿을 다운로드할 수 있지만 때로는 원하는 대로 되지 않는 경우가 있습니다.

또 다른 옵션은 웹사이트를 레이아웃 및 디자인하고 자신만의 프런트 엔드를 구축하는 몇 가지 기본 기술을 배우는 것입니다.

이제 이 기사를 읽는 시간 안에 멋진 디자이너가 되지는 못할 것입니다. 그리고 복잡한 웹사이트의 경우 전문 디자이너와 협력해야 할 수도 있습니다.

하지만 대부분의 소규모 비즈니스에 적합한 간단한 웹사이트를 계획하고 디자인하는 방법을 배울 수 있다고 믿습니다.

이 방법에는 다음이 포함됩니다.

• 웹사이트를 시각적으로 구성하는 방법에 대한 기본 학습
• 기존 웹 디자인을 조사하여 영감과 아이디어를 얻습니다.

실제로 Coder Coder 웹사이트를 구축할 때 사용한 전략입니다! 물론, 너무 화려하지도 않은 아주 단순한 디자인입니다. 그러나 때로는 단순함만 있으면 됩니다.

웹용 레이아웃 및 디자인 방법에 대한 기본 사항을 알게 되면 포트폴리오 및 프리랜서 고객을 위해 사용할 수 있는 맞춤형 웹사이트를 구축할 수 있습니다.

물론 구축하는 각 웹 사이트는 경험을 제공할 것입니다. 시간이 지남에 따라 공예를 계속 연습하면서 점점 더 복잡한 디자인을 만들 수 있을 것입니다.

이 프로세스의 주요 단계는 다음과 같습니다.

• 웹사이트의 기본 사항 결정
• 웹사이트 레이아웃 계획
• 디자인 결합
• 최종 제품 구축

각 단계는 다른 웹사이트에서 수행하는 작업을 확인하고 웹사이트에 재사용할 부분을 뽑아내는 연구를 통해 추진됩니다.

한 가지 중요한 참고 사항:저는 귀하가 CSS나 귀하의 것이 아닌 이미지를 훔치는 것을 옹호하는 것이 아닙니다. (예를 들어, 복사 및 붙여넣기 작업으로는 아무것도 배울 수 없습니다.) 여기서 아이디어는 창의적인 아이디어와 개념을 얻고 이를 사용하여 유사한 것을 만드는 것입니다.

1. 웹사이트의 기본 사항 결정

색상이나 글꼴을 선택하기 전에 이 웹사이트에 대한 몇 가지 일반적인 질문에 답해 보겠습니다.

1. 웹사이트에서는 어떤 비즈니스를 홍보하나요?

피자 가게, 사진 작가의 스튜디오 또는 서점? 어떤 종류의 사업이든 웹사이트에서 혜택을 볼 수 있으므로 무엇이든 선택할 수 있습니다.

여기서는 Central Coffee라는 가상의 커피숍을 선택하겠습니다. 모두가 커피를 좋아하기 때문이겠죠?

2. 웹사이트에는 어떤 페이지가 있습니까?

몇 가지 일반적인 페이지는 홈페이지, 정보 페이지, 연락처 페이지 및 비즈니스가 속한 산업에 대한 페이지입니다.

웹사이트의 페이지 및 기타 일반적인 구조적 측면을 파악하는 가장 좋은 방법은 빠른 온라인 조사를 하는 것입니다.

2. 기존 웹사이트 조사

유사한 유형의 비즈니스에 대한 다른 기존 웹사이트를 확인하십시오. 이 웹사이트 중 3-4개를 보고 어떤 페이지가 있는지 확인하십시오.

웹사이트가 어떻게 디자인되었는지 확인하고 다음에 대해 메모해 보세요.

• 웹사이트의 페이지,
• 전체적인 스타일은 무엇인지,
• 물건을 탐색하고 찾는 것이 얼마나 쉬운지,
• 당신의 관심을 불러일으키는 모든 것

예제 웹 사이트를 찾기에 좋은 곳 중 하나는 Theme Forest입니다. 수많은 무료 및 프리미엄 웹 사이트 템플릿과 WordPress 테마가 있습니다. 그리고 가장 인기 있는 테마를 고수한다면 일반적으로 이러한 테마가 좋은 디자인의 예가 될 것임을 알 수 있습니다.

다음은 내가 찾은 테마의 한 커피숍 예입니다.

The7

페이지:
섹션이 있는 한 페이지 웹사이트:홈, 정보, 위치, 제안, 메뉴, 뉴스, 보도 자료, 블로그 게시물

스타일:
좋은 사진과 함께 현대적이고 깨끗합니다.

탐색:
탐색하기 쉬움

다음은 "시카고의 커피숍" 검색에서 찾은 몇 가지 웹사이트입니다.

웜홀 커피

페이지:
홈페이지, 블로그, 위치/연락처, 채용 정보

스타일:
일종의 모던함; 가게 사진이 더 그립습니다

탐색:
여기가 커피숍인지 즉시 알 수 없습니다. 사이트 탐색이 조금 어렵습니다.

카페 거리

페이지:
한 페이지 웹사이트, 섹션:홈, 카페(정보), 메뉴, 로스팅, 타임머신(주스), 문의 양식

스타일:
단순하고 현대적인(사각 공간)

탐색:
매우 쉽게 탐색할 수 있습니다. 각 섹션으로 스크롤할 수 있는 상단의 고정 메뉴 막대가 마음에 듭니다.

커피 만들기

페이지:
한 페이지 웹사이트, 섹션:홈페이지, 정보, 영업 시간, 위치, 상점, 케이터링, 이벤트, 연락처

스타일:
단순한 디자인은 흰색 배경에 텍스트가 있는 섹션 사이에 전체 너비 사진을 결합한 것입니다.

탐색:
매우 쉬운 탐색

사와다 커피

페이지:
홈페이지, 정보, 음식 및 음료, 보도 자료, 연락처 및 영업 시간, 레스토랑, 채용 정보

스타일:
디자인은 대부분 사진에 관한 것이며 텍스트는 거의 나중에 생각해야 할 것 같습니다.

탐색:
탐색이 조금 어렵습니다. 오른쪽 모서리에 햄버거 메뉴가 거의 보이지 않았습니다.

3. 자신의 웹사이트에 대한 메모를 작성하세요.

이제 여러 커피숍 웹사이트를 살펴본 후 어떤 기능이 일반적인지 훨씬 더 잘 알 수 있습니다. 그리고 우리는 효과가 있다고 생각하는 것과 효과가 없는 것에 대한 몇 가지 아이디어를 가지고 있습니다.

조사를 바탕으로 이제 자신의 사이트에 대한 메모를 작성할 수 있습니다.

Central Coffee의 경우 다음 섹션이 포함된 간단한 한 페이지 웹사이트를 유지할 것이라고 생각합니다.

• 헤더
• 홈
• 정보
• 메뉴
• 위치/연락처
• 바닥글

4. 웹사이트 레이아웃 계획

이제 사이트의 골격을 파악했으므로 각 페이지 또는 섹션에 넣고 싶은 요소로 살을 붙일 것입니다. 최종적으로 만들 레이아웃은 와이어프레임이라고도 합니다. .

와이어프레임에서 우리는 글꼴, 색상 또는 사진이 아직 없음을 의미하는 아무것도 정확하게 디자인하지 않습니다. 우리는 우리가 원하는 콘텐츠의 종류와 대략적인 페이지 위치를 파악하고 있을 뿐입니다. 이 시점에서 청사진이나 다이어그램에 가깝습니다.

헤더

Seven Coffee 데모 페이지와 Caffe Streets 웹사이트에 있는 상단 탐색 모음이 마음에 듭니다.

그러나 두 페이지 모두 중앙에 위치하며 로고가 먼저, 섹션이 뒤에 오도록 왼쪽에 정렬하는 것이 좋습니다.

데스크탑 버전용입니다. 태블릿 및 모바일의 경우 기본적으로 헤더에 로고와 햄버거 메뉴만 있습니다.

햄버거를 클릭하면 오른쪽에서 슬라이드하여 섹션 탐색을 표시하는 오프 캔버스 메뉴가 열립니다.

홈

한 페이지 사이트이기 때문에 "홈페이지"는 웹사이트를 로드할 때 처음 화면에 표시되는 것입니다. 그리고 Seven Coffee의 이름 아래에 작은 태그라인이 있는 것도 마음에 듭니다.

여기에서 배경에 이미지(예:Build Coffee)가 있고 그 위에 텍스트가 있다고 생각합니다. 데스크톱과 모바일 모두 동일합니다.

정보

모든 웹사이트에는 짧은 정보 섹션이 있으며 일부는 사진이 포함되어 있습니다. 카페에 대한 단락을 입력하고 사용자가 방문하고 싶어하도록 유도하기 위해 상점 내부 사진도 몇 장 포함합니다.

메뉴

웹사이트마다 메뉴를 다르게 처리합니다.

• Seven Coffee에는 가격이 표시된 메뉴 항목 그리드가 있습니다.
• Caffe Streets에는 항목 목록만 있습니다.
• 그리고 Build와 Sawada는 메뉴의 PDF에 링크합니다.

개인적으로 나는 휴대전화로 웹사이트를 탐색하고 PDF를 다운로드해야 하는 것을 싫어합니다. 그래서 음료와 음식이 있는 간단한 메뉴를 고수하고 사진 몇 장을 포함하겠습니다.

위치/연락처

위치, 영업시간, 연락처를 홈페이지 하단에 기재하고 싶습니다. 내 생각에 사용자는 사이트 상단에서 시작하여 하단으로 스크롤할 것입니다.

클릭 유도문안을 맨 아래에 배치하면 "지금은 무엇입니까?"라는 질문에 답할 것입니다. 특히 카페로 가는 길을 찾고 방문하기를 희망하여 방문자가 조치를 취하는 데 도움이 됩니다.

바닥글

바닥 글은 매우 최소화됩니다. 저작권 정보가 있는 작은 막대일 뿐입니다.

5. 완전한 와이어프레임 구축

다음은 데스크톱의 완전한 와이어프레임과 웹사이트의 모바일 버전입니다. Mockflow라는 무료 온라인 도구를 사용하여 만들었습니다. 하나의 프로젝트를 무료로 생성할 수 있으며 둘 이상의 프로젝트를 원할 경우 유료 요금제를 사용할 수 있습니다.

꽤 사용하기 쉽고 스케치 스타일 옵션이 재미있기 때문에 좋아합니다 🙂

(새 탭에서 전체 이미지를 보려면 미리보기 이미지를 클릭하십시오.)

6. 기본 설계 사양 결정

다시 말하지만, 우리는 매우 디테일하고 멋진 스타일을 만들지 않을 것입니다. 하지만 다음과 같은 몇 가지 기본 사항을 파악해야 합니다.

색 구성표

색 구성표는 단순히 웹 사이트에서 사용하는 다양한 색상입니다. 집을 페인트 칠하고 장식하는 것과 같다고 생각하십시오. 일반적으로 대부분의 공간에 회색 및 흰색과 같은 중성 색조를 사용하고 싶을 것입니다. 링크 및 버튼과 같이 튀어나오고 싶은 중요한 요소를 위한 하나 또는 두 개의 밝은 강조 색상.

색상 영감이 필요하다면 Canva에서 시도해 볼 수 있는 샘플 색상 팔레트가 있습니다.

Central Coffee 웹사이트의 경우 해당 Canva 링크의 Fall Collection을 사용하겠습니다. 브라운을 기반으로 한 따뜻한 색상 팔레트입니다.

커피숍에서 느낄 수 있는 향수를 불러일으키고 아늑한 느낌을 주려고 합니다.

글꼴

웹사이트로 돌아가보면 거의 대부분이 산세리프체("serif"가 없는 글자 또는 타자기와 같은 텍스트의 끝 표시줄)를 사용합니다. 나는 대부분의 텍스트에 대해 단순한 글꼴을 선택한 다음 제목과 헤드라인에 더 두꺼운 글꼴을 사용하여 약간 더 화려하게 만들 수 있습니다.

Google 글꼴은 웹사이트에 무료로 로드할 수 있는 글꼴을 찾을 수 있는 좋은 장소입니다. 모든 글꼴 모음, 두께 및 스타일이 사이트에 추가 로드를 추가하므로 너무 많이 사용하지 마십시오.

이미지/사진

웹사이트의 비즈니스 유형에 맞는 일반적인 스타일이나 분위기를 선택하세요. 커피숍의 경우 일반적으로 부드러운 조명, 아늑하거나 향수를 불러일으키는 인테리어 촬영을 위한 초대 사진, 커피숍에서 수다를 떨며 휴식을 취하는 사람들, 음식과 음료의 이미지와 함께 가고 싶을 것입니다.

일러스트레이션과 로고의 경우 웹사이트에서 사용할 수 있는 이미지와 함께 제공되는 무료 온라인 그래픽 디자인 도구가 있습니다. 몇 가지 예는 다음과 같습니다.

• 캔바
• 벡터
• 스내빠

7. 웹사이트를 구축하세요!

이제 모든 것이 어떻게 배치되는지 일반적으로 알려주는 와이어프레임이 있습니다. 또한 프런트 엔드 스타일을 안내하는 데 도움이 되는 디자인 참조도 있습니다.

상세한 PSD를 생성할 디자이너가 없기 때문에 방금 그린 와이어프레임으로 웹사이트 구축을 시작하겠습니다.

다음은 내가 일반적으로 웹사이트의 프론트 엔드를 구축하는 방법입니다.

1. 웹사이트 파일 설정
2. 폴더와 파일을 만들고 구성합니다.
3. 작업 실행기를 시작하고 실행합니다. (저는 이 프로젝트에 Gulp를 사용하고 있습니다.)
4. 각 템플릿에 대해 별도의 HTML 파일을 만듭니다.

그런 다음 각 HTML 템플릿에 대해 다음 단계를 수행하십시오.

1. 기본 HTML 요소로 골격 구조를 만듭니다.
2. 페이지 요소를 하나씩 구성합니다.
3. 각 요소에 대해 CSS 스타일을 추가하고 먼저 각 섹션이 올바르게 배치되었는지 확인합니다.
4. 작업하면서 브라우저에서 페이지가 어떻게 보이는지 확인하고 계속 수정합니다.

웹사이트가 반응형인지 확인

사이트를 구축하는 동안 일반적으로 데스크톱, 태블릿 및 모바일에서 스타일이 매끄럽게 보이는지 확인하는 것이 좋습니다.

다른 브라우저를 사용하여 자신의 컴퓨터에서 바탕 화면 스타일을 쉽게 확인할 수 있습니다. 모바일의 경우 다양한 휴대기기에서 웹사이트를 에뮬레이트하는 Chrome의 개발자 도구를 사용할 수 있습니다.

에뮬레이션 도구는 실제 휴대전화나 태블릿에 표시되는 것과 100% 똑같지 않을 수 있습니다. 따라서 스타일을 테스트할 때 웹사이트가 인터넷에 있을 때 결국 실제 전화로 스타일을 확인하고 싶을 것입니다.

다음은 웹사이트 표시를 테스트하는 데 사용할 수 있는 몇 가지 기기 에뮬레이터입니다.

• Responsinator.com(무료)
• Quirktools의 Screenfly(무료)
• Browserstack(유료) — Browserstack을 사용하면 실제 기기에서 가상 머신을 테스트할 수 있습니다.

완성품!

다음은 완성된 Central Coffee 웹사이트의 스크린샷입니다.

내 Github.io 페이지에서 실제 사이트를 직접 확인할 수 있습니다.

그래서 디자이너를 고용하지 않고도 웹사이트를 디자인하고 구축했습니다.

이 게시물이 도움이 되었기를 바랍니다! 아래 의견에 의견이 있으면 알려주세요.

게시물을 놓치고 싶지 않으세요? 아직 구독하지 않았다면 여기를 클릭하세요. 블로그에 새 게시물이 있으면 알림을 받습니다.