Web Design

웹사이트의 레이아웃

by TheVOS posted Mar 14, 2019 Views 1 Likes 0 Replies 0
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付
?

Shortcut

Prev前へ 書き込み

Next次へ 書き込み

Larger Font Smaller Font 上へ 下へ Go comment 印刷 添付

웹사이트는 많은 정보를 담고 있습니다.

저마다 각양각색의 콘텐츠를 다양한 형태의 레이아웃으로 배치합니다.


레이아웃이란 디자인 ·광고 ·편집에서 문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일(출처 : 두산백과)이라고 합니다.


우리가 보는 여러 매체들은 이러한 법칙에 의거하여 다양한 형태의 레이아웃으로 디자인되어있습니다.


(c) Pinterest


(c) Pinterest

보통 책이나 신문과 같은 매체들의 레이아웃은 "Grid"라는 격자를 바탕으로 텍스트와 이미지 그밖에 여러 요소들을 배치하게 됩니다.



(c) Google

방대한 텍스트의 가독성과 여러 페이지에 일관된 형태를 부여하기 위해서 2단 3단 혹은 4단 등 다양한 단의 경우의 수를 적용합니다. 


아마도 이러한 것들이 편집디자인의 개념이라고 볼 수 있겠죠^^

편집이 잘되어있다는 말은 "가독성"과 "심미성"등이 적절히 적용되었다는 말과 같습니다.


그렇다면 웹사이트도 이런 편집의 개념이 적용될까요?


(c) Pinterest

그렇습니다. 웹디자인도 "그리드"와 "단", "여백"등 편집의 요소가 적용이 됩니다. 텍스트와 이미지 혹은 그밖에 여러 가지 요소를 보기 좋게 그리고 사용성에 맞게 배치하는 개념은 동일합니다. 

(c) Pinterest



그렇다면 일반적인 종이매체의 편집과 웹사이트의 편집은 무엇이 틀린가요?


(c) Pinterest

책이나 인쇄물은 인쇄할 대상에 맞는 크기로 격자를 만듭니다.

하지만 웹사이트는 "해상도(Resolution)"라는 개념이 적용되죠.


(c) Pinterest

보통 웹사이트의 그리드에서 단(Coulume)을 12개까지 만들면 PC부터 Mobile까지 다양한 해상도에 대응 할수 있는 레이아웃을 만들 수 있습니다.




일반적으로 책에서는 "목차"를 통해 원하는 곳을 갈 수 있습니다.

(c) Pinterest


웹사이트에서는 GNB메뉴를 통해 원하는 메뉴를 더욱더 빠르게 이동할 수 있습니다.

(c) Pinterest


또한 버튼을 통해 사용자가 원하는 기능을 실행시킬 수도 있습니다. 사용자와 어떠한 서비스를 연결해주는 매개체가 바로 UI인데 웹디자인에서는 이러한 UX/UI개념을 바탕으로 레이아웃을 고민하게 됩니다.

(c) www.dominos.co.kr



그리고 모션을 통해 단순한 콘텐츠를 좀 더 생동감 있게 전달하기도 합니다.


결론적으로 편집+웹사이트의 속성을 잘 이해하고 그것을 적절히 접목하면 보기도 좋고 사용성 좋은 웹디자인을 만들 수 있을 것입니다.


웹디자이너로서 편집과 새로운 레이아웃을 만드는 것이 취약하다고 느끼신다면, 이러한 디자인의 기본 속성인 "레이아웃"에 대한 이해가 부족해서 일수도 있습니다.


카드 디자인과 빅 비주얼의 조합이라는 하나의 트렌드가 비슷한 모습을 보일 수는 있지만, 좀 더 디자인의 기본적인 개념에 입각하여 작업한다면 안정적이고 경쟁력있는 디자인을 할 수 있습니다.



오브로디자이너



[ 원문출처 ] https://brunch.co.kr/@5bro/66

