Блог свободен от NOFOLLOW!

11 частых ошибок начинающего web-дизайнера

Дата: 07-07-2010 | Автор: Yaroslav.CH | Рубрика: Общение
Метки: , ,

85

11 частых ошибок начинающего веб-дизайнера

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

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

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

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

1. Ни малейшего представления об отрисовке макета в браузере

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

Верстальщик, получив макет, должен четко понимать — что происходит с макетом при измении размера. Как ведет себя сайт при изменении размера экрана? Растягивается ли фон? Какой из элементов шапки и подвала замещает собой пустое пространство? Каков будет размер у элементов при изменениях размера экрана? Ширина варьируется лишь в определенных пределах или дизайн полностью «резиновый»? Пока на эти вопросы не будет ответа — ни один нормальный верстальщик за макет не возьмется.

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

2. Фиксированная ширина и высота

В идеальном мире весь контент написан, согласован и утвержден до отрисовки дизайна. В реальности же все далеко не так радужно — неприятной для дизайнера тенденцией к изменениям обладают и объемы текста, и содержание блоков, и стили форматирования. К сожалению, начинающие дизайнеры редко задумываются над тем, что произойдет, если изменится тот или иной текстовый элемент — их пять строчек «Lorem Ipsum» выстраиваются в блоке идеально и они счастливы.

Ну, а о том, что латиница позиционируется не так, как кириллица — знает дай бог, чтобы 1% от общей массы новичков.

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

3. Игнорирование пользовательских предпочтений

Если дизайнер безмерно горд своим 30" монитором с разрешением 1920×1080, не стоит считать, что каждый пользователь обладает подобным же оборудованием. Причем многие новички, получив по поводу своего макета комментарий: «привести пропорции к среднестатистическим 1024×768» не находили ничего более умного, чем просто уменьшить макет с помощью «Image size». О том, что происходило с мелкими элементами, думаю, рассказывать не имеет смысла.

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

4. Субпиксельный макет

Большинство дизайнеров, пришедших (или точнее «вступивших» ) в web из полиграфии, очень удивляются, когда ровно через 30 секунд после отправки макета, получают комментарий — «переделать под 72 точки». А что тут трудного — когда тебе по почте приходит файл с макетом стартовой страницы размером в 30-50 мегабайт, догадаться о том сколько в нем DPI, не представляется чем-то из ряда вон выходящим.

5. Использование нестандартных шрифтов

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

С объяснений о несоответствии размера шрифта, межстрочных интервалов, кернинга и прочих атрибутов при равных значениях в Photoshop и в браузере (-ах), я начинаю обсуждение практически каждого макета, нарисованного новичком. А ответы типа «ну у меня же этот шрифт есть, он бесплатный, пусть и пользователь поставит!» уже практически перестали веселить.

6. Отсутствие знаний о принципах верстки

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

Типичный пример — заголовки, использующие фантастические шрифты и эффекты, которые можно реализовать только с помощью графики. Все замечательно, пока сайт состоит из 5-10 страниц. А что, если страниц будет порядка двух-трёх тысяч? Дизайнер очень быстро осознаёт свою ошибку, когда вынужден отрисовывать 50 уникальных заголовков ежедневно.

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

7. Последовательность в действиях

Еще одной замечательной особенностью новичков является любовь к так называемой «подгонке по месту». Если в макете стартовой страницы используются иконки размером 100×50 пикселей, не стоит в макете внутренних страниц менять их на 95×45, лишь для того, чтобы они удачно подходили под внутреннее наполнение.

8. «Ссылочная забывчивость»

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

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

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

9. Непонятные эффекты или анимация

Одним из наихудших моментов макетов в Photoshop является тот факт, что они не содержат в себе CSS, Javascript, Ajax и прочий инструментарий, который призван реализовывать различного рода эффекты. Поэтому, необходимо всегда отрисовывать подобного рода элементы в различных состояниях — открытые/закрытые меню, раздвижные и разворачивающиеся элементы в различных положениях и т.д.

10. Нереализуемые формы

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

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

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

11. Рациональное использование технологий

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

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

Есть вещи, которые имеет смысл делать на Flash, поскольку с помощью HTML подобный функционал невозможно реализовать (хотя, HTML5, возможно, изменит положение вещей). А есть решения, которые можно сделать только на HTML  и нельзя сделать на Flash. Но не стоит пытаться «впихнуть невпихуемое», в особенности не обсудив предварительно задачу с клиентом и разработчиком.

