Будучи дизайнером, делать работу для самого себя — возможно, самая трудная вещь, которую можно вообразить. На самом деле, большинство боится этого. Усугубляет ситуацию тот факт, что иметь свое представительство в интернете не просто жизненно важно для успешной работы, оно еще и должно быть лучшим. Ведь если вы не можете блеснуть умением на собственном сайте, то как можно ожидать, что кто-то сделает вам заказ?

В этой статье мы постараемся разобраться, что мешает нам создать дизайн для себя самого и сформулируем 10 правил, как сделать самый лучший дизайн для себя. Вместе мы победим в себе эту темную сторону.

Внутренняя борьба

Как показывает история доктора Джекила и мистера Хайда, дуализм человеческой натуры всегда вызывал глубокий интерес. Дуализм проявляется в отношении к добру и злу, или, в нашем контексте, во внутреннем конфликте творческой личности. Для дизайнера эта внутренняя борьба может стать очень мощным инструментом, если научиться ее контролировать.

Правило №1: Конечное назначение

Когда вы садитесь в машину, вы же не начинаете просто куда-то ехать, надеясь как-нибудь попасть в пункт назначения? Нет, вы точно знаете, куда вы хотите отправиться. То же и со своим сайтом. Спросите себя, какой результат вы хотите получить на выходе? Только не нужно расплывчатых ответов типа «Хочу клевый сайт». Возможно, назначением сайта будет показать потенциальным клиентам, что вы заботитесь о восприятии сайта пользователем. Возможно, вы стремитесь получить признание в ряде галерей. Возможно, вам просто нужно место для эксперимента и совместного творчества с другими дизайнерами. В вашем сайте должно прослеживаться концентрированное и сфокусированное понимание его общего назначения.

Правило №2: Составьте распорядок

В фильмах «Безумный Макс» не существует правил и все движется просто так. То же самое происходит, когда в вашем проекте нет распорядка. Первозданный хаос. Первым делом нужно поставить себе ограничения. Некоторые, например, задают себе определенный дедлайн. Я не считаю, что дедлайны, поставленные самому себе, работают. Они только ограничивают вас и обуздывают вашу творческую энергию. Вы будете больше озабочены сроком сдачи проекта, и велика вероятность, что начнете задвигать его, как только он помешает другим начинаниям. Так что об этом забудем.

Определяйте для себя задачи в рамках поставленной цели. То есть, выделите конкретные страницы (например, главная, блог, портфолио, о себе, контактная информация). Поймите для себя, что вы хотите увидеть по завершении проекта.

Профессионально выполненные копии швейцарских часов вы можете приобрести только на baselshop.ru
Хотите узнать, какие сейчас самые стильные стрижки и модные прически?

Правило №3: Контент прежде всего

Как можно конкретнее определитесь, что должно быть на каждой из страниц. То есть, первым делом решите, каким будет контент. Понятно, что это дизайнерское портфолио. При этом вам нужно к чему-то приложить свои дизайнерские навыки. Сколько раз клиенты заказывали вам дизайн, не говоря, каким будет наполнение сайта, или обещая сообщить об этом в скором времени (читай: за день до запуска сайта). Не поступайте так с собой.

Не нужно писать все до последней буквы, но хотя бы решите, что вы, например, сделаете ссылки в «подвале», обширную биографию на странице «О себе», или, может быть, какие работы вы разместите в начале раздела «Портфолио».

Правило №4: Хватит сравнивать

Кто-то всегда будет лучше вас. Всегда. Но важно помнить: первые несколько сайтов этого человека тоже были отстойными. И даже не просто отстойными, возможно это были худшие сайты из созданных. Так зачем вы пытаетесь создать лучший в мире сайт вот так с пол-оборота? Вы не научитесь делать сайты лучше, если не начнете делать их самостоятельно.

Хватит использовать другие сайты как «костыли», бесцельно бродя в поисках озарения. Если вы определили свои цели и желаемый контент, вы можете быстро двигаться вперед, пока не найдете элементы, которые помогут достичь вашей цели. А затем ПРЕКРАЩАЙТЕ смотреть по сторонам.

Правило №5: Вдохновение и труд

Иногда бывает сложно поймать вдохновение. Может быть, это оттого, что многие дизайнеры работают на агентство, целый день делая работу для других, а потом они приходят домой и им уже неохота вновь садиться за компьютер. Или они просто чувствуют, что уже не могут выдать что-либо оригинальное.

Сходите в музей, посмотрите фильм, или просто прогуляйтесь. Дайте себе передышку и у вас появятся новые идеи. Все ищут вдохновение примерно в одних и тех же местах в интернете. Может быть, именно поэтому у вас создается ощущение, что вы не можете родить отличную идею, какая еще никому и не снилась. Вы просто смотрите туда же, куда и все остальные дизайнеры в мире. Попробуйте что-нибудь другое и не пытайтесь изо всех сил поймать вдохновение, оно должно прийти само собой.

Правило №6: Пуленепробиваемый бренд

Это одна из самых главных вещей, которые я понял: в мире нет человека, такого же, как вы. Может быть, это звучит, как слова школьного психолога. Тем не менее, это правда.

