Проекты различаются по объему и размеру, и проблемы, с которыми они связаны, также различаются. Как одинокий веб-дизайнер, самая большая работа, за которую я отвечаю, — это FlashDen . Наряду с тысячами активных участников, которые общаются в чате, загружают и покупают, сайт обрабатывает большие суммы денег и большой объем трафика.
Проектирование, редизайн, поддержка и работа с командой разработчиков дала мне несколько полезных идей и советов для облегчения жизни. И так как сегодня мы запустили мой последний редизайн сайта, похоже, пришло время написать 7 моих лучших советов!
1. Дизайн и код для ремонтопригодности
Первый и самый большой совет, который я могу дать, — это спроектировать сайт так, чтобы его было легко поддерживать. Часто при разработке сайта вы можете пожертвовать вещами ради эстетики. Например, вы можете использовать изображения там, где достаточно текста или стилей. Или вы можете сознательно выбрать структуру меню, в которой нет места для роста. Когда сайт большой, это становится действительно плохой идеей.
Когда я создал самую первую версию FlashDen почти два года назад, я использовал изображения для кнопок. Они выглядели действительно хорошо, но я получил библиотеку из 100 различных изображений кнопок, не говоря уже о ролловерах. Затем, в течение следующих нескольких месяцев, каждый раз, когда разработчик нуждался в новой кнопке, ему приходилось просить меня создать изображение. Само собой разумеется, я выучил этот урок довольно быстро, и мы переключились на класс с одной кнопкой, который, возможно, выглядит не так хорошо, но намного лучше для душевного спокойствия.
Другим аспектом обслуживания является размышление о том, как сайт будет расти и изменяться. Например, когда новые страницы добавляются, куда они идут? Раньше я хотел иметь горизонтальную навигацию, но это действительно ограничено. После некоторых экспериментов мы использовали вертикальную навигацию, позволяющую использовать элементы подменю, а затем добавили к страницам структуру вкладок, позволяющую группировать связанные страницы. Я не говорю, что это лучшая навигация в мире, но это, безусловно, означает, что мы не переделываем дизайн каждый раз, когда на сайт добавляется новый раздел!
Поэтому при разработке большого сайта ищите способы сделать жизнь проще, потому что вы будете рады, что сделали это!
2. Определите ваши группы пользователей и задачи
Одним из самых больших различий между большим сайтом и маленьким является количество разных типов пользователей, которые могут использовать сайт. Например, на FlashDen есть покупатели, авторы, посетители, администраторы и участники. У каждой группы свой набор целей и задач, которые они должны выполнить. Иногда эти задачи пересекаются, но иногда они совершенно разные.
Лучший пример того, где пользовательские задачи расходятся друг с другом, — на домашней странице. Нигде больше на сайте не сходятся все группы пользователей, и нигде не так важно, чтобы каждый получал то, что он хочет. И, конечно, вы должны быть осторожны, что при обслуживании одной группы пользователей вы не игнорируете другую.
В этой последней переработке FlashDen самой большой областью, над которой я работал, была домашняя страница. Первым делом я перечислил для себя все то, что нужно сделать каждой группе пользователей:
- Покупатели: люди, которые на FlashDen покупают файлы
Начните просматривать элементы, начните поиск, зайдите на их личную домашнюю страницу, внесите деньги, узнайте, как работает сайт (для новых покупателей) - Авторы: Люди, которые продают товары на FlashDen
Общайтесь с другими участниками, размещайте их на главной странице, чтобы публиковать их новости, узнавать о новостях сайта, быстро получать информацию об их портфолио и доходах. - Новые посетители: потенциальные покупатели / авторы / участники, которые только что прибыли
Узнайте, что сайт делает / делает очень быстро , начать работу, узнать типы файлов и цены - Участники: Люди, которые на самом деле не являются покупателями или авторами, а просто участвуют в сообществе.
Общайтесь с другими участниками, смотрите новости сайта, просматривайте файлы - Администраторы / рецензенты: наши сотрудники, которые управляют одобрением файлов, модерируют форумы и обычно участвуют
Быстро получать одобрения файлов, видеть последние темы форума, слышать новости сайта
Когда вы знаете, что хотят делать разные группы пользователей, вы можете создать страницу, которая решит все их задачи. Излишне говорить, что это задача, которая становится экспоненциально сложнее, чем больше групп и задач. На других страницах сайта вам часто приходится беспокоиться о подгруппах пользователей, но на главной странице все они сходятся. Не случайно, домашняя страница — это самая важная часть дизайнерской работы, которую вы должны сделать на сайте.
Прежде чем вы сможете решить различные потребности, вам нужно расставить приоритеты в группах пользователей, и для этого вам нужно понять, чего пытается достичь сайт.
3. Понять цели сайта
Хотя каждая группа пользователей, естественно, считает, что они являются наиболее важными, вы должны расставить приоритеты в соответствии с тем, чего пытается достичь сам сайт. Например, на FlashDen, посидев с командой, мы сделали следующие выводы:
- Главным приоритетом для сайта является обслуживание покупателей. Когда покупатели обслуживаются хорошо, они продолжают покупать, принося доход и одновременно обслуживая авторов.
- Очень важно, чтобы новые посетители быстро узнали о сайте и надеялись стать его участниками. FlashDen все еще находится на относительно новом рынке, и все еще появляются новые конкуренты, что делает более важным захват посетителей и преобразование их в покупателей, авторов или участников.
- Авторы важны, потому что в своей основе FlashDen действительно посвящен ее авторам, но из всех групп пользователей они наиболее привержены сайту.
- Пользователи не так важны, как авторы и покупатели, но вносят свой вклад в сообщество, окружающее сайт.
- Администраторы / рецензенты являются наименее важными, поскольку они являются платной группой.
Исходя из этого, можно сделать вывод, что домашняя страница нужна пользователям сервера в следующем порядке: посетители> покупатели> авторы> участники> администраторы.
Понимание того, что ваш сайт пытается достичь, является последним потоком, который объединяет ваши пользовательские задачи и говорит вам, что вы должны пытаться поместить на страницу. В идеале на каждой ключевой странице вы должны идентифицировать группы пользователей, задачи и приоритеты. Для такой важной страницы, как домашняя страница, я делаю это формально на бумаге, а для небольших страниц я часто просто делаю это в своей голове при разработке.
4. Дизайн, уточнение, уточнение, уточнение …
Только после того, как вы выяснили группы пользователей, задачи, цели сайта, приоритеты и так далее, пришло время разрабатывать! Очень важно, чтобы вы сделали это в первую очередь, потому что на практическом уровне это значительно снижает вероятность того, что вы вернетесь назад и переделаете свой дизайн. Всякий раз, когда я только начинал проектировать большой сайт без предварительного анализа, мне неизбежно приходилось переделывать множество экранов или даже целые интерфейсы.
Многие дизайнеры предпочитают использовать каркасы на этом этапе, то есть просто выложить ряд линий и прямоугольников, указывающих, где примерно все должно идти. Лично я предпочитаю работать в Photoshop с самого начала, потому что я достаточно быстр, и это позволяет мне действительно увидеть, что произойдет. Я также думаю, что информационный дизайн — это нечто большее, чем то, где что-то появляется на странице. Простое изменение цветов и цветов фона может сделать элемент страницы дальше вниз по странице внезапно более важным.
Как только у вас есть приблизительное представление о том, как информация должна работать вместе, вы должны придумать рабочий дизайн, который в целом приемлем, а затем доработать, уточнить, уточнить. Я часто получаю пять или шесть версий одного и того же внешнего вида, где я пробовал разные вещи, такие как размеры шрифта, изображения, изменения макета, фоны и т. Д., Чтобы увидеть, как это влияет на информацию, которую вы представляете.
Независимо от того, насколько вы хороши, как вы думаете, первый макет, я могу гарантировать, что потратив больше времени и придумав больше версий, вы обнаружите, что ваш оригинал не так хорош, как вы думали. Иногда вы бросаете весь дизайн и начинаете снова, но если у вас есть хорошая основа, то доработка должна привести вас к отличной отделке.
5. Получить мнения других, но сделать последние звонки
В любой крупной работе у вас будет много других мнений. В большинстве случаев это будет мнение вашего клиента. До запуска FlashDen я работал со всеми видами компаний, создающих веб-сайты. Среди них мне посчастливилось спроектировать несколько крупных страховых компаний и несколько правительственных организаций. Я говорю несчастье, потому что, когда вы подходите к клиенту такого размера, вы имеете дело со многими заинтересованными сторонами, и во многих ситуациях неясно, где находится реальная сила для принятия решений. Это может привести к бесконечным встречам, бесконечным изменениям и высокой степени сложности для реализации вашего видения.
Каким бы ни был клиент, очень важно узнать его мнение. Помимо всего прочего, в большинстве случаев они знают о бизнесе гораздо больше, чем вы. Надеемся, что они также знают о пользователях больше, чем вы, и благодаря этим знаниям они смогут дать конструктивный совет.
Также важно узнать мнение команды разработчиков, с которой вы работаете. В FlashDen нам повезло иметь двух разработчиков, которые имеют большой опыт в разработке пользовательского интерфейса и удобстве использования. И их вклад, наряду с остальной частью команды, имел большое значение для конечного продукта.
Но, в конце концов, вам, как опытному дизайнеру, предстоит принять окончательное решение. Если у вас жесткий клиент, это может быть сложно, потому что клиент часто считает, что ему следует сделать последние звонки. Если это так, вы должны (а) найти способы объяснить, обучить и показать клиенту, что ваш выбор в их пользу; и (б) иногда кусать пулю и принимать директивы клиента как дополнительное ограничение в вашем проекте, и находить способы заставить его работать.
6. Организовать для будущего
Когда вы разрабатываете дизайн для большого сайта, очень важно снова подумать о будущем. То, как вы управляете своими файлами и папками, сильно повлияет на вас позже. Например, недавно мы решили создать дочерний сайт для FlashDen, который фокусируется только на аудио, под названием AudioJungle. Чтобы упростить задачу, сайт будет работать с тем же HTML, с простыми таблицами стилей, чтобы он выглядел как другой сайт. Подобные разработки бросают всевозможные новые вызовы моим структурам файлов и папок, моим таблицам стилей и моему HTML. Вот некоторые вещи, которые нужно иметь в виду:
- Организуйте себя в хорошую структуру папок
Скрипты, таблицы стилей, изображения интерфейсов, изображения контента и т. Д. Должны храниться отдельно. На небольшом сайте вы можете просто собирать вещи, но чем больше вы получаете, тем важнее найти то, что вам нужно. - Используйте целостную и интеллектуальную систему имен для ваших файлов
Нет ничего хуже, чем смотреть на кучу изображений с такими именами, как «gd_l3.jpg». Как вы это делаете, в значительной степени личное дело, но я считаю, что наименование с использованием общих префиксов и описательных имен файлов очень помогает. Так, например, я мог бы начать каждое изображение, идущее в заголовке, со словом «header_», каждый фон с «bg_», а затем фон меню из заголовка будет называться «header_bg_menu.jpg». Преимущество префиксов заключается в том, что когда ваши файлы сортируются по имени, все они отображаются вместе. - Используйте Subversion
Наши разработчики навязали мне это, но, слава богу, это было! Subversion отслеживает файлы и изменения файлов и мешает вам перезаписать других дизайнеров / разработчиков, работающих над тем же проектом. Также, что важно, это помогает вам вернуться к старым версиям вещей. Это требует некоторого привыкания, но даже без учета всех причин, по которым разработчики его используют, это стоит для дизайнеров HTML / CSS. Не знаете о Subversion? Проверьте Subversion для дизайнеров . - Подумайте, как вы пишете свой HTML и CSS
Это действительно легко сделать беспорядок с вашими файлами HTML и CSS, и очень трудно очистить их резервные копии. После четырех редизайнов я все еще использую многие из тех же CSS-файлов, и это задача — очистить классы, которые больше не используются, или найти неясные определения, обернутые во множество слоев. Используйте много комментариев, возможно даже несколько таблиц стилей, и убедитесь, что вы правильно называете свои стили!
- Получить браузер совместимость работает в начале
Это та область, в которой у меня возникли проблемы с FlashDen, и с тех пор мы платим за нее. Мой первоначальный макет работал в IE7, и я игнорировал IE6 до тех пор, пока мы не закончили создание всего сайта. С тех пор мы добавляли в IE условные выражения, хаки и обходные пути. Сделать что-то совместимое намного проще, когда на странице всего несколько элементов, чем когда вы создали огромный сайт, так что не следуйте моей глупости!
7. Упростите разработку с помощью своей таблицы стилей
Чем больше сайт, тем меньше вероятность, что дизайнер увидит или изменит каждую страницу. Если вы один дизайнер на большом сайте, как я, то вам, возможно, не захочется, чтобы вас приглашали за все. Так что стоит создать таблицу стилей, которая почти по умолчанию заставляет вещи выглядеть красиво. Например:
- Убедитесь, что вы стилизуете элементы по умолчанию, такие как <input>, <strong> и так далее.
Таким образом, страница будет автоматически хорошо отображаться. Если вы полагаетесь на то, что люди делают что-то вроде <strong class = «my_bold»>, то неизбежно возникнут различия на страницах. - Создавайте повторно используемые элементы, которые разработчики могут использовать.
Например, в FlashDen у нас есть класс таблицы с именем «general_table», который создает хороший запасной стиль для данных. Когда у меня есть возможность стилизовать страницу, я могу делать более конкретные типы таблиц и выделения данных, но, по крайней мере, разработчик, создающий страницу, имеет хороший стиль универсального стола для использования. - Убедитесь, что ваш макет страницы имеет структуру, которая выглядит хорошо, даже если в ней есть только текст.
Неизбежно, будут страницы, к которым у вас не было возможности добавлять изображения, и которые могут выглядеть немного скучно. Используя такие вещи, как стили заголовков, боковые панели и т. Д., Вы можете убедиться, что они по-прежнему выглядят приятными и имеют визуальный стиль. Например, в FlashDen мы заключаем большинство текстовых блоков в:<FIELDSET>
<Легенда> Заголовок </ легенда>
содержание
</ FIELDSET>И это по умолчанию оборачивает текст приятной маленькой рамкой и заголовком. С разработчиком легко работать, и он хорошо разбирает текст и делает его более читабельным. У нас также есть компонент боковой панели, который является еще одним пакетом для дополнительного текстового содержимого, но это снова делает страницу более визуальной.
Естественно, было бы оптимально, если бы каждая страница проходила через дизайнера, но при этом было бы гораздо меньше стресса, зная, что даже если этого не произойдет, она все равно будет выглядеть профессионально и единообразно.
Каково твое мнение?
Таковы мои советы. Если у вас есть что-то от работы на больших сайтах, оставьте комментарий!