12. Потеря интереса к проекту

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

И вот именно здесь можно очень четко определить, сможет и захочет ли дизайнер работать «на два фронта» — полиграфический и web, или же просто решил срубить денег по-легкому и вернуться в привычную область А4. Профессионалов первой категории я обязательно «откладываю» для потенциальных предложений дальнейшей работы, а вторых — сразу же заношу в персональный blacklist.

artzonetlt советует: «начинающие дизайнеры используют фотошопное сглаживание шрифтов. заказчик потом негодует: «почему на макете так красиво, а на сайте шрифт другой?»

zmei советует: «хорошо если в макете учтено разное состояние ссылок. Кроме обычного как минимум — hover и visited.»

tumbr советует: «1. Я бы советовал всем дизайнерам и верстальщикам перебираться с Photoshop на Fireworks.

2. Перед созданием макета набросайте его прототип на листочке и продумайте функционал — сэкономите кучу времени.

3. При отрисовке макета всегда используйте сетку в 10 пикселей (или любой другой размер) + поставьте «прилипание» к этой сетке — сайт станет на порядок аккуратнее и гармоничнее.»

А с какими проблемами при работе с начинающими web-дизайнерами сталкивались вы?

Вебмастер самоучка Never Lex уже написал отзыв о первом месяце тренинга «Web-Гуру», который сейчас активно проходит. На тренинге он изучает веб программирование под присмотром профессиональных программистов.

Комментарии 85 комментариев

перейти к форме для комментирования

начинающие дизайнеры используют фотошопное сглаживание шрифтов. заказчик потом негодует: «почему на макете так красиво, а на сайте шрифт другой?»

ОтветитьОтветить

Этот пост прочел скорей из общей любознательности, чем из профессионального интереса, а вот за материалы про плагины для Хрома и 20 правил .htaccess большое спасибо!

ОтветитьОтветить

Гы)) Почти по всем 11 пролетаю)))) Спасибо за пост. Теперь буду совершенствоваться!

ОтветитьОтветить

@artzonetlt: спасибо за комментарий.

Абсолютно верное замечание — добавил его в статью со ссылкой на Ваш Twitter.

ОтветитьОтветить

@blogoeb: спасибо за комментарий.

Я стараюсь писать разные статьи, чтобы интересно было всем группам читателей :)

ОтветитьОтветить

На вскидку: хорошо если в макете учтено разное состояние ссылок. Кроме обычного как минимум — hover и visited

Здорово написано — по делу и очень тактично :)

ОтветитьОтветить

@zmei: спасибо за комментарий.

Спасибо за совет — я действительно зря не детализировал этот момент. Добавил в статью со ссылкой на блог :)

ОтветитьОтветить

Очень хорошая сборка типовых ошибок, спасибо. Мне как раз студент-практикант пришел — дам почитать а-ля «вредные советы»

ОтветитьОтветить

Как web-разработчик, я плакал и матерился над каждым пунктом не один раз. Всё верно.

ОтветитьОтветить

@Birma: спасибо за комментарий.

Скажу честно — чем раньше начнете, тем меньше набьете шишек и тем менее плотными будут лучи ненависти со стороны разработчиков и верстальщиков :)

ОтветитьОтветить

Вот! Вот оно!

Когда я мучилась-мучилась, пытаясь договориться с веб-дизайнером, а после мучилась-мучилась, пытаясь отрисовать диз для блога самостоятельно, чтобы после отдать его верстальщику, я и поняла: наука имеет много гитик!

Всему, чёрт побери, ВСЕМУ надо учиться, учиться и учиться! Ничего не даётся даром, с наскока! Если тебе кажется, что это просто, знай — ты ошибаешься!

Слава богу, мне хватило ума, провозившись с дизом пару месяцев, понять: НЕ УМЕЮ, не знаю, не понимаю, поэтому нельзя самой — надо предоставить работать СПЕЦИАЛИСТУ.

А сколько ужасающих дизов в Сети... О боги, сколько же их...

ПыСы: зачитываюсь Вашим блогом, он великолепен :)

ОтветитьОтветить

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

ОтветитьОтветить

Ошибки они и в Африке ошибке. Нужна практика, без шишек не обойтись. Только благодаря каждодневному труду эти шишки превратятся в незаменимый опыт

ОтветитьОтветить

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