Бренд, который вы создаете, не должен базироваться только на элементах дизайна (логотипе и цветах). Он должен отражать вашу индивидуальность и способ самовыражения. Бренд может быть дерзким и современным, с элементом неожиданности. Вы можете взять его и построить вокруг него дизайн. Ваш бренд является персональным, он должен исходить от вас, а не являться отражением чего-то вами виденного. Тренды обычно исчерпывают себя, поэтому избегайте их, во что бы то ни стало.

Как только вы определились со своим брендом, вы уже не можете его нарушить. Он становится пуленепробиваемым. Станьте лучшим дизайнером своего фирменного стиля. Используйте этот фундамент для этого сайта и его будущих версий. Все становится намного проще, когда вы знаете, кто вы есть.

Проектор Optoma EP721i – лидер продаж! Лучшая цена только на finebuy.ru
Не секрет, что ноутбуки Asus сейчас самые популярные. Выберите модель, которая подходит вашим критериям.

Правило №7: Совершенство бесконечно

Теперь настало время избавиться от внутреннего критика. Если вы все еще слышите, как кто-то говорит вам, что работа еще недостаточно хороша — просто не стоит их слушать (это относится и к голосам за пределами вашей головы). Давайте смотреть на вещи реально. Вы так можете работать над дизайном несколько следующих лет, и все равно не будете удовлетворены. После того, как вы выполнили все предыдущие правила, вы сможете сформировать свой сайт и свой стиль так, что будет намного проще создать нужный вам дизайн.

Признайте свои слабые и сильные стороны. Дизайнеры по натуре любят то, что они делают, и привязываются к своим творениям. Все, что вы делаете, вы делаете с полной отдачей. Вы не сможете дать больше, и если вы не оставите что-то за рамками, вы никогда не сможете получить «обратную связь» или увидеть результаты работы. Без такого опыта невозможно вырасти до более профессионального дизайнера. Не забывайте, что лучшим дизайнерам иногда не удавалось понять, что лучше оставить за рамками своей работы.

Правило №8: Самое то

Ну так как вы узнаете, что получилось самое оно? Когда было потрачено достаточно времени? Дайте вашему дизайну «перебродить» несколько дней и вернитесь к нему вновь. Если вы смотрите на работу и понимаете, что она все еще хороша, или даже лучше, значит, вы на правильном пути.

Даниэль: «Но как я узнаю, что моя картина хороша?»

Мияги: «Если она исходит из тебя, то она всегда хороша».

- Из Карате Кид

Правило №9: Вы не творческий гений

Даже лучших дизайнеров иногда «заклинивает». Я недавно видел беседу о творческих способностях на TED. Автором была Элизабет Джилберт. Она говорила о том, что творческое вдохновение или «гений» может не исходить изнутри нас, а скорее быть данным нам извне. Что-то вроде музы в греческой мифологии. С этой точки зрения, творческим личностям не стоит быть столь требовательными к себе, стараясь каждый раз достигать блестящего результата. Это действительно изменило мой личный взгляд на творчество и такие ситуации, когда дизайнерские идеи не бьют из тебя ключом.

- Элизабет Джилберт о взращивании творческих способностей.

Правило №10: Используйте силу

Все эти правила вместе очень сильно помогают преодолеть внутреннюю борьбу при создании дизайна для себя. Не забывайте использовать то, что было создано, следуя этим правилам, как компас, который не даст вам сбиться с пути.

Например, если вы увидели ссылку на классный сайт, после того, как вы прекратили смотреть и начали творить, используйте нечто вроде вашего Пуленепробиваемого Бренда. Подумайте о назначении того классного сайта. Он работает на того дизайнера, а не на ВАС. Цели того дизайнера, скорее всего, очень сильно отличаются от ваших. Просто посмотрите и продолжайте двигаться по пути к своему отличному дизайну.

В добрый путь

Эти правила помогут вам преодолеть внутреннюю борьбу при создании дизайна для себя. Я использовал эти правила и понятия, чтобы справиться с собственными трудностями в дизайне и надеюсь, что другим они тоже будут полезны.

Постоянная ссылка на статью |Комментариев: 32
Теги: грамотный дизайн, дизайн для себя, для дизайнеров, клиент

Еще записи на эту тему

• Формула успешного сайта (17)
• Ошибка 404: что в имени тебе моем? (9)
• Если бы архитекторы работали как веб дизайнеры (3)
• Выйграй планшет Wacom Bamboo! (4)

Существует палитра из 216 цветов, поведение которых мало предсказуемо при использовании разного железа и программных платформ. Она называется web-безопасной (или просто безопасной) палитрой, и эти цвета распознаются всеми браузерами и системами (ну, за исключением совсем уж древних систем). Хотя эти цвета и не выглядят точно один в один из-за особенностей разных мониторов, они хотя бы однозначно распознаются всеми системами.

Web-безопасные цвета были выбраны математически, а не в силу того, что эти цвета используются чаще всего. RGB-коды для безопасных цветов состоят из нуля и других шестнадцатеричных цифр, делящихся на три: 3, 6, 9, C (12) и F (15). Кроме того, эти цифры всегда используются попарно.

Профессиональная  разработка интернет-магазинов в Перми.
Нужна раскрутка сайта? Заходи на www.kokoc.com

