웹 디자이너로서 이미 저지를 수 있는 실수

모든 웹 디자이너는 완벽을 원합니다. 그러나 그들은 단지 인간이며 실수는 항상 나타날 수 있습니다. 단순히 몇 가지 세부 사항을 간과하기 쉽습니다. 세상에 실수를 하지 않은 디자이너는 없고, 실수를 피하는 것은 시간이 지나면 일반적으로 일어나는 일입니다.

이제 우리는 웹 디자이너가 지속적으로 저지르는 가장 일반적인 실수에 대해 이야기할 것입니다. 당신의 나쁜 습관을 고치고 당신이 현재 죄를 짓고 있는 장애물을 극복하여 당신의 일이 그 어느 때보 다 잘 될 것입니다.

플래시 사용

현대적인 웹사이트 디자인에서는 플래시가 할 수 있는 일에 있어 아주 훌륭하더라도 플래시가 사용되는 것을 거의 보지 못합니다. 우리는 방문자에게 인상적인 애니메이션 경험을 제공할 수 있는 가능성에 직면했지만 관련 수하물이 있습니다.

웹 디자인에서 Flash를 사용할 때 나타나는 다양한 문제가 있습니다. 지원이 부족하고 사용되는 프로그래밍 언어가 다르기 때문에 로드 시간이 더 길고 모바일 사용자에게 문제가 있습니다. 현재 Flash를 지원하는 장치의 수는 매우 적습니다. 또한 앞으로 더 많은 지원을 기대하지 않습니다. 새로운 라이브러리, 특히 AngularJS 및 jQuary와 같은 JavaScript를 기반으로 하는 라이브러리가 더 강력하고 인기 있는 것처럼 보입니다.

정말 큰 이미지 사용하기

웹 디자인의 현대적인 추세는 사이트 전체에 큰 이미지를 사용하는 것입니다. 그것은 확실히 경험을 더 즐겁게 만들고 사용자는 멋진 것을 보게 될 것이지만 디자이너와 개발자가 알아야 할 몇 가지 합병증이 있습니다.

더 큰 이미지를 사용할 때마다 페이지 로드가 자동으로 증가합니다. 이것은 사이트 방문자에게 매우 나쁜 시나리오로 이어질 수 있습니다. 좋은 소식은 이미지 최적화에 많은 도움이 되는 다양한 도구에 액세스할 수 있다는 것입니다. 고려할 수 있는 항목은 다음과 같습니다.

• GruntJS-ImageMin
• 이미지최적화

PrePros와 같은 앱은 애플리케이션 내부에서 이미지를 자동으로 최적화하는 데 도움이 될 수 있습니다. 문제는 도구가 워크플로에 도움이 되지만 로드 시간과 관련된 큰 문제를 적어도 완전히 해결하지는 못한다는 것입니다.

많은 디자이너들이 현재 SVG를 사용합니다. 그들은 브라우저 환경에서 그래픽을 애니메이션하고 그리기 위해 코드를 사용합니다. 따라서 페이지 로드 속도가 빨라지고 눈길을 끄는 다양한 요소가 생성됩니다.

또한 더 큰 이미지는 반응하지 않는 요소로 인해 웹 디자인을 복잡하게 만든다는 사실을 강조해야 합니다. 우리는 높이와 너비가 설정된 디자인 요소에 대해 이야기하고 있습니다. 브라우저는 이미지의 크기를 조정하지만 파일 크기는 동일합니다.

W3C는 이제 " <picture> "를 HTML5 요소로 사용합니다. 그러면 보기 화면의 너비에 따라 다른 크기의 이미지를 호출할 수 있습니다. 이런 일이 발생하면 보는 사람에게 훨씬 더 나은 경험이 될 것이지만 구현하기 전까지는 큰 이미지를 피해야 합니다.

고정 너비 및 높이 사용

고정 크기가 코딩되면 사용자에 대한 적응이 자동으로 제한됩니다. 해결 방법이 있지만 항상 100% 반응하는 웹 디자인 패턴을 만드는 것에 대해 생각해야 합니다. CSS에 설정된 고정 높이는 사용자가 볼 수 있는 영역을 제한할 수 있습니다. 미디어 쿼리 조정을 통해 이를 넘어갈 수 있지만 추가된 추가 코드로 인해 성능 문제가 발생합니다. 당신은 정말로 필요하지 않습니다. 대부분의 경우 고정 크기를 사용하면 안 됩니다. 현대의 웹디자인 환경에서는 최대한 피해야 합니다.

설계 적합성에 대한 가정

웹 디자이너는 일반적으로 Adobe Photoshop 또는 Sketch와 같은 소프트웨어로 작업합니다. 작업이 완료되면 일반적인 가정은 반응형 워크플로에 특정 중단점이 있다는 것입니다. 표준으로 간주되는 화면 너비는 다양한 화면 크기를 포괄하지만 모든 화면 크기를 포괄하는 것은 확실하지 않습니다. 우리는 시장에서 사용할 수 있는 수천 개의 모바일 장치를 가지고 있습니다. 모든 것에 적합한 디자인을 만드는 것은 매우 어렵습니다.