ОтветитьОтветить

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

Да, и еще парочка практических советов:

1. Перед созданием макета набросайте его прототип на листочке и продумайте функционал — сэкономите кучу времени.

2. При отрисовке макета всегда используйте сетку в 10 пикселей (или любой другой размер) + поставьте «прилипание» к этой сетке — сайт станет на порядок аккуратнее и гармоничнее.

ОтветитьОтветить

@tumbr: спасибо за полезные советы — разместил их в статье со ссылкой на Ваш блог :)

ОтветитьОтветить

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

ОтветитьОтветить

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

автору +1, читать пост было одно удовольствие

ОтветитьОтветить

Я помню свою ошибку когда свёрстал сайт всё вроде бы ОК, установил на хостинг и сижу крутой ). А потом как то, не помню как, зашел на него не через Fire Fox как обычно а через IE, я был в шоке ), многие размеры не те, таблица уезжает за страницу ну вообще капец и пришлось почти весь сайт переделывать.

С тех пор я запомнил слово кроссбраузерность!

ОтветитьОтветить

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

ОтветитьОтветить

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

ОтветитьОтветить

все так, только все эти ошибки получаются из-за того, что заказчик не может правильно объяснить чего хочет и как, а дизайнер делает так как понял, по ходу вылезают ошибки ,которые правятся, а если бы изначально было понимание сути работы то этих 11 ошибок было бы значительно меньше))))

ОтветитьОтветить

@Макс Енот: спасибо за комментарий.

На самом деле это уже ошибка не дизайнера, а верстальщика :)

ОтветитьОтветить

Очень интересная и полезная статья.

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

После чего я перешел на фиксированную ширину и не жалею. Так я точно знаю как увидит пользователь сайт. :)

ОтветитьОтветить

@iriha: спасибо за комментарий.

Честно говоря, я не вижу ни малейшей взимосвязи между пожеланиями заказчика и опианными выше проблемами — все они зависят от компетентности исполнителя, но никоим образом не от задачи, поставленной заказчиком :)

ОтветитьОтветить

@© Yaroslav.CH:

Да, Вы правы, все эти ошибки от некомпетентности исполнителя. Я о преамбуле — «заказчик настаивал на «своем» дизайнере ... просто отказался от заказа» — они (заказчики) опасаются, что не будет реализовано, то что они видят и возлагают надежды на «понимающего» их человека, знания которого не всегда соответствует нужному уровню. Объяснить заказчику важность правильного и согласованного ТЗ, и отпадет все: отказ от заказа, ошибки, неудовлетворенность клиента.

ОтветитьОтветить

@iriha: к сожалению, в случае некомпетентности исполнителя — ТЗ не поможет решить все потенциально возможные проблемы. Во-первых, практически нереально в техзадании «подложить соломку» под каждый неверный шаг дизайнера, а во-вторых — подобный подход позволит снять с дизайнера ответственность за свою работу. Он всегда сможет сказать, мол, а мне в ТЗ не расписали этот момент — я и не делал.

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

ОтветитьОтветить

Дизайнер-верстальщик — идеальный вариант! Только быть одновременно хорошим дизайнером и отличным верстальщиком куда сложнее, чем по отдельности))) А сглаживанием шрифтов сама грешу, дааа... Спасибо, будем совершенствоваться дальше!

ОтветитьОтветить

Сам попарившись несколько раз по поводу мнооогих пунктов из этого списка, проклял все и теперь версткой дизайна занимается исключительно мой компаньон. У меня просто не хватает терпения -)

ОтветитьОтветить

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

ОтветитьОтветить

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

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

ОтветитьОтветить

@br-caterina: C++ не имеет никакого отношения к верстке сайтов.

Творчество, идеи и стиль — не могут быть ошибками как у начинающего, так и у зрелого дизайнера :)

ОтветитьОтветить

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

ОтветитьОтветить

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

ОтветитьОтветить

С ума сойти. Я тоже по все пунктам не подхожу :) Капец я ламер)

ОтветитьОтветить

Дааа, не раз проходил все эти ошибки. Может за исключением пункта 3., т.к. у самого разрешение 1024?768 и это пока «неписанный стандарт», хотя постепенно увеличивают это разрешение.

ОтветитьОтветить

Лично у меня всегда были проблемы с созданием неверстаемых изображений, что даже верстальщики часто отказывались превращать макеты в html. ну что поделать, если красиво? =)