Например:

• #3366FF является безопасным цветом, потому что состоит из парных цифр, делящихся на три.
• #2255AA не является безопасным, поскольку числа не делятся на три.
• #3693CF не является безопасным, поскольку цифры хоть и делятся на три, но не являются парными.

Повышение значений парных цифр, например от 33 к 66, означает 20% повышение насыщенности данного тона.

Многие цвета помимо шестнадцатеричных кодов имеют имена. Например, в таблице стилей можно написать «color:red». Загвоздка в том, что только десять из этих имен цветов соответствуют в точности одному и тому же коду во всех браузерах. Казалось бы, нечто такое очевидное, как «red» должно бы всегда соответствовать коду #FF0000, но, к сожалению, это не всегда так. Например, имя цвета «brown» соответствует коду #A52A2A в Navigator 7.2 и коду #993333 в Internet Explorer 6. Хотя новые версии Internet Explorer и Firefox лучше согласуются между собой, все равно безопаснее использовать шестнадцатеричные коды, а не имена.

Фактически, все графические программы и среды web-разработки предлагают собственные версии безопасной палитры. К сожалению, эта палитра имеет строгие ограничения, особенно когда речь идет о более тонких и сложных оттенках, которые так любят многие дизайнеры. Так что происходит, если вы выбираете цвет, не являющийся web-безопасным? Если у посетителя сайта стоит достаточно мощная система, чтобы отобразить именно этот цвет, то он выглядит должным образом. Если же нет, браузер делает одно из двух: либо на свое усмотрение меняет цвет на ближайший к нему, который он может распознать, либо использует дитеринг.

Грамотная регистрация в каталогах Рунета
Веб-студия Юнима. Создание сайта в Саратове.

Дитеринг подразумевает смешение пикселей двух разных цветов  с целью создания оптического обмана, чтобы наш глаз воспринял третий, промежуточный цвет — фактически, происходит его подмена. Дитеринг на экране компьютера работает по тому же принципу, по которому наш глаз воспринимает быстро сменяющиеся отдельные кадры как одно плавно движущееся изображение. Даже несмотря на то, что наш глаз выполняет такое слияние автоматически, зернистость в области дитеринга все равно заметна и отвлекает внимание, особенно если заливка большой области выполнена сплошным цветом. Дитеринг не всегда плох (иногда его применяют целенаправленно для получения особых эффектов), однако сплошной цвет является более предпочтительным, чем смешанный.

Есть несколько алгоритмов дитеринга. Один из самых ранних и самых популярных по сей день — алгоритм Флойда-Штейнберга, разработанный в 1975 г.

Одним из преимуществ данного алгоритма является минимизация помех изображения, благодаря диффузному процессу; с помощью диффузных алгоритмов обычно удается получить изображение, которое намного ближе к оригиналу, чем изображение, полученное с помощью более простых алгоритмов дитеринга.

—    Wikipedia

Из-за этой проблемы некоторые специалисты до сих пор советуют придерживаться web-безопасной палитры. Однако, она налагает серьезные ограничения: 216 цветов это не так уж много для большинства дизайнеров (вроде меня). Неизбежно, в точности такого цвета, как нам представляется, просто не оказывается в безопасной палитре.

Это ставит нас перед дилеммой: следует ли ограничиться безопасной палитрой из 216 цветов, чтобы быть уверенными, что наши цвета не изменятся и не подвергнутся дитерингу у тех пользователей, чьи браузеры не могут распознать большее количество цветов? Или радостно и безоглядно выбирать из 16,8 миллиона великолепных, изумительных и выразительных цветов, которые все же могут увидеть на экране многие, пусть и не все, пользователи?

Заключение

Фактически, старых компьютерных систем с цветовым диапазоном из 256 цветов осталось так мало, что большинство специалистов уже объявляют, что web-безопасная палитра осталась в прошлом. И все же, ответ на вопрос, стоит ли использовать безопасную палитру, звучит как: «Зависит от обстоятельств». Зависит от того, насколько значительную долю вашей потенциальной аудитории составляют пользователи со старыми компьютерами, поддерживающими только 256 цветов. Зависит от того, будут ли заходить на сайт с коммуникаторов или сотовых телефонов, которые могут поддерживать только 256 цветов. Даже для таких пользователей использование безопасных цветов наиболее важно на больших поверхностях сплошного цвета в графических элементах и фонах HTML-страниц, где больше всего заметны дитеринг или смена цвета. Если ни одно из этих условий, вроде бы, не влияет на большую часть вашей аудитории, то вы можете спокойно использовать любые цвета, которые поражают ваше воображение.

Постоянная ссылка на статью |Комментариев: 18
Теги: безопасная палитра, безопасные цвета

Еще записи на эту тему

• Нет похожих записей :\

Довольно часто дизайнеров справедливо обвиняют в том, что, создав дизайн сайта, они уходят в свой кокон и замыкаются в неведении, оставляя всю «грязную работу» по воплощению дизайна в жизнь разработчикам. Такая равнодушная позиция отмечается не только в индустрии создания сайтов, но и при разработке программного обеспечения и игр.