특정 너비로 ​​작업할 때는 계획을 세워야 하고 앞으로 생각하는 것이 웹 디자이너에게 중요한 기술이 됩니다. 가정이 만들어지지 않았으며 일반 그래픽 편집기 작업이 끝난 후 실제로 브라우저 내에서 작업을 수행할 것인지 확인해야 합니다.

너무 많은 효과 및 애니메이션 사용

이 문제는 세계에서 가장 인기 있는 사이트에서도 볼 수 있습니다. 정말 많은 웹사이트가 정말 독특하고 놀라운 것을 제공하면서 숨막히는 경험을 제공하고 있습니다. 그러나 이것이 가능한 한 많은 효과와 애니메이션을 추가한다는 의미는 아닙니다. 기능과 그래픽 효과 사이의 적절한 조합을 찾는 목적과 웹 디자인의 원칙을 결합하는 것이 매우 중요합니다.

애니메이션과 효과를 과도하게 사용하는 것과 관련된 두 가지 큰 문제가 있습니다.

• 페이지 로드 시간이 증가합니다.
• 효과와 애니메이션은 구형 컴퓨터에서 문제가 됩니다.

현재 인기 있는 핵 및 애니메이션은 페이드 인, 업 또는 다운 요소를 추가하는 것입니다. 그들은 멋지게 보일 수 있고 사이트를 멋지게 만들 수 있지만 항상 사용해야한다는 의미는 아닙니다. 전체 페이지 로드가 대부분의 방문자가 사용하고 페이지 로드 속도를 잊지 않는 장치에 너무 많은지 확인하십시오. 이는 매우 중요하며 방문자에게 항상 훌륭한 경험을 제공해야 합니다.

부적절한 스타일 지정 링크

이것은 현재 생각하는 것보다 훨씬 더 흔한 실수입니다. 링크는 항상 그들이 하는 일을 해야 합니다. 즉, 링크에 부적절한 스타일이 지정되어 있으면 사람들이 링크라는 것을 알아차리지 못할 것입니다. 링크는 항상 링크처럼 보여야 하므로 방문자를 항상 생각해야 합니다. 표준 파란색 밑줄을 고수하지 않고 실험할 수 있지만 절대 과용해서는 안 됩니다.

CSS에서 DRY를 사용하지 않음

이것을 알지 못하는 경우 DRY는 "반복하지 마십시오"를 의미합니다. 이것은 웹 디자인의 한 방법이며 실제로 디자이너가 코드를 간결하고 복제하는 데 도움을 준다는 의미입니다. 웹사이트 스타일링에는 항상 필요한 코드만 사용하는 것이 좋습니다.

기존 CSS를 사용하는 경우 다른 요소 내부에서 사용되는 특정 요소에 대해 많은 반복이 필요합니다. 선택자는 결국 매우 커서 실제로 작성하는 데 많은 시간이 걸립니다. HTML 페이지의 모든 단일 요소에 스타일을 지정하는 대신 디자인에 클래스를 사용하면 모든 것이 훨씬 간단해집니다.

현재 매우 좋은 아이디어는 Sass와 같은 전처리 언어를 활용하는 것입니다. 필요한 CSS 기술 측면에서 꽤 유용합니다. 사용되는 언어는 변수, 함수, 믹스인, 중첩 등과 같은 기능을 포함하기 때문에 개발 및 디자인 속도를 높입니다. 생성된 코드는 CSS 코드로 컴파일됩니다. 웹 개발자와 웹 디자이너는 이제 더 적은 수의 코드 라인을 사용할 수 있으며 언어 덕분에 반복을 쉽게 피할 수 있습니다.

우아한 저하

Graceful Degradation은 최신 브라우저에서 특정 사용자 경험 수준을 제공할 수 있는 웹 기능을 구축하는 동시에 이전 브라우저에서 더 낮은 사용자 경험 수준으로 저하시키는 방식으로 정의할 수 있습니다. 이것은 다소 복잡하게 들리지만 예를 들어 Internet Explorer 8 및 7 지원에 대해 논의할 수 있습니다. 대부분의 사용자가 오랫동안 브라우저를 업데이트하지 않는다는 사실을 알게 되면 놀랄 것입니다. 이 때문에 두 브라우저 버전 모두에 대해 적절한 지원이 이루어지도록 단계적 저하를 추가해야 합니다.

최신 웹 사이트는 개발하기 쉽지만 나중에는 이전 브라우저에서 특정 종속성으로 인해 페이지가 정말 좋지 않게 보인다는 사실을 나중에 알게 될 수 있습니다.

점진적 향상