ОтветитьОтветить

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

ОтветитьОтветить

А еще при верстке не описывают стили для тегов h1...h6, для ссылок, и не пишут самым первым стилем: *{margin:0; padding:0;}, из за чего позже появляются проблемы.

ОтветитьОтветить

@Серега: ну, эти моменты уже относятся к верстке, а не к дизайну :)

ОтветитьОтветить

Поначалу у меня было что то типа «состряпал» за 2 дня, отлаживал неделю, без комментирования было очень сложно =) ну и узнал некоторые свои ошибки, в которых, наверное признаться боялся =)

ОтветитьОтветить

Сколько пота и крови пролито над каждым пунктом... Всё точно в яблочко.

ОтветитьОтветить

плюс пиццот!!! особенно согласен с — «душевное здоровье мне дороже и просто отказался от заказа» и разделом «Непонятные эффекты или анимация»

ОтветитьОтветить

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

ОтветитьОтветить

@SWolf:спасибо за комментарий.

Не могу согласиться — в таком варианте это напоминает незабвенную цитату из башорга: «Это не страшно, что вы приносите недоделанные отчеты — главное, когда будете делать детей, обязательно их доделайте. А то потом приходят недоделанные дети и приносят недоделанные отчеты. И никак не разорвать этот замкнутый круг.»

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

ОтветитьОтветить

Да, почти через все прошел сам с нуля и набил все шишки)

ОтветитьОтветить

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

ОтветитьОтветить

@Cracker: спасибо за комментарий.

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

ОтветитьОтветить

Вот еще, только что столкнулся :)

Если проект мультиязычный (ru, en) — не учитывается разная длинна слов.

Например News и Новости.

Конкретная ситуация — Топ меню рисовалась пол англ. версию и при этом было жестко ограниченно по ширине. Теперь русская версия просто не влазит.

Дизайнеры — учитывайте разную длинну слов в мультиязычных проектах :)

От этого выиграет в первую очередь сайт который Вы создаете.

ОтветитьОтветить

@zmei: спасибо за комментарий.

Вот это живой пример реальной ситуации, описанной в п. 2 — «Фиксированная ширина и высота» :)

ОтветитьОтветить

Спасибо за хорошую статью. Но к сожалению я освоил все это на своей шкуре, так сказать, учился на своих ошибках

ОтветитьОтветить

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

ОтветитьОтветить

А есть ли на нашем могучем языке видео уроки по дизайну? В англоязычном варианте знаю что есть, но я еще не настолько силен в нем, что бы понимать все с лету)

ОтветитьОтветить

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

ОтветитьОтветить

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

ОтветитьОтветить

Думал вовремя попалась эта статейка, наверное всё про меня будет) Ан нет! Я скорее два в одном сам моделирую дизайн, причём одновременно фильтрую возможности реализации его в вебе, ведь сам всё верстаю...

Поэтому многие из вышеперечисленных пунктов явно не про меня :) Хотя и новичок... Спасибо!

ОтветитьОтветить

незнал что еще бывают такие ошибки которые я до сих пор делаю!!) теперь знаю о них!спасибо что проинформировали!)

ОтветитьОтветить

О, у меня тоже есть опыт работы с полиграфическим дизайном для веба. :) Я ведь верстальщик. О том, что дизайнер — полиграфист, догадываюсь по макету. Вот и начинаешь объяснять, что вот это и то хорошо на бумаге, а в браузере, да ещё на динамическом сайте, невозможно. Бывает, что человек требует, чтобы линия в подвале «продолжала» линию из шапки, и неважно, что на сайте футер и подвал одновременно никто не видит, зато человек не понимает: почему при резиновой вёрстке сайт становится шире, чем макет, а при фиксированной вдруг по бокам появляется поле, и «нельзя ли как-нибудь, чтоб ширина не менялась и поля не появлялись?»

А ещё я в макете требую стили для основных элементов контента (заголовки, списки таблицы) и пунктов меню в разном состоянии: текущий раздел и ховерный.

ОтветитьОтветить

Сасибо за подробное описание руководства «Как делать нельзя»! Ценные советы помогут кому-то избежать «mortal combat» )))

ОтветитьОтветить

@ artzonetlt: Я тоже в начале пользовался этим =)

ОтветитьОтветить

интересно) свои ошибки тут нашел! теперь буду исправлятся

ОтветитьОтветить

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

ОтветитьОтветить

