2016 년 웹 디자인을 형성 할 가장 인기있는 트렌드
시간이 갈수록 길어지면서, 많은 새로운 디자인 트렌드가 지평선을 장식하고 있습니다. 웹 디자인 분야는 새로운 도구, 워크 플로우 및 사용 가능한 레이아웃을 구성하는 모범 사례로 항상 변화하고 있습니다..
정확한 추세가 가장 큰 관심을 끌 것으로 예측하는 것은 어렵습니다. 그러나 최근의 역사는 산불처럼 성장하는 추세의 패턴을 보여줍니다. 나는 2015 년에 견인력을 얻은 20 가지 고유 한 추세를 정리했으며 2016 년에도 계속 좋을 것입니다..
1. UI 디자인을위한 앱 스케치
Sketch는 다음과 같은 모든 UI 디자인 작업을 위해 Photoshop을 신속하게 대체합니다. 저 충실도 와이어 프레임 에 고 충실도 모형 및 아이콘 디자인.
Sketch App은 웹 및 모바일 디자이너를 위해 특별히 제작 된 Mac 전용 응용 프로그램입니다. 모든 인터페이스에서 벡터 요소를 만드는 더 부드러운 작업 환경을 제공하지만 텍스트 효과 및 레이어 스타일과 같은 Photoshop에서 기대할 수있는 많은 기능을 유지합니다..
Sketch가 Windows 용으로 출시 될 것이라는 증거는 없지만 여전히 OS X 사용자들에 의해 가치있는 선택이되었습니다. 단순화 된 워크 플로우와 저렴한 가격표 덕분에 Adobe는 수익을 낼 수 있습니다. Sketch가 최상의 UI 디자인 경험을 계속 제공한다면 2016 년까지 계속 성장할 것입니다..
2. 브라우저 기반 IDE
데스크탑 IDE는 메모장 ++에서 Xcode 및 Visual Studio에 이르기까지 다양한 옵션으로 수 십 년 동안 사용되어 왔습니다. IDE를 사용하면 (다른 기능들 중에서도) 제안 및 구문 강조 기능을 사용하여 코드를 작성하는 것이 더 쉬워집니다..
그러나 전통적으로 IDE는 데스크톱 응용 프로그램으로 출시되었습니다. 지난 몇 년 동안 우리는 브라우저 기반 클라우드 IDE의 급격한 증가를 보았습니다. 이들은 웹 브라우저가 아닌 다른 소프트웨어를 필요로하지 않으므로, 개발자는 인터넷에 접속 된 모든 컴퓨터에서 코드를 작성할 수 있습니다.
Cloud IDE는 공유 또는 개인 저장을 위해 코드 스 니펫을 계정에 저장할 수있는 웹 응용 프로그램과 유사합니다. CodePen은 Jade / Haml 및 LESS / SCSS와 같은 사용자 정의 사전 처리와 함께 HTML / CSS / JS를 지원하는 가장 널리 사용되는 IDE 중 하나입니다..
Mozilla Thimble은 코드 작성 과정을 배우려는 개발자를위한 IDE입니다. 또한 Codeply는 Bootstrap이나 Zurb 's Foundation과 같은 특정 응답 프레임 워크를 테스트 할 때 파일을 다운로드 할 필요없이 훌륭합니다..
3. 무료 Sass / SCSS 믹스
프리 프로세서는 수년간 유행 해 왔지만 최근에는 웹 디자인 / 개발 분야 전반에 걸쳐 유비 쿼터스로 느껴질만큼 주류가되었습니다. 요즘 Sass / SCSS가 훨씬 더 많은 것을 제공 할 수 있다면 바닐라 CSS를 작성하는 것이 이상하게 보입니다..
한 가지 이점은 Sass 믹스 라이브러리의 공급 증가입니다. 간단한 믹스 인은 CSS에서 반복 가능한 코드를 생성하는 코드 스 니펫 또는 기본 기능과 같습니다. 언제나 자신 만의 글을 쓸 수 있지만 많은 개발자들이 친절하게 온라인에서 무료 mixins를 공개했습니다.
일부 믹스 인은 Bourbon과 같은 라이브러리에 있지만 다른 것들은 독립형 아이템이 될 수 있습니다. GitHub에서 Sass / SCSS 믹스 인에 대한 검색을 시도해보십시오..
4. 카드 레이아웃
웹 사이트 카드 레이아웃은 처음 몇 년 전에 Pinterest에 의해 대중화되었고 이후 콘텐트가 많은 웹 페이지의 추세가되었습니다. jQuery Masonry와 같은 무료 플러그인을 사용하여 다양한 높이와 너비의 애니메이션 카드로이 레이아웃 스타일을 모방 할 수 있습니다..
카드 레이아웃은 스캔 할 수 있어야하는 많은 데이터가있는 페이지에서 사용하는 것이 가장 좋습니다. Google Now의 방문 페이지는 카드 레이아웃을 사용하여 Google Now 앱을위한 선택적 카드를 광고합니다..
카드 레이아웃을 더 동적 인 그리드로 생각할 수 있습니다.이 레이아웃을 사용하면 더 많은 항목을 함께 나열하는 데 필요한 컨텐츠를 최소화 할 수 있습니다. UGSMAG 및 The Next Web과 같은 온라인 잡지는 최근 게시물 내용을 보여주는 데 사용되는 카드 레이아웃의 완벽한 예입니다.
5. 사용자 정의 Explainer 비디오
크고 작은 회사 모두 사용자 지정 설명자 비디오의 추세에 동참했습니다. 이들은 Crazy Egg 예제와 같은 애니메이션으로 종종 생성됩니다. 하지만 다른 비디오는 Instagram Direct와 같은 실사 영상에 의존합니다..
설명자 비디오의 목적은 제품이나 서비스가 어떻게 작동하는지 보여주기위한 것입니다. 방문자는 기능 목록을 훑어 볼 수도 있지만 제품 작동 방식을 알지 못합니다. 비디오는 모든 것을 시각적으로 명확하게 해 주며 단 몇 분 만에 중요한 것을 포함합니다..
맞춤형 설명 동영상을 만들기 위해 손을 잡고 싶다면이 Udemy 과정을 확인하십시오. 방문 페이지 디자인을위한 비디오에 초점을 맞춘 심층 연구.
6. 라이브 상품 미리보기
방문 페이지 디자인은 인터넷 속도와 브라우저 기능이 향상되어 놀라운 성장을 이루었습니다. 내가 알아 차 렸던 한 가지 주요 추세는 홈페이지 또는 맞춤 방문 페이지에서 실시간 제품 미리보기를 추가하는 것입니다..
Slack의 제품 페이지를 예로 들어 보겠습니다. Slack 인터페이스를 다루는 비디오 투어 및 벡터 그래픽이 특징입니다. 이 제품 미리보기는 잠재적 인 사용자가 제품 작동 방식을 엿볼 수 있도록하기위한 것입니다..
Webydo는 홈페이지에서 라이브 애니메이션을 재생하는 또 다른 멋진 예입니다. 이를 통해 방문자는 제품을 직접 데모하지 않고도 Webydo를 실제로 볼 수 있습니다. 그러나 제품 미리보기를 위해 항상 애니메이션에 의존 할 필요는 없습니다. Iconjar는 간단한 PNG 스크린 샷을 사용하여 제품의 기능과 작동 방식을 보여줍니다..
7. 자동화 된 작업 주자
프론트 엔드 개발의 세계는 웹 사이트 제작을위한 몇 가지 새로운 베스트 프랙티스로 너무 많이 바뀌 었습니다. Gulp 및 Grunt와 같은 작업 주자 / 빌드 시스템은 이전에 수동 작업이 필요한 많은 작업에 훨씬 더 자주 사용됩니다.
자동화는 신속한 처리와 품질 향상을위한 피의 원동력입니다. 기계는 실수를하지 않으므로 이론적으로는 더 적은 수의 문제를 안심하고 자동화 할 수 있습니다..
작업 주자가 어떻게 운영되는지 설명하는이 Reddit 게시물을 확인하십시오. 이러한 도구는 기본적으로 워크 플로의 일부를 자동화하는 JS 코드를 실행합니다. 사용자 지정 JS 또는 다른 사용자가 작성한 스크립트.
8. 네이티브 JS 모바일 앱
나는 직업에 적합한 도구를 사용하는 것을지지한다. 모바일 앱 개발의 경우 Android 용 Java, iOS 용 Objective-C / Swift를 의미합니다..
그러나 모든 사람들이 모바일 앱을 만들기 위해 새로운 언어를 배우고 싶어하지는 않습니다. 고맙게도 NativeScript 또는 React Native와 같은 대체 라이브러리로 기본 응용 프로그램을 만들고 컴파일하는 것이 더 쉬워졌습니다..
모바일 앱 프로그래머가되기위한 격차는 자바 스크립트를 통해 모바일 앱을 만드는 기능으로 단축됩니다. PhoneGap은 HTML / CSS / JS 코드를 기반으로 한 또 다른 옵션입니다..
제작 과정이 크게 다르지만 JS는 새로운 언어를 배우지 않고도 모바일 앱을 제작하려는 코더를위한 솔루션이되었습니다..
9. 디자인을위한 공동 작업 도구
인스턴트 메시징 및 그룹 채팅은 10 년 넘게 보급되어 왔습니다. 그러나 이러한 자원은 전통적으로 평문에 파일을 첨부 할 수있는 능력이 있습니다.
새로운 추세는 채팅 응용 프로그램 내에서 라이브 디자인 문서를 공유 할 수있는 기능입니다. 주목할 것은 주석과 주석이 문서의 바로 위에 쌓일 수있는 한 가지 예입니다. 이를 통해 설계자는 팀원 모두와 직접 작업을 공유 할 수 있습니다..
슬랙은 현재 많은 비슷한 기능을 지원하는 가장 인기있는 채팅 응용 프로그램입니다. 성장하고있는 Slack 사용자층은 Slack의 기능을 크게 개선하고 행 아웃, MailChimp, 심지어 WordPress와 같은 다른 제품과 연계되는 확장 기능을 만드는 것에 대해 신중을 기했습니다.
10. 반응 형 프론트 엔드 프레임 워크
부트 스트랩과 같은 프론트 엔드 프레임 워크는 수년간 지속되어 왔으며 개인 프로젝트와 전문 프로젝트 모두에 유용합니다. 반응이 빠른 디자인은 프레임 워크에 들어가기를 강요하고 단지 백엔드 (Django, Laravel 등) 대신 프론트 엔드 코드에 대한 요구를 만들어 냈습니다..
2016 년으로 넘어 가면 웹 프로젝트에서 반응 형 프론트 엔드 프레임 워크와 그 가치에 대해 더 많이 읽게 될 것입니다. 많은 개발자들이 Foundation 6의 공개 및 Bootstrap 4의 공용 v1 릴리스를 열망하고 있습니다..
Gumby와 Pure CSS 등 덜 알려진 다른 프레임 워크도 있습니다..
11. UX 디자인에 중점
사용자 경험 디자인 분야는 더 많은 디자이너와 개발자가 주목하면서 계속해서 빠르게 성장할 것입니다. UI 디자인은 UX 디자인의 일부이지만 최종 목표는 아닙니다. UI는 끝을 맺는 수단이며 끝이 환상적인 사용자 경험입니다..
5 년 전만해도 UX에 익숙하지 않았고 인터페이스 디자인에 어떻게 적용되었는지 알지 못했습니다. 이제 UX Stack Exchange 및 무료 UX 전자 책과 같은 리소스가 있습니다. 사용자 경험에 대해 잘 모르는 경우 이제 모든 형식의 디지털 인터페이스에 UX 원칙을 적용하는 방법을 배우고 배우는 가장 좋은시기입니다.
12. 패키지 관리자
디지털 패키지 관리자는 너무 빨리 일어나서 현대 웹 개발을위한 필수 요건입니다. Bower 및 NPM과 같은 솔루션으로 새로운 프로젝트를 시작하는 데 많은 시간을 절약 할 수 있습니다..
새로운 기술을 익히는 데는 시간이 걸릴 것이고 학습 곡선이 생길 것입니다. 그러나 모든 프론트 엔드 (또는 백엔드) 개발자가 알아야 할 것이 있다면 그것은 패키지 관리자입니다. 터미널 명령에 대한 지식이 필요하지만 일단 프로세스에 익숙해지면 결코 되돌아 가지 않을 것입니다..
13. 고급 UI 애니메이션
CSS3 전환은 웹에서의 장기 애니메이션 동향의 시작일뿐입니다. 이제 애니메이션 전용 CSS 라이브러리와 JavaScript 라이브러리가 수십 가지가되었습니다. 내가 꿈꾸어 본 적이없는 것들은 이제 어디에서 보는지 알게되면 무료로 제공됩니다..
애니메이션은 좋은 디자인을 요구하지 않습니다. 그러나 제대로 사용하면 훌륭한 디자인으로 좋은 디자인을 만들 수 있습니다..
인터페이스의 애니메이션 트렌드를 주시하고 다양한 웹 사이트에서 가져갈 수있는 것들을 확인하십시오. 웹 애니메이션은 디즈니 영화가 아니므로 존중해야합니다. 애니메이션을 부드럽게 사용하여 디자인의 성가신 요소가되지 않고 인터페이스를 향상시킵니다..
14. 코드를 배우는 디자이너
올해 인기있는 버튼 주제는 코드 작성을 배우는 디자이너들이었습니다. 일부 디자이너는 코드를 작성하는 것이 자신의 직업이 아니라고 느끼는 반면 다른 사람들은 그것이 표준이되어 가고 있으며 받아 들여야한다고 느끼는 반면.
나는 감정적 인 반응만을 이끌어내는이 주제에 관해 열띤 토론과 매혹적인 글을 읽었습니다. 좋은 디자인은 코드가없는 예쁜 그림입니다. 그러나 둘 모두에 초점을 맞추려면 디자이너가 공예품을 연습하는 데 더 적은 시간을 소비해야합니다..
그렇다면 확실한 답이 있습니까? 어떤 사람들은 프론트 엔드 코딩을 아는 디자이너의 직업 생존 능력이 증가한다고 주장합니다. 그렇지만 누군가 코드를 작성하고 싶지 않으면 어떻게해야할까요? 경쟁하기에 가치가 있습니까??
나는 당신이 원하는대로 무엇이든하는 것이 가장 분명한 대답이라고 생각합니다. 그러나이 주제는 여전히 2016 년까지 논의를 계속할 많은 디자이너를위한 테이블에 있습니다..
15. 무료 온라인 도구 및 웹 애플리케이션
이전에는 모든 프로그램이 당신이 무엇을해야하든 상관없이 데스크톱에서 실행되는 것이 었습니다. 하지만 요즘에는 얼마나 많은 웹 응용 프로그램이 무료 온라인으로 제공되는지 지속적으로 알고 있습니다..
URL 인코딩 / 디코딩에서 완전히 무료 Markdown 편집기까지 모든 것을 찾을 수 있습니다. Google 드라이브에서도 Microsoft Office 제품을 브라우저로 가져 왔습니다 (다시 말하면 완전히 무료)..
웹 브라우저의 컴퓨팅 성능과 동질적인 표준의 수준은 무한한 기회를 제공합니다. 이미지 압축에 이력서 생성과 같은 복잡한 작업은 브라우저 창에서 바로 처리 할 수 있습니다..
16. 웹 컴포넌트의 성장
웹 구성 요소는 개발자의 복잡성 문제를 해결하려고 노력하고 있습니다. WebComponents 웹 사이트에는 개발자에게이 주제로의 첫 발을 내딛을 수있는 훌륭한 자료와 자료가 있습니다..
모듈 식 웹 구성 요소를 이해하는 방법을 잘 모르는 경우이 게시물을 통해 자세한 내용을 확인하십시오..
구성 요소가 주류 지위에 특히 불만을 갖지는 않지만 전 세계의 전문 개발자들이 논의하고 있습니다. Google은 JS 및 HTML을 통해 웹 구성 요소를 추가하는 데 사용되는 프레임 워크 인 Polymer를 출시했습니다..
이것은 아직 주요 고객 프로젝트에 사용하기에는 실용적이지 않을 수 있습니다. 그러나 기술을 사용할 수 있으며 약간의 연습을 통해 개념을 쉽게 익힐 수 있습니다. 모듈 형 웹 구성 요소에 대한 CSS-Tricks 게시물을 통해 더 많은 것을 배우고 몇 가지 코드 샘플을 읽을 수 있습니다..
17. 온라인 학습 자료
우리는 이제 컴퓨터가 편안함을 유지하면서 어떤 기술을 배울 수있는 가장 쉬운 시간임을 알고 있습니다. 매년 온라인 교육 시장이 급격히 커지고있는 것으로 보입니다..
나는 온라인 학습의 등장을 보게 될 것입니다. Treehouse 및 CodeSchool과 같이 잘 알려진 사이트는 Bitfountain 및 Learn-Verified와 같은 최신 사이트와 함께 놀라운 과정을 제공합니다..
배우고 싶은 과목이있는 경우 온라인 강의가있을 수 있습니다. 특히 UI 디자인이나 앱 개발과 같은 디지털 기술을 배우고 싶다면.
18. 서버 측 JavaScript
서버 측 JS에 대한 과거의 옵션이 있었지만, Node.js만큼 빠르지는 않았습니다. 자바 스크립트 개발자는이 라이브러리와 사랑에 빠졌고 파이썬이나 PHP와 같은 다른 백엔드 언어와의 직접적인 경쟁이 일어나는 것을 보았습니다..
노드를 사용하면 개발자가 프론트 엔드 + 백엔드 코드 모두에 대해 단일 언어를 사용하여 웹 사이트를 구축 할 수 있습니다. Node Package Manager와 같은 리소스는 Node.js에 더 많은 가치를 제공합니다..
내가 말할 수있는 바에 따르면 노드는 여전히 상승세에 있으며 업계 애호가의 관심을 끌고 있습니다. 노드를 배우 든 배우지 않을 지에 상관없이 2016 년에 주요 추세로 성장할 것이라는 데는 의심의 여지가 없습니다..
19. 터치 지원 웹 사이트 기능
스마트 폰 브라우저는 이전 버전과의 호환성을 유지하기 위해 모든 웹 사이트에 항상 터치 기능을 지원했습니다. 최근에는 터치 이벤트 처리의 구체적인 목표를 위해 더 많은 플러그인과 맞춤 기능이 웹 사이트에 추가 된 것을 보았습니다..
Photoswipe 및 Dragend.js와 같은 플러그인은 터치 스크린 디스플레이에서 스 와이프 및 태핑을 처리하도록 제작되었습니다. 웹 개발자는 반응 형 웹 사이트를 구축하는 것이 아니라 터치 가능 웹 사이트도 구축하고있는 것처럼 보입니다..
주변을 검색하면 터치 이벤트에만 의존하는 웹용으로 구축 된 정말 인상적인 기능을 찾을 수 있습니다..
20. 웹에서의 재료 디자인
Google의 소재 디자인 출시는 Android 디자이너에게 엄청난 성공이었습니다. 소재 디자인은 안드로이드 스마트 폰을위한 사용자 인터페이스를 만드는 과정을 단순화하기위한 디자인 언어로 간주됩니다.
시간이 지남에 웹 디자이너는 이것을 마음에 새겨 넣고 Google의 새로운 디자인 언어를 기반으로 전체 웹 사이트를 만들었습니다. 머티리얼 디자인 트렌드가 모바일 앱을 넘어 웹 디자인 세계로 옮겨 간 것 같습니다..
중요한 웹 사이트를 만들고 싶은 사람들은 바퀴를 다시 만들 필요조차 없습니다. Material UI 및 Materialize와 같은 무료 라이브러리는 재료 디자인 기초 위에 새로운 레이아웃을 구조화하기위한 맞춤 코드를 제공합니다..
폐쇄
이러한 추세를 살펴보면 웹 사이트를보다 쉽게 구축 할 수 있도록 웹 공동체가 진정으로 공동으로 노력하고 있음을 분명히 알 수 있습니다. 우리 모두는 일상적인 작업 흐름에서 시간을 절약하기를 원합니다..
웹이 시작된 이래로 우리는 많은 기술이 부상하고 있으며 더 나은 대안으로 대체되고 있습니다. 이러한 2016 년 경향은 웹 사이트를보다 쉽고 복잡하게 만드는 데 도움이되는 더욱 균일 한 디자인 기법을 추구하고 있습니다..