Суровая действительность указывает на то, что весь процесс разработки должен происходить при участии дизайнеров. Для достижения оптимальной эффективности дизайнер должен уметь не только нарисовать картинку, но и встроить ее! В этой статье я хотел бы поделиться несколькими соображениями о том, почему дизайнеры должны уметь верстать сайты.

Tweem.ru – реклама в Твиттере.
Здесь можно проверить обратные ссылки.
Эффективная раскрутка сайта в Краснодаре, Сочи, Геленджике, Анапе и Туапсе. Антикризисные акции и скидки!

Создание реалистичного и осуществимого дизайна

Имея четкое представление о том, как будет реализовываться конечный продукт, дизайнер будет предлагать более реальные и практически осуществимые идеи. Поскольку работа дизайнера является неотъемлемой частью процесса разработки сайта, он должен озаботиться тем, чтобы дизайн можно было успешно претворить в сетевую реальность, в частности, учитывая юзабилити сайта, удобство его просмотра и доступность. Дружественный интерфейс сайта подразумевает не только удобство и четкую логическую организацию навигации, но и предоставление пользователю всей необходимой ему информации упорядоченно и не перегружая его сверх меры. Единственный реальный способ узнать, правильно ли «работает» ли верстка сайта, – это научиться делать ее самому.

Упрощение коммуникаций

Фактически, продукты, разработанные одними людьми и воплощенные другими, никогда не оправдывают ожиданий всех участников, особенно это касается неосязаемой продукции, такой как веб-сайты, программное обеспечение или игры. Обычно все заканчивается компромиссом между тем, что ожидалось, и тем, что возможно осуществить на деле. Все вроде бы уловили общую идею, но редко когда получается передать ее в точности. Панацея от этого – сделать так, чтобы дизайнеры не только генерировали идеи, но и пожинали плоды их реализации. Тогда исключается путаница, недопонимание и искаженная передача информации.

Удобный циклический процесс разработки

На практике, готовый дизайн не должен всегда быть окончательным вариантом. Я имею в виду, что он должен быть гибким, чтобы его можно было менять и адаптировать под технические ограничения системы без утраты его изначальной сущности. Такие многократные и неизбежные изменения могут осуществляться только самим дизайнером. Дизайнер/разработчик в одном лице может вносить необходимые изменения гораздо быстрее, чем если бы разработчику приходилось повторно отсылать макет дизайнеру, который, к тому же, редко находится в пределах досягаемости, чтобы внести изменения. К тому же, в такой ситуации могут возникать – и часто возникают – трения между дизайнерами и разработчиками.

Лучший и более гармоничный результат

Я люблю проводить параллель между созданием ПО, сайтов или игр и оркестровой музыкой, когда дизайнер сравнивается с композитором, а разработчик с руководителем ансамбля или дирижером. Представьте, что будет, если дирижер сам является композитором? Я думаю, это придаст симфонии поистине превосходное звучание и очарование. Ведь она не только была написана мастером своего дела, но и сыграна под руководством своего создателя!

Экономия времени на разработку

Если дизайнер умеет верстать сайты, то стадии дизайна и верстки происходят непосредственно одна за другой, если не одновременно. Получается, на разработку затрачивается меньше времени – а кому не хочется, чтобы работа шла эффективнее?

Дизайнер начинает соответствовать требованиям рынка

Сегодня дизайнеру, чтобы оставаться востребованным, нужно постоянно расширять свое портфолио и улучшать свои конкурентные качества – уже недостаточно обладать каким-то одним набором навыков. Часто приходится быть мастером на все руки – и дизайнером, и разработчиком пользовательских интерфейсов, и копирайтером, и менеджером проекта.

Умея претворять свои дизайнерские работы в жизнь, а не оставляя их на милость разработчиков – вы повышаете свою ценность. К тому же, указанные рядом в резюме навыки дизайна и верстки сайтов еще никому не мешали. Даже наоборот, это делает сотрудника более востребованным и незаменимым, что жизненно важно в наше экономически неспокойное время корпоративной реорганизации (тотальной экономии) и сокращения штатов (массовых увольнений).

Однако, у такого сценария, когда дизайнер занимается версткой своих инноваций, есть и недостатки.

Как написал Лукас Мэтис (Lukas Mathis) в одной противоречивой статье на нашу тему под названием «Дизайнеры – не программисты» [1]:

Если дизайнер претворяет в жизнь собственные идеи, перед ним стоят две разные задачи: написать качественный код и создать приятный пользовательский интерфейс. Эти две задачи противоречат друг другу. Если вам необходимо самому воплощать свой дизайн, вам придется чем-то поступиться ради качества кода, а это повредит дизайну.

Дизайнеры, сами занимающиеся версткой сайтов, сталкиваются с двумя проблемами: они знают, когда новая замечательная идея может вылиться в неряшливый код, и они знают, где имеющийся код может повлиять на качество пользовательского интерфейса. Таким образом, две их задачи противоречат друг другу, поскольку пользовательский интерфейс включает множество мелких деталей, а эти мелкие детали приводят к нежелательному загромождению кода.