С интересом прочитал. Я сейчас как раз задумываюсь о переходе из полиграфии в веб-дизайн (количество книг и газет в последние 2 года очень уменьшилось). Надо будет запомнить о подводных камнях веба. Спасибо!

ОтветитьОтветить

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

Да, и «невпихуемое» весьма повеселило, автору респект за чувство юмора.

ОтветитьОтветить

По некоторым пунктам всё нормально, а вот по некоторым пролетаю.

Надо исправлять. :)

ОтветитьОтветить

Как говорил один мой знакомый:"Я вижу что вы дизайнер, вы по жизни кто?"

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

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

ОтветитьОтветить

Ой... Вот недавно по работе пришлось нестандартные шрифты к сайту прикручивать. Что, думаете, это был начинающий дизайнер? Фигушки — контора с большими претензиями. Вот только портфолио у неё на сайте было в pdf... А в дизайне куча всякой хрени типа «автограф владельца» и полуторатысячепиксельная фотография его же в качестве фона. [[[[[[[[[[[[

ОтветитьОтветить

привыкшими к постоянной

«Постоянная статика» — звучит как минимум интересно ;)

ОтветитьОтветить

@Виктор Бурре: в контексте звучит не так странно, но могу согласиться, что стоит заменить на «перманентный» :)

ОтветитьОтветить

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

ОтветитьОтветить

у вас все правильно сказано! Но иногда бывают такие заказники которые игнорируют полностью все и говорят «ВОТ Я ТАК ХОЧУ» и не возможно что то объяснить.

ОтветитьОтветить

В этом посте будет очень в тему ссылка на ilovepsd.ru

ОтветитьОтветить

Сглаживание шрифтов в ФШ — ужасно. С трудом своего дизайнера приучил к тому, что в макетах для меня шрифты размером менее 17px сглаживать категорически запрещено.

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

Вообще считаю, что надо иметь постоянного дизайнера(-ов). Меньше мороки, меньше нервов тратится.

ОтветитьОтветить

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

ОтветитьОтветить

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

и что делать с ними???

сажусь, 10 минут! — полоса. образец — Комсомолка, или АИФ.

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

вот такие дела. так и у Вас тут примерно.

Резюме. лучше переплатить, но не иметь дела с потерей нервов и в конечном итоге — денег. Спец должен стоить хороших денег.

ОтветитьОтветить

А разве можно «с нуля» нарисовать макет сайта (т.е. полный дизайн сделать) в программе Fireworks. Я в нем только на куски режу)) А так рисую и создаю в фотошопе.

Ааа... уменьшать макет с помощью Image Size??? Это же абсурд, уважаемые!! По поводу шрифтов, то тут скажу, что у меня часто возникают ситуации когда шрифт жизненно необходим на сайте, но использовать его я могу только в виде .gif. А подгружать шрифты с помощью CSS не всегда разумно, лично я так считаю.

Не знаю, как быть с JS, JQuery. Если у пользователя вырублен о это все, то сайт может просто «размыть» по браузеру! Хотел бы узнать, как принудительно включить JS в браузере, если он выключен. Пока не знаю, как реализовать на JS такое. Знаю, что должен быть IF =))

ОтветитьОтветить

Веб- дизайн интересная штука но достаточно сложная для начинающего специалиста. Спасибо за то, что предостерегли от ошибок=)

ОтветитьОтветить

@Макс Енот:

Я думаю, тут вопрос больше к верстальщику, а не к дизайнеру.

ОтветитьОтветить

Вот про ссылки (пункт 8 ) вопрос действительно спорный. А если синий цвет совершенно не подходит?

ОтветитьОтветить

@Тим Аверин: именно об этом я и говорю — не обязательно использовать синий цвет. Важно выделять ссылки визуально и не подчеркивать текст, который ссылкой не является.

ОтветитьОтветить

Может быть разумнее было бы перед началом работ (дабы потом не тратить время на переделки) поинтересоваться у заказчика каким он видеть проект. Тогда бы после не было бы разочарования у обоих сторон.

ОтветитьОтветить

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

ОтветитьОтветить

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

ОтветитьОтветить

Учту ошибки. Спасибо, что их описали. Буду стараться их не делать.

ОтветитьОтветить

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

Спасибо за интересную статью. почитал с удовольствием!

ОтветитьОтветить

А Вы оставили комментарий? Ваше мнение очень важно!

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