2010 년대의 웹 디자인 트렌드가 여기에 있습니까?

폭로: 귀하의 지원은 사이트 운영을 유지하는 데 도움이됩니다! 이 페이지에서 권장하는 일부 서비스에 대한 추천 수수료가 발생합니다.


2018 년 웹 디자인 트렌드

월드 와이드 웹 초창기에는 웹 마스터가 모든 가능한 효과를 사용하는 것이 유행이었습니다. 애니메이션 GIF, 텍스트 깜박임 및 자동 재생 중간은 서핑하는 모든 사이트에서주의를 기울여야합니다..

인터넷의 초창기 시대는 흥미롭고 혁신적이지만 패턴 화 된 배경의 빨간색 텍스트와 같은 추세는 눈이나 사용자에게 친숙하지 않았습니다..

고맙게도, 우리는 웹이 탄생 한 이후 먼 길을 왔습니다. 전화 접속 모뎀 연결을 듣던 시절부터 온라인에 접속하는 데 사용 된 기술은 유선 전화를 받아 아무도 오프라인에서 발을 fingers 지 않은 손가락을 넘었습니다..

웹 디자이너도 변화하는 기술에 발 맞추어 진화해야했습니다. 지난 수십 년 동안, 사용자 경험에 초점을 맞추기 위해 진화하는 디자인 트렌드의 물결이 왔다가 사라졌습니다. 오늘날 디자이너는 그 어느 때보 다 미니멀리즘, 가독성 및 사용 편의성에 중점을두고 있습니다..

그러나 상황이 지속적으로 개선되는 동안 개선 추세 인 경향이 있어도 길을 따라 잘못 돌아갈 가능성이 항상 있습니다. 무한 스크롤은 더 많은 정보를 표시하고 방문자를 페이지에 더 길게 유지하는 데 도움이 될 수 있지만 사용자는 더 많은 기사가로드 될 때 계속 뛰어 넘는 웹 사이트 바닥 글을 보려고 할 때 좌절감을 느낄 수 있습니다.

고정 요소의 인기는 이해할 만합니다. 방문자의 눈 앞에서 중요한 정보를 유지하려고합니다. 그러나 해당 공유 버튼이 페이지 콘텐츠를 차단하기 시작하면 역효과를 낳을 수 있습니다. 웹 디자이너는 트렌드를 따라야하지만 창의성을 사용하여 이와 같은 문제에 대한 혁신적인 새로운 솔루션을 제시해야합니다..

올해의 트렌드에 관해서는 어떤 혁신이 이길 수 있고 남을지 10 년에서 20 년 후에 웃을 것이라고 말할 수 없습니다. 2014 년 웹 디자인 트렌드를 분석하면 어떤 트렌드를 계속 유지해야하는지, 어떤 트렌드를 남겨야할지 스스로 결정할 수 있습니다..

웹 디자인 트렌드

시대의 디자인 : 2014 웹 디자인 트렌드

웹은 웹 사이트가로드 되 자마자 배경에서 미친 색과 글꼴, 자동 음악이 재생되는 90 년대 초반부터 크게 발전했습니다. 오늘날의 웹은보다 단순하고 사용자 친화적 인 디자인으로 더욱 미니멀 한 접근 방식을 보여줍니다. 2014 년에 더 많이 볼 수있는 내용은 다음과 같습니다..

