Процесс веб-дизайна и мышления - PullRequest
1 голос
/ 08 июня 2009

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

Ответы [ 9 ]

3 голосов
/ 08 июня 2009

Мой личный метод проектирования сайта - это, прежде всего, учитывать потребности сайта. Что самое важное, что посетитель должен сделать или должен знать. Рассмотрим этот сайт. Когда вы открываете домашнюю страницу, вам нужно сделать три важных вещи: 1. просмотрите несколько вопросов, чтобы ответить на них, задать вопрос или войти в систему. Вы сразу сможете быстро выполнить эти 3 действия с минимальными кликами и не искать.

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

В-третьих, вы должны учитывать узнаваемость бренда. Есть причина, по которой сайт Pepsi синий, а сайт Coke красный. Если вы видите где-то логотип стека переполнения, есть большая вероятность, что он позвонит в колокольчик (возможно, ошибка сервера не так уж и велика). Это главная проблема дизайна, на которую многие компании тратят много денег.

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

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

После этого просто посмотрите на другие сайты, похожие на то, что вы делаете. Посмотрите на блоги о дизайне, такие как Smashing Magazine . Все это вдохновит вас, но не думайте: «О, на этом сайте мигает текст, у меня должен быть мигающий текст!» или «Этот блоггер говорит, что я должен использовать этот шрифт для бизнес-сайтов, поэтому я должен его использовать». Вы достаточно умен, чтобы знать лучше

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

3 голосов
/ 08 июня 2009

Шаг 1.

Сначала нужно определить, для какого типа сайта вы разрабатываете. Если вы разрабатываете сайт, на котором будут отображаться продукты или множество картинок в целом, подумайте о подходящем дизайне. (т. е. не создавайте макет из трех столбцов для такого сайта, так как он будет выглядеть очень тесным, а рисунки должны быть небольшими, чтобы вместить другой контент в другие столбцы). Или, с другой стороны, если вы знаете, что ваш сайт будет очень простым, вы можете решить разместить все это на одной странице и использовать javascript для прокрутки ссылок на определенные области страницы. Это становится все более популярным.

Шаг 2.

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

Шаг 3.

Чтобы помочь с шагом 2, посетите такие сайты, как http://www.cssmania.com, чтобы получить вдохновение и идеи о том, каким должен быть приличный веб-сайт. Не копируйте их, но почувствуйте графическое использование, расположение меню, шрифт и типографику и т. Д.

Некоторые дизайнеры используют Photoshop для разработки дизайна, а затем нарезают его и создают сайт. Некоторые прыгают прямо в html / css. Это полностью зависит от вас. Лично я сразу начинаю с html / css, а затем делаю предварительный дизайн сайта, добавляя фоновые изображения, пользовательские кнопки и т. Д.

«Каковы лучшие практики - с использованием div, дизайна сетки и т. Д.»

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

1 голос
/ 08 июня 2009

Введение в использование шаблонов в веб-дизайне , созданное Райаном Сингером (Ryan Singer), может помочь в преодолении ментального блока при разработке страниц.

Идея проста, очевидна, и ее очень легко забыть: опираться на то, что, как вы знаете, верно, а не на свои предположения. Вроде как тестовая разработка, но для веб-дизайна.

1 голос
/ 08 июня 2009

Вот что я делаю (я разработчик, который пытается проектировать!)

  • Нарисуйте макет на листе бумаги
  • Сделать макет в фотошопе / рисовать и т. Д.
  • Разделите содержимое страницы на различные блоки, разделы, таблицы
  • Узнайте, какие элементы страницы являются общими для всех / большинства страниц, такие как верхний и нижний колонтитулы
  • Преобразование макета в HTML и CSS
  • Посмотрите, отображается ли оно в большинстве браузеров (самая сложная часть)
  • Получите отзыв от коллеги / друга и измените дизайн
0 голосов
/ 08 июня 2009

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

Не заставляй меня думать: подход здравого смысла к удобству использования Интернета Стивом Кругом

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

Пуленепробиваемый веб-дизайн: повышение гибкости и защита от наихудших сценариев с помощью XHTML и CSS. Автор Dan Caderholm

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

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

0 голосов
/ 08 июня 2009

Я предпочитаю макет таблицы на макете div, поэтому вы можете выбрать тот, который подходит вам и вашему приложению, затем написать css для страниц и следовать "Look and feel". Хотя я не эксперт, надеюсь, это сработает.

0 голосов
/ 08 июня 2009

Первое, что вам нужно знать, это стандарты и совместимость браузера.

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

Когда дело доходит до макета и дизайна, вы должны проверить A List Apart http://www.alistapart.com/, который является одним из лучших сайтов, который отвечает на ваши вопросы, связанные с дизайном, методами и процессом.

0 голосов
/ 08 июня 2009

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

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

http://www.lukew.com/

http://www.lukew.com/resources/web_form_design.asp

Надеюсь, что книга даст вам много понимания. Береги себя.

0 голосов
/ 08 июня 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...