이것은 위에서 언급한 Graceful Degradation과 유사한 것입니다. 차이점은 프로세스가 모든 단일 웹 브라우저에서 지원되는 기본 경험 수준부터 시작하여 역순으로 처리된다는 것입니다. 그런 다음 디자이너/개발자는 이를 사용할 수 있는 브라우저에서 사용할 수 있는 향상된 기능을 추가합니다.

이 옵션과 위의 옵션 모두 복잡합니다. 그들은 일반적으로 정말 좋은 디자이너에 의해서만 사용됩니다. 그러나 현재 사용 가능한 많은 브라우저에서 옵션을 심각하게 고려해야 합니다. 웹 디자이너는 일반적으로 클라이언트가 지원될 대상을 정확히 결정하도록 합니다. 특히 활동적이고 대상 청중 내부에 있는 사용자에게 정말 훌륭한 경험을 제공하려면 이러한 접근 방식을 사용해야 합니다.

탐색 문제 – 사용자에게 친숙하지 않음

모든 웹 사이트에서 가장 중요한 부분 중 하나는 탐색입니다. 디자이너는 방문자 경험을 자연스럽게 만들 수 있어야 합니다. 목적은 탐색을 정말 간단하고 직관적으로 만드는 것입니다. 사용자는 디자인이 이 요소를 고려했을 때 경험이 적절한 것임을 자동으로 이해할 것입니다.

사용자 경험이 좋지 않을 때마다 방문자는 좌절감을 느낍니다. 그들은 단순히 특정 사이트를 다시 방문하지 않고 다른 페이지에서 문제에 대한 솔루션을 찾습니다. 사용성은 항상 디자이너가 고려해야 합니다. 디자인은 보기에 좋아야 하지만 기능을 잊어서는 안 됩니다. 사용의 용이성이 필요하며 이것이 없으면 전체 디자인이 쓸모 없게 됩니다.

콘텐츠에 대한 집중 부족

"형태는 기능을 따른다"는 20세기에 현대 건축 산업 디자인 단계에서 등장한 정말 일반적인 건축 원리입니다. 이것은 웹 디자인에서 항상 기억해야 하는 원칙입니다.

웹 및 그래픽 디자인은 필요한 기능면에서 현대 아키텍처와 정말 유사합니다. 대상 형태는 먼저 의도된 목적이나 기능을 기반으로 해야 합니다. 웹사이트의 관점에서 우리는 그것들을 인터넷 전체에 퍼져 있는 정보 데이터베이스로 볼 수 있습니다. 사용자는 특정 데이터를 얻기 위해 웹사이트를 방문합니다. 콘텐츠가 해당 데이터를 제공하는 단계입니다. 방문자가 사이트를 방문하고 데이터를 찾지 못하면 디자인을 보지 않고 다른 곳에서 찾습니다. 동시에 설계상 데이터를 찾거나 요약하기가 정말 어려운 경우에도 동일한 결과가 발생합니다.

인터넷 사용자는 이제 정보에 대한 액세스를 원하고 이 액세스가 빠르기를 원합니다. Form Over Function은 결국 웹 디자인에서 정말 중요합니다. 이 원칙을 고려하지 않는다는 것은 제공되는 콘텐츠 대신 외모에 초점을 맞추는 것을 의미합니다. 결과적으로 웹 사이트는 실제로 인기가 없습니다. 콘텐츠는 항상 눈에 띄어야 합니다.

결론

뿌리부터 방문자가 실제로 사이트를 방문하는 이유를 고려하지 않고 정말 아름답고 독특한 것을 만들려고 하는 것과 관련된 가장 일반적인 웹 디자인 실수입니다. 이 때문에 정말 좋은 디자인과 완전한 기능을 결합하는 데 필요한 인내심을 항상 갖고 싶어합니다.

항상 기능적인 웹사이트를 만들고 시간이 지남에 따라 새로운 기술을 계속 배우십시오. 세계 최고의 웹 디자이너는 학습을 계속하고 수행할 수 있는 것과 수행할 수 없는 모든 것을 항상 최신 상태로 유지합니다. 웹 디자인을 만들고 클라이언트와 대화한 다음 방문자가 제공되는 내용에 감사할 수 있도록 하고 싶습니다. 이것은 말보다 훨씬 쉽지만 시간이 지나면 모든 것이 훨씬 쉬워집니다.

정말 멋진 것을 만드는 데 필요한 만큼의 시간을 할애해야 합니다. 웹 디자인에서 언급되지 않은 또 다른 실수는 완벽한 웹사이트 디자인을 실제로 만드는 데 필요한 시간을 허용하지 않는다는 것입니다. 이것은 일반적으로 클라이언트가 최단 시간에 작업을 완료해야 하기 때문에 발생합니다. 당신이 할 수 있다고 알고 있는 뛰어난 웹 디자인을 만들 수 있는 충분한 시간이 있는지 항상 확인하십시오.