Отсюда вытекает нелегкое решение, принятое пуристами от веб-разработки. Они придерживаются старой школы, выступающей в защиту четкого разграничения между дизайном и разработкой. В самом деле, дизайнеры творят для людей, а разработчики программируют для компьютеров. Таким образом, дизайнеры, заботящиеся о восприятии пользователем,  должны создавать максимально удобные пользовательские интерфейсы, а разработчики должны принимать оптимальные решения в программировании. Хотя в этом и есть разумное зерно, но сам я заметил, что безуспешно пытаюсь абстрагироваться от кода, работая над пользовательским интерфейсом, и, в конечном счете, удобнее иметь в виду ограничения, связанные с техническим воплощением и удобством использования.

Заключение

Учитывая все сказанное, объем разрабатываемого проекта может, в конечном итоге, определять роли, которые отводятся в нем дизайнеру и разработчику. Небольшое приложение может с успехом контролировать менеджер проекта [2], в то время как обширной системой, определенно, должен управлять специализированный персонал!

[1] – Mathis, Lukas.”Designers are not Programmers “.

[2] – Spolsky, Joel. “How to be a program manager“.

Постоянная ссылка на статью |Комментариев: 41
Теги: верстка, дизайнер, разработчик

Еще записи на эту тему

• Новая техника CSS: имитация абсолютного позиционирования (25)
• Верстка сайта. Что необходимо учесть? (19)
• 20 CSS-решений распространенных багов и проблем при верстке сайта (40)

Спонсор месяца:
Бухгалтер в собственном штате стоит дорого. Логос-Аудит – ведение бухучета для малого и среднего бизнеса.

Перевод статьи How to Spot Quality within Web Design: Examples & Tips

Не забудьте почитать:
Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1.
Что такое качество в веб-дизайне: примеры и рекомендации. Часть 2.

В заключительной части статьи, автор поведает нам о том, как сделать дизайн уникальным и, в то же время, простым и утонченным.

05. Сдержанность и деликатность

Дизайнеры вечно придумывают, как поразить уникальным дизайном или особыми его деталями. Но иногда, вы сможете достичь большего эффекта за  счет сдержанности. Иногда выходит, что хороших вещей должно быть не слишком много. Хороший дизайнер в состоянии определить, где та черта, за которую не следует переступать, и старается не переборщить с дизайнерскими приемами или особенными эффектами.

Примеры утонченных эффектов в веб-дизайне

Легкие градиенты на сайте “Things”

Посещая сайты, я всегда обращаю внимание на утонченные эффекты. Не знаю, к счастью или к несчастью, но я не могу не замечать все мелкие детали, в которых я после черпаю вдохновение. Градиенты часто используются слишком яро, просто бьют по глазам, но корректно используемые градиенты могут добавить вашему дизайну элемент реалистичности и объемности. Большинство из вас могут далее не заметить градиенты, и как раз вот эти, по-моему, являются лучшими.

Падающие тени на сайте Icon Dock

Сайт Icon Dock — это оплот утонченных эффектов. Пиксельные блики, градиенты и падающие тени. Но в данном примере мы остановимся подробнее именно на тени. Она сделана небольшой и с повышенной прозрачностью, просто чтобы подчеркнуть блок с содержимым и ненавязчиво привлечь к нему внимания. Это красивый пример.

Утонченные текстуры фона: сайт Scouting for Girls

Текстурный фон может решить судьбу вашего дизайна. Часто фон лишь отвлекает и сильно снижает качество дизайна. Поэтому обычно имеет смысл использовать легкие и утонченные текстуры. На сайте Scouting for Girls текстура фона удивительным образом сочетается с общим стилем и качеством дизайна.

Следы времени: сайт Viget Advance

Я не думаю, что дизайн может быть слишком утонченным. Любые детали, неважно насколько они деликатные, будут заметны и произведут определенный эффект, даже независимо от того, разглядит их пользователь или нет. В этом примере блога Viget Advance на фоне видны некоторые следы времени, всего лишь небольшие признаки износа, но без них бумага выглядела бы плоской и скучной. Эти небольшие изъяны делают текстуру более достоверной и реальной.

Акварель на сайте WebDesignerWall

В работе акварелью приятно то, что, смешивая краски, получаешь цвета очень нежные, тающие и… ну хорошо, водянистые. Использование акварели в дизайне может нести в себе много плюсов — вы можете ввести какие-то деликатные цвета, привнести легкую текстурность, — поэтому этот прием стал так популярен среди дизайнеров.

Легкие цветочные орнаменты: сайт Dara’s Garden

Это превосходный пример утонченных цветочных элементов в дизайне. Есть несколько более оживленных иллюстраций использования цветочных орнаментов, и они тоже очень хороши, но в данном примере мы остановимся на легких и нежных деталях фона. Тут становится по-настоящему видно, насколько важна утонченность. Нежные цвета и «состаренный» вид орнамента означают, что ваш глаз отмечает мелкие детали, но они не находятся в фокусе внимания.

Советы по использованию утонченных средств дизайна

По-моему, утонченные детали помогают сделать шаг от хорошего дизайна к дизайну великолепному. Если вы думаете, как привнести в ваш дизайн нечто особенное, утонченные детали — ваш выбор. Вот несколько рекомендаций, о которых необходимо помнить, используя в дизайне утонченные детали.