반응 형 디자인

  • 반응 형 디자인이란 웹 사이트가 화면을보고있는 화면의 크기에 따라 자동으로 조정됨을 의미합니다.
    • 사람들이 전통적인 컴퓨터 화면에서 벗어나면서 웹 디자인에 중요합니다..
      • 미국 성인의 90 %가 휴대 전화를 소유하고 있습니다.
      • 미국 성인의 58 %가 스마트 폰을 소유하고 있습니다.
        • 휴대 전화 소유자의 60 %가 휴대 전화를 사용하여 인터넷에 연결
      • 미국 성인의 42 %가 태블릿을 소유하고 있습니다.
  • 반응 형 웹 디자인에는 다음과 같은 유연한 조합이 사용됩니다.
    • 레이아웃
      • 모든 것이 픽셀이 아닌 비율에 따라 크기가 조정됩니다.
    • 이미지
      • 모든 것이 픽셀이 아닌 관계에 따라 크기가 정 해짐.
    • CSS 쿼리
  • 반응 형 디자인의 예는 다음과 같습니다.
    • com
    • com
    • com
  • 반응 형 템플릿을 직접 만들거나 기존 반응 형 프레임 워크를 구매하십시오..
    • 예를 들면 다음과 같습니다.
      • 아 바다
      • 싸다
  • 장점 :
    • 적은 유지 관리 : 여러 사이트 대신 하나의 사이트로 설계 및 유지 관리.
    • 더 나은 검색 엔진 최적화 (SEO) : 하나의 사이트는 하나의 URL 집합을 의미하므로 SEO를보다 쉽게 ​​관리 할 수 ​​있습니다..
    • 사이트가 지속적으로 시장에 출시되는 수십 가지 새로운 장치와 호환되는지 여부에 대해 걱정할 필요가 없습니다..
  • 단점 :
    • 구현이 예상보다 오래 걸릴 수 있습니다.
    • 기술은 여전히 ​​발전하고 있습니다.
    • 이미지는 크기를 조정하지 않고 축소 된 것이므로 페이지로드 시간에 부정적인 영향을 미쳐 방문자를 화나게 할 수 있습니다.

더 많은 스크롤

2014 년에는 구현하기가 쉽기 때문에 더 많은 스크롤이 표시됩니다..

  • 시차 스크롤 : 웹 사이트의 배경이 페이지의 나머지 부분과 다른 속도로 이동할 수 있습니다.
    • 예 : Nasa Prospect
    • 장점 :
      • 애니메이션으로 방문자를 놀라게 할 수 있습니다
      • 사용자에게 행동 유도 요청
      • 방문자가 전체 내용을 스크롤 할 때 페이지에 더 오래 머 무르도록 권장
    • 단점 :
      • 메타 정보가 하나만 있기 때문에 SEO가 인기를 얻습니다.
      • 단일 페이지에 많은 양의 데이터가 있으면 페이지 로딩 시간이 느려져 사용자를 실망시킬 수 있습니다
  • 가로 스크롤 : 위아래가 아닌 왼쪽에서 오른쪽으로 스크롤.
    • 예 : 세계 야생 동물 재단 지구 시간 2012
    • 장점 :
      • 디자이너가 화면에 더 많은 콘텐츠를 수용 할 수 있습니다.
    • 단점 :
      • 사용자는 자신이 측면으로 스크롤해야한다는 사실을 모르거나 전체 경험을 얻기 위해 측면으로 스크롤하고 싶지 않을 수 있습니다..
  • 무한 스크롤 : 사용자가 스크롤 할 때 페이지 내용을로드
    • 예 : Facebook 뉴스 피드
    • 장점 :
      • 빠른 브라우징
      • 터치 장치와 잘 상호 작용
      • 컨텐츠 노출 : 무한 스크롤은 새 컨텐츠와 기존 컨텐츠를 동일하게 노출하여 오래된 컨텐츠에 더 긴 “저장 수명”을 제공합니다.
    • 단점 :
      • 항해:
        • 사용자는 특정 항목으로 스크롤하거나 책갈피를 지정할 수 없으며 맨 위에서 다시 시작해야합니다..
        • 무한 스크롤은 사용자에게 넘어 가야 할 데이터의 양을 알려주지 않습니다..
      • 사용자 초점 : 스크롤에서 멀어지면 이전 참조 지점이 아닌 맨 위로 이동하여 사용자가 수행 / 읽기 작업에 집중하기가 더 어려워집니다..

적은 텍스트

  • 텍스트가 많은 디자인 대신 이미지, 아이콘 및 비디오에 중점을 둔 디자인이 더 많이 나타납니다..
    • com은 10 개 미만의 단어를 제공하며 사용자가 앱 사용 방법을 이해하기 위해 비디오를 시청해야합니다..
    • com은 홈페이지의 탐색 표시 줄에 작은 텍스트 단락과 몇 단어를 제공합니다..
    • The-Studio.co.il은 몇 단어와 이미지 만 제공합니다.
  • 장점 :
    • 보다 정교한 웹 디자인
  • 단점 :
    • 웹 사이트 디자인을 508 호환하기가 더 어렵습니다.
      • 508 준수 란 전통적인 방식으로 인터넷에 액세스 할 수없는 장애인을 위해 웹을 준수하도록하는 것을 말합니다..

