20 шагов к идеальному дизайну сайта

Сетевой блог

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

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

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

Содержание
  1. 1. В первую очередь изложите свои мысли на бумаге
  2. 2. начните с отбраковки верхних элементов
  3. 3. использовать сетку PSD
  4. 4. выберите шрифты.
  5. 5. выбор выбора.
  6. 6. разделить структуру участка
  7. 7. просматривать знакомые предметы
  8. 8. бросьте себе вызов.
  9. 9. внимание к деталям
  10. 10.Сосредоточьтесь на каждом элементе, поскольку из этих строительных блоков складывается общий дизайн.
  11. 11. четкость и разборчивость адресных данных
  12. 12. найдите PSD.
  13. 13. предполагать лучшее и готовиться к худшему
  14. 14. погрузиться в дизайн до такой степени, чтобы возненавидеть его
  15. 15. стараться как можно быстрее прийти к общему видению с клиентом
  16. 16. быть лучшим другом разработчика
  17. 17. презентация: объясните мне, что я похож на четырехлетнего ребенка
  18. 18.Любите каждую свою идею, но не перегружайтесь ею.
  19. 19.следить за развитием дизайна на протяжении всего срока эксплуатации объекта.
  20. 20. делиться информацией с общественностью при разработке проектов

1. В первую очередь изложите свои мысли на бумаге

1. сначала изложите свои идеи на бумаге.

Предварительный обзор серии работ для городов по всему миру

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

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

2. начните с отбраковки верхних элементов

2. начните с эскиза элементов более высокого уровня

Эскиз общей структуры поможет вам решить проблемы взаимодействия и структурировать макет страницы.

Когда вы спрашиваете меня, что я делаю в первую очередь, когда начинаю проектирование, мой ответ: — определяю элементы каркаса самого высокого уровня, которые решают все проблемы проектирования.

Фрейм — это интерфейс, который содержит все содержимое, обрабатывает его и помогает определить его положение на странице. Он содержит меню навигации и такие элементы, как боковые линии и колонтитулы страниц.

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

3. использовать сетку PSD

3. использовать сетку PSD

Пример 978-битной сетки с 10-пиксельной базовой линией

Это очень просто. Прежде чем начать что-либо делать в Photoshop, необходимо создать подходящую сетку.

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

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

ЧИТАТЬ ЕЩЁ:  Antigate – сервис, который упрощает работу софта и позволяет заработать

4. выберите шрифты.

4. выберите шрифты

Общее правило — использовать не более двух разных шрифтов в макете сайта.

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

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

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

5. выбор выбора.

5. выбрать цвета

Используйте ограниченный набор цветов и оттенков, чтобы избежать визуальной гиперкоррекции.

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

Важно быть последовательным при определении цветовой схемы основных элементов интерфейса и зависимых объектов.

В качестве примера можно привести такие сайты, какFacebook, Twitter, Quora иVimeo.

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

6. разделить структуру участка

6. изолировать структуру участка

Чем проще структура сайта, тем легче пользователям ориентироваться.

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

На самом деле, нет необходимости размещать огромное количество переходов на другие разделы & # 8212- все должно быть подчинено его идеологии".Что здесь можно сделать?».

Представьте себе самую простую возможную структуру #8212; с одним элементом. Затем попробуйте упростить его, добавляя необходимые разделы по одному. Вы будете удивлены, насколько это сложно сделать; вы будете удивлены, насколько это может быть легко.

7. просматривать знакомые предметы

7. просматривать знакомые предметы

Нужна ли вам кнопка поиска? Практика показывает, что в большинстве случаев ответ отрицательный.

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

Стандарты проектирования и контрактов используются в веб-разработке, потому что они работают.

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

8. бросьте себе вызов.

Я призываю всех дизайнеров вкладывать себя в каждый проект. Инновации не всегда внедряются, если без них не обходится проект.

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

9. внимание к деталям

9. обращать внимание на детали

Игры в процессе: см. подробности.

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

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

ЧИТАТЬ ЕЩЁ:  Qiwi кошелек - регистрация и использование

Но в целом, прикосновения важны, и введение таких уникальных элементов происходит естественно, если вам нравится ваша работа.

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

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

Уделите внимание каждому элементу. Таким образом, общий дизайн будет больше, чем сумма всех элементов.

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

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

11. четкость и разборчивость адресных данных

11. работа над ясностью и читабельностью пунктов

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

Помимо эстетики, есть и чисто практические причины для обеспечения четкости и правильности элементов.

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

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

12. найдите PSD.

Это (наряду с использованием сеток) является одним из самых важных советов при проектировании в форматеФотошоп.. Независимо от размера проекта и количества задействованных дизайнеров, вам необходимо поддерживать порядок в файлах.

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

13. предполагать лучшее и готовиться к худшему

13. рассчитывать на лучшее, но готовиться к худшему

Продумайте, как макет будет работать на разных устройствах и при разных размерах экрана.

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

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

Однако, представляя свою работу, всегда рекомендуется работать в оптимальных условиях.

Это дает вам возможность раскрыть все преимущества вашего проекта. Поэтому следует отображать идеальный объем текста в идеальном месте страницы окна браузера — это наиболее распространенный сценарий для большинства пользователей сайта.

14. погрузиться в дизайн до такой степени, чтобы возненавидеть его

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

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

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

ЧИТАТЬ ЕЩЁ:  14 новых front-end фреймворков, о которых вам стоит знать

15. стараться как можно быстрее прийти к общему видению с клиентом

при подаче предложений по улучшению дизайна или концепции контура".См.'Сайт, вам нужно как можно быстрее достичь одинакового видения с вашим клиентом. Как только это произойдет и первоначальная идея будет одобрена, вы сможете расслабиться и приступить к работе.

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

16. быть лучшим другом разработчика

16. быть лучшим другом разработчика

Разработчики. — Творческие люди, которые любят свою работу так же сильно, как и вы. Однако они не всегда участвуют в процессе создания сайта от начала до конца.

Часто их участие заканчивается в тот момент, когда их окончательная идея одобрена и их творческое видение больше не нужно. Эта ситуация неправильная. Потому что во многих случаях отличные идеи приходят от команды разработчиков.

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

17. презентация: объясните мне, что я похож на четырехлетнего ребенка

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

Всегда помните — то, что кажется совершенно ясным для вас, может быть не столь очевидным для кого-то другого, кто видит ваши планы впервые.

18.Любите каждую свою идею, но не перегружайтесь ею.

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

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

19.следить за развитием дизайна на протяжении всего срока эксплуатации объекта.

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

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

20. делиться информацией с общественностью при разработке проектов

20.Когда вы делитесь информацией с общественностью при разработке своей работы таким образом, вы вносите вклад в развитие онлайн-сообщества и взамен получаете ценные комментарии от его членов.

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

Иногда, по каким-либо причинам, лучшие элементы проекта оказываются в конечном итоге".Файл'После того, как проект сдан и, по возможности, получил зеленый свет от клиента на выполнение, мы создаем кейс, включающий промежуточные задачи и элементы дизайна, не использованные в окончательном варианте.

Таким образом, вы вносите свой вклад в развитие онлайн-сообщества и взамен получаете ценные комментарии от его членов.

Оцените статью