• Используйте многослойность
  Никогда не ограничивайтесь одним шаблоном или текстурой, делайте детали разнообразными.
• Экспериментируйте с прозрачностью и цветом
  Иногда даже значение непрозрачности 3% может сыграть вам на руку.
• Не парься, будь смелым
  Не бойтесь, что получится слишком утонченно или слишком размыто.

06. Используйте весь потенциал цвета

Люди часто судят о цветах со своей колокольни, и они неправы. Если вам нужно решить, какие цвета будут хорошо смотреться на данном сайте, необходимо принимать решение основываясь на бренде, основной теме сайта и настроении, которое должна создавать цветовая схема.

Превосходное использование цвета в веб-дизайне

Недвижимость может быть красочной: сайт Oypro

В сайте Oypro мне нравится то, что его создатели доказали — сайт, посвященный «скучной» теме, необязательно должен иметь скучный дизайн. Увы, слишком часто при создании корпоративных сайтов дизайнерам не разрешается использовать смелые и своеобразные решения. Кажется, заказчикам просто необходимо, чтобы их сайт был простым, плоским и серым. Но этот дизайн доказывает, что можно создать деловой корпоративный сайт, не сдерживая своих творческий порывов.

Цвета должны быть уместными: сайт Tennessee Summertime

Summertime in Tennessee — это живой, яркий и очень теплый сайт. Что и требуется от сайта, рекламирующего летний отдых. Здесь играет много разных цветов, но все они «в тему». Качественные сайты имеют цветовую схему, где все цвета служат на пользу общей идее. Иногда дизайн становится лучше за счет очевидного выбора цветов, хороший тому пример — Hell Design, он бы не возымел должного эффекта, если бы там использовался иной цвет, чем огненно-красный.

Разнообразные фоны: Saturized Studio

Недостаточно просто залить фон каким-либо цветом и думать, что выйдет интересно. Лучшие фоны те, что отличаются разнообразием. В данном примере мы видим, что красивый оранжево-красный цвет подвержен воздействию самых разных эффектов и градиентов. Это придает фону некоторую изюминку, и он не выглядит неинтересным и плоским. Тут еще важно отметить, что темный глубокий оранжевый цвет очень хорошо работает в качестве контраста, будучи помещенным в качестве фона для намного более светлого блока с текстом.

Советы по использованию цвета в дизайне

Цвет — это всегда хорошая область для исследований и испытания различных возможностей и вариаций, но есть несколько вещей, о которых важно не забывать, выбирая цвета и цветовые схемы.

• Экспериментируйте
  Сайт на «скучную» тему не должен иметь скучную цветовую схему.
• Добавьте разнообразия
  Попробуйте использовать для создания красочных фонов градиенты, шаблоны и кисти. Фон не будет выглядеть хорошо только за счет цвета.
• Придерживайтесь темы
  Старайтесь, чтобы цвета были уместны для продукции или услуг, которым будет посвящен сайт.

07. Делать нечто, чего никто раньше не делал

Некоторые из лучших сайтов — это неординарные, странные и несколько экстравагантные. Но если дизайнер бросает вызов стандартам, обычно заканчивается тем, что изменяется само понятие о том, что такое стандарт. Однако быть по-настоящему оригинальным и создавать нечто, чего не создавал никто ранее, — это самая сложная вещь в дизайне.

Из этой затеи может получиться создание чего-то бесподобно прекрасного, или чего-то, что не выдерживает никакой критики. Между успехом и провалом очень тонкая грань; я имею в виду, что есть причины, по которым что-либо никогда не создавалось, и обычно это потому что идея была вздорной. Дизайнер должен иметь смелость, чтобы отступить от того, что всем дорого и мило, и вот несколько примеров тому:

Уникальная навигация на сайте MB Dragan

Это непохоже на среднестатистическую навигацию по сайту, но согласитесь, выглядел бы сайт так хорошо, если бы имел стандартную навигацию? Я бы сказал, дизайнер рисковал, создавая такую необычную систему навигации, но она в самом деле подходит для этого сайта, она тут уместна, и она сделана по таким стандартам, что сложно не признать, что она отлично работает на общую идею.

Сайт Visualbox и его Очень Визуальная Навигация

Visualbox ставили одну цель — показать их великолепную работу. Поэтому у них на сайте очень мало текста; все, что видно на первый взгляд, — это их название и подборка работ. Картинка в блоке предварительного просмотра при наведении мыши сменяется описанием проекта, это действительно эффективное и функциональное решение, да и куда более привлекательное, чем просто список ссылок.

Сразу к делу, сайт Nikola Mircic

Итак, вы дизайнер интерфейсов, и вы хотите, чтобы люди увидели ваши работы и наняли вас. Nikola Mircic показывает нам, как с прямолинейным подходом к делу можно сделать очень впечатляющий сайт. Входя, вы видите все разнообразие работ автора, его имя и профессию вверху страницы и контактные данные. Тут нет длинных текстов или тысячи слов, убеждающих вас воспользоваться услугами автора, он просто позволил работам говорить самим за себя. Конечно, вы можете кликать по картинкам, чтобы увидеть большие версии и какой-то текст, но сама схема сайта действительно уникальна, и мне нравится, как она работает.

