병원 홈페이지 제작 과정 기획, 디자인, 검색엔진 최적화 완성하기

오늘부터 웹디자인 케이스를 지정하고 기획부터 디자인과 검색엔진 최적화 과정까지 진행하는 프로젝트를 시작해 보려합니다. 첫 번째 케이스는 병원 홈페이지 제작이며 기획과 디자인 과정, 검색엔진 최적화 개념을 정리해 보았습니다.

 

병원 홈페이지 제작, 기획 단계

본사는 병원 웹디자인 의뢰나 고객 문의에서 가장 먼저 생각하는 게, 진료 과목을 바탕으로 한 컨셉 결정인데요, 이는 모든 디자인과 카피에 적용되며, 실제 폰트 종류나 병원 홈페이지 전체 컬러를 결정하기 때문에 우선적으로 고려할 수 밖에 없습니다.



병원 홈페이지 제작 관련해 첫 번째로 이번 프로젝트 기획은 다음과 같습니다.

심플한 슬라이드로 홈페이지 메인 배너를 디자인하고, 의료 서비스 바로가기, 병원 소개, 이벤트 안내, 진료 과목 소개, 새소식, 푸터 디자인 순으로 총 7개의 섹션으로 기획 했습니다.

이번 병원 홈페이지 제작 툴은 워드프레스이며, 엘리멘터 페이지 빌더와 엘리멘터 프로를 이용합니다. 모바일과 태블릿 반응형으로 디자인 될 계획입니다.

세부 기획은 다음과 같습니다.

와이드 값, 1280
기본 폰트, 프리텐다드
포인트 컬러, A9907E

 

디자인과 검색엔진 최적화 준비

실제 디자인을 하면서 상황에 따라 변경될 수 있지만 기본 컨셉은 심플한 디자인을 추구하면서 병원 홈페이지 방문자 동선을 고려한 UI에 집중할 계획입니다.



이미지 사용은 유료 이미지 사이트와 어도비 포토샵을 이용했습니다. 이미지 압축을 위해 PNG 사용은 최소화 했으며, 부득이한 경우 화이트 배경 JPNG 이미지로 대체합니다.

실제 인터랙션 페이지에서 해당 웹사이트 헤더 부분은 본사 기본 헤더가 보일 수 있지만, 여러분이 참고하셔서 디자인 할 경우에는 이는 실제 웹사이트 제작 과정에서 변경 가능한 부분이니 감안해서 디자인하기 바랍니다.

디자인 세부 포스팅은 주간 3회 이상 진행하여, 최소 2주 이내 병원 홈페이지 제작에서 랜딩 페이지를 완성하는 방식으로 진행할 예정이니 참고하시면 좋을 것 같습니다.



여러분은 해당 프로젝트를 통해 실제 워드프레스를 이용해 병원 홈페이지 하나를 직접 디자인할 수 있을 것이며, 엘리멘터 각 요소를 활용하는 방법을 알 수 있습니다.

검색엔진 최적화 개념은 폰트 배열과 키워드를 어떻게 넣는가에 집중해서 정리해 드릴 예정이지만 기본적으로 페이지 생성 과정에서 최적화 준비를 해야 합니다.

사실 이부분은 외부에 알릴 수 없는 부분이니 양해 바랍니다. 다만 웹사이트 검색엔진 최적화를 위해 웹디자인에서 어떤 부분을 고려해야 한다거나, 키워드 갯수, 타이틀 태그 순서와 같은 내용들은 자세하게 전해 드릴 예정입니다.

 

Omg Design 워드프레스 홈페이지 제작 아카데미

우리는 기본적으로 많은 사람들이 워드프레스를 활용해 브랜드 가치를 알릴 수 있기를 기대합니다. 이를 활용할 수 있는 뉴스룸 제작이나 분야별 홈페이지 제작 가이드 또한 이를 공유하기 위한 프로젝트로 이해해 주시면 좋겠습니다.



워드프레스 웹사이트 디자인에 관심 있는 여러분에게 도움이 될 수 있는 정보와 가치 있는 웹사이트 제작 방식을 전달할 수 있기를 바랍니다.

앞서 이야기 한 것 처럼 첫 번째 프로젝트는 병원 홈페이지 제작 디자인 입니다. 물론 해당 디자인은 일반 중소 기업 홈페이지로 활용할 수 있을 것이며, 프리랜서 관련 웹사이트도 직종에 따라 적용할 수 있도록 준비해 보았습니다.



현재 기초 시안으로 뽑은 매인 헤더 이미지를 확인한 후 관심 있는 분들은 앞으로 업데이트 될 단계 별 제작 과정을 참고하셔서 워드프레스 홈페이지를 함께 완성해 보시길 바랍니다.

인터렉션 페이지 링크이며, 프로젝트가 진행되면서 디자인이 추가될 수 있도록 하겠습니다.

다음 디자인 관련 포스팅에선 현재 메인 배너 슬라이드 섹션 제작 방식을 구체적으로 확인할 수 있습니다. 페이지 헤더 로고와 메뉴를 삭제한 상태입니다.

인터렉션 페이지 바로가기