플랫 사용자 인터페이스

  • 플랫 사용자 인터페이스 (UI)는 기능보다는 스타일에 중점을 둔 디자인을 나타냅니다..
    • 요소는 이름을 딴 것과 비슷하게 보이도록 만들어졌습니다..
    • 모든 것은 다음을 위해 설계되었습니다 :
      • 명쾌함
      • 간단
    • 다음을 제거하는 것을 의미합니다.
      • 그림자
      • 그라디언트
      • 경 사진 가장자리
      • 반사
  • 우리는 이미 그것을 보았다 :
    • 윈도우 8
    • 애플 iOS 7
    • 워드 프레스 3.8
  • Skeuomorphic 디자인에 대한 평면 디자인 작업.
    • Skeuomorphic 디자인은 시각적 세부 사항을 사용하여 한 가지를 다른 것으로 보이게합니다..
      • 예 : 자동차 내부에서 목재 판넬 사용
  • 장점 :
    • 간단한 사용자 인터페이스
    • 밝고 굵은 색을 사용하면 분위기가 좋아집니다
    • 훌륭한 타이포그래피에 집중
    • 영상이 선명하고 깨끗합니다
  • 단점 :
    • 사용성 문제 : 사람들은 항상 클릭하거나 터치하여 상호 작용할 위치를 알지 못할 수 있습니다.
    • 색상 팔레트를 맞추기가 어려울 수 있습니다. 색상을 많이 사용할수록 색상을 제대로 맞추기가 더 어려워집니다.
    • 약한 타이포그래피 디자인을 쉽게 발견 할 수 있습니다..
    • 전체 디자인이 너무 단순 해 보일 수 있습니다.

고정 컨텐츠

  • 탐색 막대 또는 사용자가 스크롤하는 동안 페이지에 유지되는 컨텐츠 섹션과 같은 페이지 요소를 나타냅니다..
    • 사이드 바 탐색이 그대로 유지되는 동안 ca에서 수평 스크롤 가능.
    • net은 웹 사이트의 왼쪽에 고정 된 위치 소셜 미디어 바를 갖추고있어 사용자는 바가있는 동안 컨텐츠를 스크롤 할 수 있습니다.
  • 장점 :
    • 사용 편의성 : 사용자가 원하는 것을 훨씬 쉽게 찾을 수 있습니다..
  • 단점 :
    • 고정 컨텐츠는 스크롤 너머의 공간을 낭비 할 수 있습니다.
    • 탐색 표시 줄과 같은 일부 고정 요소는 모바일 환경으로 변환하기 어려울 수 있습니다..

출처

  • 모바일 기술 자료 – pewinternet.org
  • 반응 형 웹 디자인 : 정의 및 사용법 – coding.smashingmagazine.com
  • 반응 형 웹 디자인이란 무엇입니까? – smallbiztrends.com
  • $ 3에서 17,389 웹 사이트 템플릿 및 테마 – themeforest.net
  • 응답 성이 뛰어난 웹 디자인의 장단점 – business2community.com
  • 시차 웹 디자인이란 무엇입니까? – 정의, 팁 & 고려 사항 – unleashed-technologies.com
  • NASA : 전망 – nasaprospect.com
  • WWF 음식 이야기 – assets.wwf.org.uk
  • 무한 스크롤은 모든 웹 사이트에 해당되는 것은 아닙니다 – nngroup.com
  • 무한대로 그리고 그 너머로! 무한 스크롤의 장단점 – inspiredm.com
  • Snapchat – snapchat.com
  • 스튜디오 – the-studio.co.il
  • 적은 텍스트 더 많은 멀티미디어 – 웹 사이트 디자인의 새로운 접근법 – designmodo.com
  • 분실물 – 매핑 페이지 – howto.gov
  • 평면 디자인이란 무엇입니까? – gizmodo.com
  • 평면 디자인의 장단점 – designmodo.com
  • 2014 년 피벗 웹 디자인 트렌드 – econsultancy.com
  • 고정 탐색 모음 : 장단점 – awwwards.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map