Советы по стремлению к чему-то новому

Примеры, приведенные выше, не задумывались как «источник вдохновения» для уникальных идей, это просто несколько сайтов, которые кажутся мне совершенно уникальными. Правда состоит в том, что невозможно просто смотреть вокруг в поиске новых идей, на самом деле, это порочная практика. Так что вы можете просто проигнорировать весь этот раздел, если вы стараетесь выдумать что-то новое!

• Это должно быть уместным
  Если вы собираетесь сделать что-то совершенно новое и уникальное, сначала спросите себя: «А это вообще имеет смысл?» и «Это будет соответствовать назначению сайта?». Если ответом будет «Да», то вперед!
• Забудьте все, что вы знали!
  Ну хорошо, может быть, не все — базовые принципы забывать не нужно, но нет смысла искать вдохновения для новых идей, возможно вы просто выбрали не то направление.
• Держите марку
  Я думаю, если ваша новая идея выглядит и работает хорошо, то вам будет гораздо проще убедить всех, что она имеет право на существование.

Что для вас “качественный дизайн”?

Существует такое множество факторов, которые делают дизайн качественным, что в этой статье я раскрыл лишь основные из них. Поэтому мне было бы интересно услышать ваши идеи и мысли о том, по каким параметрам вы судите о том, хорош дизайн, или нет.

Постоянная ссылка на статью |Комментариев: 3
Теги: использование цвета, качество в веб-дизайне, примеры дизайнов

Еще записи на эту тему

• Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1. (11)
• Что такое качество в веб-дизайне: примеры и рекомендации. Часть 2 (7)

Спонсор месяца:
Бухгалтер в штате стоит недешево! Логос-Аудит – бухгалтерское сопровождение предприятий для тех, кто понимает.

Перевод статьи How to Spot Quality within Web Design: Examples & Tips

Не забудьте почитать: Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1.

А сегодня поговорим о том, что такое хорошо продуманная типографика и как правильно организовать элементы на странице.

03. Хорошо продуманная типографика

Хотя реальные тексты для сайта будет писать не дизайнер, они играют такую же важную роль, как и общее качество контента. Дизайнер должен потрудиться, чтобы тексты легко читались и удерживали внимание. Существует множество способов сделать текст легко читаемым и приятным глазу. По мере перечисления правил и норм того, что следует и чего не следует делать, я приведу несколько примеров сайтов, где рациональная типографика действительно работает.

Примеры хорошо продуманной типографики

Большые и красивые заголовки на сайте The Netsetter

Заголовки очень важны в веб-дизайне, особенно в дизайне блогов. Недавний тренд в веб-дизайне — использование крупных и жирных начертаний в заголовках. Этот тренд имеет ряд положительных последствий — при этом не только выделяются блоки, важные с точки зрения юзабилити, но и создается пространство и определяется структура страницы. Это замечательно иллюстрирует следующий пример с Netsetter — здесь видно, как вокруг заголовка создается много пространства, и, естественно, он очень хорошо читается.

Интерлиньяж и разрядка в тексте

Сайт Viget является очень красивым примером того, как важна типографика в веб-дизайне. На примере, приведенном ниже (взято из их портфолио), видно, как использование более крупного шрифта помогает создать свободное пространство. Даже при тонком, хрупком шрифте, который здесь используется, вы можете видеть, сколько пространства создается в этой области страницы. В самом деле, эта шрифтовая гарнитура очень изящна, и это отличный выбор. Еще одна вещь, которая бросается здесь в глаза — это внимание к высоте строки (интерлиньяжу). Расстояние между строками было увеличено по сравнению со значением по умолчанию, чтобы создать больше свободного пространства и сделать текст более удобочитаемым. Эту хитрость вы можете использовать в своей следующей работе.

Web Design Ledger — шрифты под настроение

Найти подходящий шрифт можно методом проб и ошибок, а можно выбрать шрифт на основании разных настроений, которые шрифты помогают привнести в дизайн страницы. Например, ресурс Web Design Ledger, обладая довольно невзрачным ретро-дизайном, при этом создает ощущение открытости и современности, так что выбор шрифта, вызывающего сходные эмоции, может стать залогом успеха сайта. Дизайнер Генри Джонс (Henry Jones) выбрал для заголовков популярный переходный шрифт с засечками Georgia, который очень хорошо соответствует «потертому» виду сайта. Современное звучание сайту придает еще один шрифт, в корне отличный от шрифта заголовков — основное содержание страницы напечатано шрифтом Helvetica, гарнитурой без засечек с очень плавными и открытыми очертаниями. Выбор гарнитуры в этом примере был очень разумным и, по сути, помог задать настроение всего сайта.

Качественный web дизайн саратов делают только в студии дизайна Юнима.

Краткий список требований по типографике в веб-дизайне

Определить хорошую типографику в веб-дизайне будет проще, если посмотреть на некоторые примеры (см. выше). Но чем же эти примеры так хороши и на что вам следует ориентироваться в типографике для своего следующего веб-сайта?

• Текст читается?
  Не бойтесь придавать заголовкам крупное и жирное начертание.
• А вы подумали о разрядке?
  Хорошая разрядка сильно улучшает читаемость текста.