?

  1. 14Mar

    웹사이트의 레이아웃

    웹사이트는 많은 정보를 담고 있습니다. 저마다 각양각색의 콘텐츠를 다양한 형태의 레이아웃으로 배치합니다. 레이아웃이란 디자인 ·광고 ·편집에서 문자 ·그림 ·기호 ·사진 등의 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 일(출처 : 두산백과)이...
    Date2019.03.14 CategoryWeb Design ByTheVOS Reply0 Views1 file
    Read More
  2. 스크롤에 반응하는 jQuery플러그인 모음 10가지 24Feb

    스크롤에 반응하는 jQuery플러그인 모음 10가지

    非公開設定の書き込みです。
    Date2019.02.24 CategoryIT関連ニュース ByTheVOS Reply0 Views0 secret
    Read More
  3. 11Dec

    검색엔진 최적화 방법 - Canonical 태그의 중요성과 활용 방법

    Canonical 태그에 대하여 알아보고 어떻게 사용하며 SEO에 어떤 장점이 있는지 함께 알아봅니다. 먼저 Canonical 태그는 무엇일까요? # Canonical 태그란? Canonical 태그는 페이지의 헤더에 삽입하는 코드로 현재의 웹페이지의 대표 url주소를 검색엔진에 알...
    Date2018.12.11 Categoryマーケティング手法 ByTheVOS Reply0 Views9 file
    Read More
  4. 23Nov

    THEVOSでWEBシステム開発に使用されているPHPバージョンのご案内

    PHPバージョンの詳細は以下です。 PHP7.2.6 / PHP7.1.18 / PHP7.0.30 現在公式にサポートされているバージョンです。 PHP7 は PHP5 と比較してパフォーマンスが大幅に強化されています。 ※ 現在使用しているPHPのバージョンが5.Xのバージョンの以下の開発を依...
    Date2018.11.23 Categoryお知らせ ByTheVOS Reply0 Views40 file
    Read More
  5. 01Nov

    Spoqa、「Spoqa Han Sans」フォント無料配布

    スポカーが来る韓国のハングルの日を記念して独自開発したフォント「Spoqa Han Sans」を発売・配布する10月8日発表した。 Spoqa Han Sansは、GoogleとAdobeは合作開発した「本ゴシック」フォントを変更して開発された。本ゴシックに含まれている英語、数字、...
    Date2018.11.01 CategoryIT関連ニュース ByTheVOS Reply0 Views75 file
    Read More
  6. 11Oct

    Facebook のアカウント情報を搾取するマルウェアに注意

    Facebook のアカウント情報を搾取するマルウェアが発見されており、注意が必要である。 PC がマルウェアに感染すると、「構成ファイルが見つかりません。応用プログラムを再インストールしてください。」という偽のメッセージが画面に表示され、バックグラウ...
    Date2018.10.11 Categoryセキュリティ ByTheVOS Reply0 Views77 file
    Read More
  7. 24Apr

    피해자거나 공범(?)이거나, USB 악성코드

    대학생「J」은 미처 출력하지 못한 자료를 USB에 담아 서둘러 학교 앞 인쇄소를 찾았다. 다행히 출력한 자료와 함께 수업 시간에 늦지 않게 강의실에 도착한 그녀는 뿌듯한 마음으로 노트북을 켜고 USB를 연결했다가 깜짝 놀랐다. USB 에 있던 파일이 전부 사...
    Date2018.04.24 Categoryセキュリティ ByTheVOS Reply0 Views207 file
    Read More
  8. 31Mar

    サイトをオープンしました。

    まだ正常なオープンはありません。 ホームページが完成していないが、顧客との連絡をご利用になれするためにオープンしました。 お客様の作業が押されており、当社のホームページを飾るのはちょっと先送りておくことにしました。 内容を着実に詰めていきます。
    Date2018.03.31 Categoryお知らせ ByTheVOS Reply0 Views126 file
    Read More
  9. 27Mar

    「DreamBot(ドリームボット)」ウィルス感染による不正送金被害にご注意ください。

    最近、 「DreamBot(ドリームボット)」ウィルスに感染したパソコン等によるインターネットバンキングの不正送金被害 が全国的に広がっています。 このウィルスに感染すると、お客様がインターネットバンキングにログインする際に、正規の画面と全く区別がつか...
    Date2018.03.27 CategoryIT関連ニュース ByTheVOS Reply0 Views152 file
    Read More
  10. 15Mar

    株式会社オーセル無料制作サービスを開始します。

    ルーバディ製品をロンチングし、ホームページの制作と管理を依頼しました。 14日デザインの決定をし、15日から作業を開始します。
    Date2018.03.15 CategoryTHEVOSのたより ByTheVOS Reply0 Views117 file
    Read More
  11. 10Mar

    無料SSLサポートサービスが追加されました。

    Let's Encrypt Wildcard SSLサポートします。 Total Management Serviceに無料SSLのサポートサービスが追加されました。
    Date2018.03.10 Categoryセキュリティ ByTheVOS Reply0 Views114 file
    Read More
  12. 04Feb

    CTA 「Call to Action」とは何でしょうか?

    「Call to Action」とは何でしょうか? コールトゥアクション(Call to Action)とは、ホームページの訪問者に何らかの行為を勧めたり誘導するためのツールや技法を意味する。「転換率」を高める重要な役割を果たしている。 下の画像で赤丸で示した要素がコー...
    Date2018.02.04 Categoryマーケティング手法 ByTheVOS Reply0 Views127 file
    Read More
リスト
Board Pagination Prev 1 Next
/ 1