• Соответствуют ли ваши шрифты настроению?
  Убедитесь, что шрифт дополняет дизайнерскую идею.

Тут можно дать еще тысячу советов, но я не считаю себя экспертом в это области, я всего лишь научился ценить эффект хорошей типографики. Если вы хотите узнать о предмете больше и увидеть еще лучшие примеры, я настоятельно рекомендую почитать соответствующую статью в Smashing Magazine.

04. Организация элементов

Дизайнерская деятельность многим кажется привлекательной из-за ее творческой составляющей, да и скучать тут, безусловно, не приходится. Сейчас я знаю, что слово «организация» звучит совсем не творчески и не весело, но если у вас сформируется привычка к хорошей организации, все будет не так уныло, как кажется на первый взгляд. Организация элементов веб-страницы всегда происходит по-разному, зависит от типа сайта и от того, насколько конкретные элементы важны для его содержания.

Несмотря на то, что размещение элементов контента варьируется от случая к случаю, есть несколько приемов, помогающих значительно облегчить эту задачу. Во-первых, нужно решить, какую цель преследует данный дизайн. Например, вы создаете сайт, призванный повысить продажи, либо наполненный какой-либо информацией, либо создаете службу подписки или каталог ссылок и т.п.

Дизайн коммерческого сайта: 37 signals

Глядя на популярный сайт 37 signals, легко заметить, что их продукция продается так хорошо неспроста. Создатели сайта сделали все возможное, чтобы вы увидели, что они продают, и помочь вам принять решение о покупке. Тут есть все, что требуется от сайта, предназначенного для продаж.

На картинке примера видно, что сайт обладает 4 ключевыми характеристиками, которые делают его идеальным для совершения покупок. Внимание привлекает первая деталь: они сделали очень темный блок с кратким содержанием и крупными заголовками, набранными жирным кеглем. Затем, они возбуждают интерес покупателя, перечисляя некоторые преимущества каждого продукта с симпатичной иллюстрацией. Следующая деталь — это желание купить, и оно подкрепляется цитатами и признаниями, даже приводится несколько видеороликов из серии «Нашим покупателям есть что сказать». И последняя характеристика — это динамичность. На сайте 37Signals имеются разные динамические компоненты, и приятно, пролистывая довольно длинную страницу, увидеть, что внизу есть несколько динамических элементов.

Дизайн ради содержимого (блог): Well Medicated

Создание дизайна блога — это совсем другая сказка. Вам нет нужды тратить время на убеждение и переубеждение пользователей относительно продукции, ваша «продукция» уже на виду, ваш контент — вот ваша продукция. Сделайте так, чтобы пользователям было удобно просматривать и читать ваши записи, а также писать вам или в ваш блог.

Содержимое должно быть главной или одной из главных вещей, которые есть в блоге. В данном примере симпатичный розовый заголовок в жирном начертании привлекает внимание прямо к контенту. Тут есть хорошего размера картинка для предварительного просмотра и добрых 2-3 абзаца текста, за которым следует ссылка «Читать дальше». Также имеется стандартная информация о том, когда и кем была сделана запись. По мне, это один из самых лучших примеров того, что я назвал бы качественным «дизайном ради содержимого». Внимание может быть привлечено ко всему, что вызывает интерес, здесь в фокусе находятся приятные крупные иконки оформления подписки, которые помогают пользователям следить за записями в вашем блоге. Кроме того, это несомненно увеличит количество подписчиков, так что этот прием работает на двух уровнях. Очень просто призвать пользователей просматривать другие разделы блога — для этого можно использовать все, от вкладки «недавние записи» или вывода популярных тем в боковое меню до организации выпадающих меню или простых и эффективных списков. Это легко осуществимо, но очень эффективно, особенно в блоге. Блоги обычно касаются личных вопросов, поэтому дать посетителям возможность связаться с вами различными способами будет очень полезно и поощрит людей узнать вас поближе и посетить ваш блог снова.

Советы по организации вашего контента

Конечно, бывает так, что приходится делать все иначе и ломать стандарты. Но есть несколько простых советов, которым вы можете следовать для создания прозрачной структуры и упорядоченного дизайна.

• Какую цель преследует дизайн?
  Как мы показали выше, определите цель вашего дизайна.
• Проектируйте с использованием сетки направляющих
  Сетка позволит выжать максимум из имеющегося пространства.
• Испытайте на себе расположение элементов
  Побудьте на месте посетителя, легко ли пользоваться сайтом?
• Удалите ненужные элементы
  Все, что неважно, следует удалить или убрать подальше.
• Баланс внимания
  Некоторые вещи должны быть оформлены просто, чтобы акцентировать внимание на других.

Читайте в следующей статье: “Что такое качество в веб-дизайне: примеры и рекомендации. Часть 3.” и вы узнаете как лучше всего использовать цвета и фоны в дизайне, а также о том, как можно придать дизайну изюминку.

Постоянная ссылка на статью |Комментариев: 7
Теги: качество в веб-дизайне, организация элементов, типографика

Еще записи на эту тему

• Что такое качество в веб-дизайне: примеры и рекомендации. Часть 1. (11)
• Что такое качество в веб-дизайне: примеры и рекомендации. Часть 3 (3)