Как стать автором
Обновить

Комментарии 231

НЛО прилетело и опубликовало эту надпись здесь
Согласен. Отличный материал.
Отличная статья.
В принцепи ничего нового — но все перечиаленно в одном месте — удобно.
Спасибо.
НЛО прилетело и опубликовало эту надпись здесь
Сами знаете кто писал в предисловии что ководство не содержит практических приемов, а только лишь пищу для ума. Если он есть конечно же ((:
Ну, переплюнуть Ководство я цели не ставил =)
Но приятно слышать, что понравилось.
Вы забыли о главном:

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

Очень, очень плохо.

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

А всего-то надо — подумать.»

Рома Воронежский «Про ластики». www.narisoval.ru/faq/lastiki.html
Отличный текст.

Просто я не касался этой темы, она достойна отдельного материала.
Я прикоснулся к этому только по-краешку «Вначале думаем, а потом делаем» (что входило в формат «Памятки»).

А «зачем» это куда более обширная тема. Так сказать выход на следующий качественный уровень.
Многим не хватает даже перечисленного в статье.
Сейчас мастеру надоем указкой по рукам. ;)
Статья хорошая.

Но я все равно не понимаю, как:
На сайте www.make.com.ua/light/
>Безусловно, что мы сможем провести весь комплекс работ: проектирование удобного дизайна, разработку зрелищного оформления, xhtml-верстку

54 Errors, 50 warning(s)

Из-за чего у меня в FF 3.0 страница «расползлась» как могла. 3-я колонка видна наполовину и без горизонтального скролинга.

Как вы с yandex-ом работали? У него ошибок нет ;)
После такого, как-то и статье не особо доверяешь ;)
А при чем тут html-верстка, в принципе?

Как это касается смысла статьи?

Да и как это касается временной заглушки на нашем сайте, тоже.
Заглушка, по определению, делается быстро и просто.
Я тоже не могу понять вас ;) (как менеджер)

Какая политика компании.

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

посмотрев на упомянутый сайт — просто, без валидации, понял, что будь я заказчиком хоть капельку разбирающимся в верстке (ну или просто имеющим здравый смысл), не обратился бы в контору, имеющую такой сайт, как www.make.com.ua/light/ (см. колонки текста в правой части страницы)

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

то есть, нарушен пункт статьи о разрешениях экранов — не продумано отображение материала на типичных разрешениях. (у меня на 1280* возникли вопросы, но куда важнее, на типичнейшем и дико распространенном 1024* ситуация с версткой имеет те же проблемы).
что думает пользователь, видящий «съеденную» правую колонку при отсутствии горизонтальной прокрутки? лично мне пришло в голову только чукотское «баг, однако», после чего я с большим трудом поборол желание закрыть страницу и никогда на нее не возвращаться.

хочу, так же, уточнить:
1. почему горизонтальные размеры лучше указывать в процентах, а не в em?
2. откуда взят постулат о пунктирном подчеркивании? (это удобно и логично, просто раньше не встречалось мне)
3. зачем на www.make.com.ua/light/ проигнорирован постулат о необходимости цветового выделения ссылок и ряд других постулатов, описанных в статье?
Как сказал автор — это «заглушка» :)
Я считаю, что даже заглушка своего «лица», должна быть технически и технологически идеальна. :) Можно даже «без дизайна» вообще.

Кстати акцент заглушки как раз на технологический дизайн был сделан.
Вот к примеру политика Лебедева: лучший валидатор — браузер (это его имхо)
Спорить не буду.
Просто потом интересно наблюдать за новыми работами. То там «полезло», то там. В «скорости» ошибки убираются, но если бы изначально политика компании была поставлена правильно, я думаю такого не было бы.

Лебедев всегда повторяет — да у нас дизайн классный (спорить тоже не буду). Съедят и так.
А выходит, не все едят. Потом уходят Нокиа и т.п. В недоумении он пишет — да пошли все на йюг, они не понимают мастера. :)
Я не хочу язвить, я выражаю свою точку зрения с точки зрения менеджмента. Чтобы никто не наступал потом на те же грабли.
Про 3-я колонку :) понял. Это уже вопрос к юзабилити оказался :)
Но все равно не снимает ответственности за 54 ошибки :)
Кстати Лебедев вставляет свой «скроллинг» (js) и имхо он прав в этом отношении.
Прочитав эту статью, я понял, что это недоработка «юзабилити» ;)
Я не расшифровал этот смысл.

1
При чем тут лебедев и его скроллинг?

2
Как это связано со статьей?
В статье был тезис про юзабилити.
Если вы называете сайт компании «заглушкой», то можно не обращать внимание.

И вообще, я часто не понимаю. Очень много дизайн студий просто плюют на свои сайты. Не понятно. Я понимаю, клиенты понятие не имеют про юзабилити, w3 и т.п. Но это все же «лицо» компании ;) хоть и «заглушка».
Может уберете ошибки с сайта, там работы на 5 минут ;)
Ведь например работы из портфолио без ошибок ;) (или почти без ошибок)
Зачем?

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

Знаете, даже заглушку надо делать «показательно». Вы не согласны?
Спустя рукава ;)?
Вы же претендуете на серьезность. Тогда любую работу надо делать «показательно» и на 100%

Там «переделать» (исправить) на 10 минут работы.

P.S. Не вам. Тем кто поставили минусы. Очень часто все разглагольствуют по поводу опечаток и ошибок и… «минусуют», когда обращают внимание на ошибки «в стандартах».
Извините, но это какое-то лицемерие.
Если уж грамотность то везде ;)
Правильно. Без прописных истин (правил, которые описаны в статье автора) не возможно понять другие (правила, которые описывает Артемий Лебедев). В добавок, ководство в общем о дизайне, а не только о веб-дизайне.

Простым языком: вы подчеркнули больше, потому что знали меньше. Всё в мире относительно.
Карандаш — лучший друг web-дизайнера!
Голова и руки — лучший друг веб-дизайнера!
Сто процентов.

Но я говорил о способе фикцации идей ) а не о их генереции.
Ага, главное голова, это не то что в армии «Лопата — друг солдата».
то же самое можно сказать о практически любо профессии
100%
Планшет :-)
Фотошоп :)
Это всего лишь инструмент )
Как и голова, руки и т.д. :)
Ну, голова первичнее фотошопа.
Фотошоп инструмент головы =)
однозначно. но для художника даже не голова, а виденье. то что другие не замечают между суетой, а внутренне чего то хочется. вот дизайнер и вытаскивает наружу, что хочется внутренне. одним словом угол зрения, подход и отсутствие звездной болезни — вот слагаемые успешной работы дизайнера.
а фотошоп или поинт — это дело десятое.
полагаю сайт должен быть «мягким» и не агрессивным. тогда пользователю хочется задержаться немного. а там уже начинается шнырье по страницам и находжение изюминок или мин, которые должны быть на каждой странице.
Все верно.

За исключением того, что дизайнер — ни в коем случае не художник.
дизайнеру нужна голова, чтобы не зазнаваться) как и всем, вобщем-то
И эстетичнее))
Поправлю, головой многие кирпичи бьют. Скорее разум.
Хотя про инструменты тоже не мешало бы, например в другой статье, рассказать людям. ;)
Инструментом должно чем-то пользоваться, чем вы будете пользовать мозг?)
Тут целая взаимосвязь, не раскрывать же образ до последней ступени взаимодействия с сигналами мозга.
Точно без физического вмешательства :)
Ложкой, ложкой его, после варки… :)
Молодчина.
Глубоко!
Не знаю на сколько глубоко.
Материал можно было бы серьезно расширить, что и планирую.

Но приятно услышать, что понравилось =)
Несмотря на конъюнктурно-унылое название статья оказалось на удивление толковой. Обычно такие названия дают своим блогопостам вчерашние нубы, а в нашем случае автор настоящий профи. Целая лекция, есть на что опереться при обучении новичков. Спасибо.
Вот это суперпупер круто! По-другому и не скажешь. Полезно будет многим абсолютно точно.
Для меня в закладки)
Все подробно описано. Автору спасибо!
Всё по теме и приятно читать! Спасибо. Особенно понравилось про рыбу, даже не замечал раньше. Всё врем этот Lorem Ispum…
В принципе ничего нового, но приятно когда всё одним «пучком» и доступно для каждого!
Респект!
Молоток Паш, хорошо изложил, для новичков — отличное руководство.
Берись за продолжение :)
Спасибо.

На самом деле это только завершенная часть.
Еще многое в черновом виде.

Что-то нужно написать, что-то в черновом, а что-то расширить.
НЛО прилетело и опубликовало эту надпись здесь
знаете дал бы миллион плюсов за этот пост, думаю так и без меня сделают. Лично я с огромной радостью передам этот материал своим дизайнерам ибо актуально до жути
Спасибо =)
Приятно, что кому-то нравится и полезно.
Эта заметка — отличный пример того как надо оформлять статьи на habrе
Спасибо.
На самом деле, Хабр, накладывает ограничения на внешний вид, и статья всё равно выглядить не так, как писалась.
Недопечатка в фамилии «Деисову» =)
А статья отличная!
Спасибо, поправил, а то Влад обидится )
Хорошая памятка. Большую часть делаешь по наитию, однако, когда это написано на бумаге/экране или попросту озвучено — легче воспринимается.
100%
Для того и сделано, чтобы мозг разгрузить.
На самом деле все верно, все четко. При этом нет «дешевого пафоса Ководства». Мне, как руководителю отдела разработки в веб студии, очень понравилось. Хочется заставить читать своих дизайнеров. И еще ъочется узнать, как Вы своих заставляете рисовать от «общего к частному» — поделитесь!

Спасибо Павел! + Вам и статье.

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

Если Вы считаете что большинство мелочей не упомянутых в этой статье является актуальным дополнением общей картины?!
Для Вас есть отличный повод продолжить данную статью. :)
Ох! Давно мечтаю найти в себе силы и время. От идей ПРЕТ! Можно книгу написать)
Я искренне понимаю Вас :)))
Это приятно! Черт побери!
Жаль только что не все из нас писатели или хоть мало-мальски адекватные блоггеры..)
Приятно слышать.
Особенно от коллеги.

А «Ководство», это всё-таки другая история, imho.
Согласен. Цели иные)
Расширять статью, конечно, есть куда. Что я и планирую сделать.

А как заставляю? Да в прямом смысле затавляю =) точнее ону уже сами привыкли.

Приходит заказ, совещаемся, анализируем, берем бумагу, портим её, пока не найдем решение, приступаем к рисованию.
Обычный процесс.
Бумагу мы тоже портим :) Вот только в основном Идеей, Концепцией, Сценарием. До сетки как-то не доходит…
Зачем заставлять? Просто объясните.
Потому, что студия, достигнув определенного уровня должна предоставлять гарантированный результат, в гарантированные сроки. Не больше, не меньше.

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

Это точно вопросы методологии, технологического процесса в студии.
В том числе и организация процесса.
Спасибо автору! Наверное, одна из лучших статей с начала года. Статья в закладки. Must read, must have.
Прекрасная статья. Спасибо. Узнал много нового (наверное потому, что не дизайнер) и интересного (потому, что интересно же!).
Хорошо подана мысль про «ортогональный дизайн» — когда добавление функциональности не должны нести за собой кардинальное изменение предыдущих схем.
Да, это распространеная проблема. Когда для добавления пункта меню или блока на сайте, приходится рисовать новый дизайн, или «прилепливать» находу.

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

Далеко не всегда стоит так строго относится к существующей сетке. Все-таки сетка помогает дизайнеру, а не контролирует его мозг :-).
Да, а автор-то молодец конечно, очень правильный документ. Я бы еще про порядок с документами и слоями добавил, а то грешит наш брат.
Гм…
Работа со слоями и организация файлов
как для передачи в работу, так и для отчета по работе проделанной за день,
в каждой компании своя.

Можно былобы рассмотреть. Есть смысл подумать.
Но панацеи не будет.
Главное чтобы без мешанины из «Слой 517» вместе с «Layer 69», да еще и без папок слоев, в файле 018.psd. Это реальный пример, воспроизведен по памяти.

Дело не в конкретной системе, а в ее наличии :-).
Ну дык это просто азы работы в фотошопе.

Кстати, их тоже мало кто применяет =)
Хотя фолдеры и названия слоёв рулят, факт.
Почитал и подумал: нужно бы распечатать и оставить на видном месте… Спасибо автору!
Я не дизайнер, но даже мне интересно. Спасибо.
Большое спасибо автору! Очень приятно читать такие статьи!
Для начинающих дизайнеров самое то.
Вы знаете, я бы не написал эту статью,
если бы мне за всю мою карьеру чаще всего встречались те дизайнеры, которым бы она не помешала.

При чем среди них большая часть была не начинающие.

Именно эта необходимость (повторять коллегам день за днем простые правила) и заставила меня эти правила записать.
Мне иногда и самому себе приходится эти правила напоминать) Правда многие из них уже используются на автомате.
не упомянули о горизонтальной сетке — высоте строки
Горизонтальная сетка — это вещь непростая.
Особенно в сайтах с маштабируемыми шрифтами.

Эту тему в 1-2 абзацах не изложишь.

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

Использование её в работах — уже немало.
это верно
О! Отлично!
/me добавил статью в закладки
На самом деле эта статья должна называться «Что должен знать человек, чтобы называть себя хоть как-то „веб-дизайнером“. Потому что если человек не знает этих основ то он хуй с горы, а не дизайнер.
Сама статья отличная.
Хорошая памятка, сам подумывал что-нибудь такое написать. Вот относительно «рыбы» у меня уже есть материал. Очевидно, скоро опубликую.
Спасибо.

А на счет рыбы очень интересно.
С удовольствием прочту.
Очень хорошая статья — всё чётко, по делу!

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

А на счет «есть смысл» и «принимать во внимание» тоже верно подмечено.
Это мы стремимся к созданию «максимально-правильных сайтов». И это 90% наших решений.
Но в тех случаях, где это целеобрано, можно делать фиксированно. Так делает весь Запад, поголовно.
И я тоже об этом подумывал ))
Я бы даже сказал что не только есть смысл, а нужно делать сайты «резиновыми» в большинстве случаев!
огромное спасибо!!!
Как раз сейчас нужна была статья по модульной сетке +1
Пожалуйста ))
Но я убежден, что вопросы модульной сетки я коснулся только поверхносто.
Именно на уровне «памятки».
Да, кстати, сразу очень захотелось услышать от вас о модульной сетке подробно. Может быть, развернёте тему в следующей статье?
Ну или хотя бы в конец этой несколько ссылок, что хорошего прочитать на тему.
Надо будет подумать.
(с) «А мне много и не надо» =+)
Читая такие статьи, становится обидно что не являешься дизайнером. Ничего в этом не понимаю, но моя точка зрения что статья отличная!:-) Пойду чего нибудь нарисую…
спасибо, многое известно, но все в одном месте мне и многим другим пригодится.
Спасибо, отличная статья. Дам стажерам почитать =)
Ее не только стажерам читать нужно. Засвою жизнь сделал много проектов, был и ведущим дизайнером, и обычным говнорисовальщиком. Статью — на стенку. Надо с нее хороший читшит сделать и в рамку поместить. Разве-что пару мелких пунктиков добавить.
Спасибо =)

А на счет пунктиков скажите, добавлю.
Я и так планировал её расширять.
Хорошо было бы почитать подробно о марджинах и падингах, будь они неладны, об оптимальном расположении полезного контента — в фокусе внимания и восприятия юзера, о контрастности цветовых схем текста, фона, элементов дизайна; о влиянии размера шрифта и его формы на уровень восприятия информации. Наверное, я много хочу?))
Согласен. Постоянно что-то важное забывается.
К примеру, некоторое время назад для себя вывел такое правило: от верха страницы до полезного контента как правило не должно быть больше 500px — в некоторых случаях неоправданная роскошь (особенно при разрешении 1024 х 768). И, блин, тут же наступил на эти грабли…
У меня тоже такое бывает. Особенно когда заказчик хочет вверху страницы слайд-шоу никому не нужных стыренных с гугла картинок — приходится локти кусать… К сожалению себе. А потом, подумав немного, приходишь к итогу. Чего хочет — того и получит. Намного проще сделать так как хотят, чем навязывать свое мнение. Скажи любому человеку, что он не шарит ничего в дизайне или даже в банальном подборе цветов — это сродни тому, что ты обозвал его болваном. А этого, наверное, никто не любит=)
Супер. Спасибо огромное!!!
Вот это материал, вот это объем работы проделал автор. Однозначно в избранное для повторных чтений!
Автору огромное спасибо, надеюсь на продолжение цикла. :)
Ааафигенно! ) Все знал, но в одном месте — сокровище )
Плюсик и луч света в карму
Спасибо )
От тебя это приятно слышать.
Спасибо.
Про модульные сетки бы подробную информацию найти. Может кто знает где поболее изучить эту тему?
Такая концентрация здравого смысла на одной странице вызывает сильное, но приятное удивление:)
Искрение спасибо Вам!

Приятно услышать, пользуйтесь на здоровье.
полезно, интересно и очень подробно ;)
Я, видимо, первый дочитал до самого конца. :)
Во-первых — спасибо, во-вторых — «конскрутивную» критику стоит исправить.
))) Спасибо
Отличная статья! Пиши еще! Давно не читал ничего такого внятного про веб-дизайн!
Приятно такое услышать от коллег.
Особенно, если твой материал находят полезным и внятным.
статья просто супер! огромное спасибо!
Отлично! Всем начинающим и не только дизайнерам в избранное.
А вам желаю успехов, портфолио нравитсо :-)
Ух ты, как все кратко, ясно и красиво изложено. Очень понравилось, причем во многом благодаря легкому и качественному изложению.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Ага.

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

Нормальный сайт только по-тихоньку формируется тут.
Не убирайте пожалуйста строчечку «Во время создания этого сайта ни один дизайнер не пострадал.»
Позитивно!!!
)))) вы путаете

Посмотрите на ссылку (web.***.make.com.ua), это не рабочий сайт, а набор сверстанных шаблонов.
В том виде, котором они были разработаны.
Для демонстрации дизайна и верстки.

А заказчик, к сожалению, свой сайт так и не запустил.
Уже полгода контент пишут.
статься отличная! но вот по ссылке на сайт make у меня открывается страничка, содержимое которой не влезает в экран моего ноута… FF 3.0.1

а как же пункт про «Общая композиция не должна нарушаться ни при каком разрешении монитора у посетителя.»,?
Спасибо за отзыв, а о нашей заглушке, согласен, она задумана так, что нарушает всяческие правила.
а каким образом можно понять, что так и задумано?
Например, прочитав P.S. к статье:
Приведенные требования не являются догмой. От любых правил иногда можно отступать. Только делать это нужно не по незнанию, а осознанно.
Т.к. делая так, я знал, какие правила нарушаю, но делал это намеренно )))
Спасибо, за материал. Отличный Учебник для новчика — добавил в закладки.
Рад, что понравилоь.

Но я не претендовал на учебник.
Скорее это действительно памятка, что нужно помнить, и нельзя забывать, проектируя дизайн.
Я надеюсь не обедил?
Понимаете бывает очень трудно начинающим доходчиво объяснить все и сразу…
может это мне кажется но если бы такой материал попадался начинающим дизайнерам с ними было бы проще работать :-) Теперь знаю куда отправлять если не будут понимать! :-)
Вот и славно, что пригодилась.
Какие обиды? Пусть статья послужит на пользу.
С такими статьями за Хабр можно быть спокойным!
+1 благодарность за четкую и ясную статью.
Добавлю еще один пункт: основная функциональность сайта должна быть доступна и при отключенном у посетителя JavaScript.

//Пришло в голову после посещения сайта студии
Если сайт — просто информация — тогда соглашусь с вами. Но если сайт предоставляет собой сервис, где без джаваскрипта — никак? Как в таких ситуациях? Делать обычную версию? Дорого получится.
Блин, весь контент сайта находится в той же странице. Он просто скрыт — можно было при отключенном JS его просто не скрывать.
Тут с вами полностью согласен. Эт уже излишество
p.s. А со включенным JS он почему-то медленно грузится.
Отличная статья!
По поводу же самого сайта автора: сайт абсолютно недоступен без JavaScript.
Отличная статья!
По поводу же самого сайта автора: сайт абсолютно недоступен без JavaScript.
Я думаю, что пользователей с отключенным джаваскриптом меньше, чем пользователей 5-го ИЕ. О пятом Ие вообще никто не вспоминает. Как думаете?
Думаю, что это совсем не так.
Из-за повальной вездесущей анимированной рекламы, некоторые люди ходят с отключенным JavaScript, включая его только для «проверенных» сайтов.
Опера умеет это делать «out of the box», у Firefox есть популярное расширение NoScript (не зря, наверное, популярное).
Если честно, то я никогда не отключаю js так как люблю его. Иногда эта любовь взаимная=))
Я полностью осознаю серьезность этого дела, это как секс без презерватива снезнакомой деыушкой, но все-же. Я не поверю вам, если скажете, что везде отключаете дж.с. на незнакомых сайтах.
Я отключаю JS для всех незнакомых сайтов, они грузятся намного быстрее и не пытаются взорвать мне мозг рекламой.
спасибо за статью.
Давно искал подобное, уже думал сам написать, просто надоело, когда дизайнер кидает тебе макет, который сверстать нормально очень трудно и геморно.
Отличная статья, прочитал на одном дыхании.
Большой респект за то что информация очень правильная и изложена на доступном и легкочитаемом языке :)
возможно это из за темы, или браузер специфик, но:
сайт вашего дизайн бюро не имеет горизонтального скорллбара и при 100% масштабе — больше половины содержимого просто отрезается.

Opera 9.61
прошу прощения :) не обратил внимание на то как работают кнопки навигации
Спасибо. Очень хорошо написано.
Превосходная статья.
Каждый день бы по такой статье
Спасибо.

Но на каждый день меня не хватит =)
Хотя эту можно былобы разделить на 3-4 отдельных.
супер!
я хоть и не дизайнер, прочитал все с удовольствием. спасибо.
Мега круто!
Очень классная и наглядная статья.
Можно проявить снобизм?
У вас на сайте (www.make.com.ua) в пункте «Нашли чем гордиться!» не нужно ли запятой перед «чем»?
Конечно можно. И конечно нужно! )
Благодая другим мы замечаем свои ошибки.

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

Здесь такой люд, что всегда пол ветки занимает обсуждение опечаток автора. Выпендрежная манера поумничать перешла все границы.
Отлично. И примеры красивые.
Спасибо.
А примеры, кстати все базированы на наших работах.
Опубликованных либо готовящихся к сдаче.
Спасибо. Отличная статья. И оформление на высоте.
Огромное вам спасибо за эту статью! Я не дизайнер, но подобного рода статьи расширяют кругозор. И лично я почерпнул отсюда немало нового — еще раз вам спасибо :)
Добавлю: очень многое из этого было известно заранее, но именно грамотная подача материала, этакий «all-in-one» — сыграла свою решающую роль :)
Рад, что статья пришлась полезной и понравилась.
Спасибо! Лаконично и просто написано, для кого-то может стать повседневным руководством
Пожалуйста.
Это здорово, что кто-то ей будет пользоваться.
спасибо… в избранное
Да, уж… Вот это работу Вы проделали для написания данной статьи. Только за один этот факт — Вам «респект и уважуха». А, если учесть, что статья супер-мега полезная, респект Вам вдвойне!
Рад, что понравилось и явилась полезной.
Значит всё не зря ))
Конечно, нельзя. Вроде, на первый взгляд, никаких «смелых идей» и инновационных решений, только прописные истины. Но именно они, на мой взгляд, и влияют на всё.
Так в том-то и дело, что статья действительно является «памяткой», обобщающей, что не стоит забывать при разработке. Не новый метод, а просто «сверочный лист».
У меня после таких статей начинаются депрессии, кажется что если был нулем, то пошел в минус.
Гм… почему? Зачем?
Ну как сказать почему и зачем. Если ходить в кожанке и спортивных штанах, то прочитав данным материал можно смело сказать что все идиоты, а я могу делать лучше. Но когда же сам стараешься делать что-то, понимаешь как все не просто. Материал очень хорош, приятен и полезен конечно. Но посмотрев ваши работы я начинаю думать что не могу делать вообще ничего. Потому после таких статей, посещений сайтов а-ля cssmania я начинаю депрессировать, так как я понимаю куда нужно рости, и как я мал.
Упорство, терпение и все получиться. Дипрессии начнутся когда поймете что почти никому этот хороший дизайн и не нужен, посмотри на запад. там никто не замарачивается, фетиш в дизайне присущ восновном exСНГ. Так что настраивайтесь работать для себя в первую очередь.
Вы думаете у меня не бывает таких минут?
Я тоже знаю достаточно студий и дизайнеров, после просмотра чьих работ я могу впасть в дипрессию.

Всё завист от того, что и кого брать за планку.

Для меня неудоворенность — признак того, что мне есть куда расти и развиваться.
И того, что я способен развиваться.
Недавно Тёме задали вопрос:
Всё время кажется, что я буду хуже и не смогу добиться профессиональных успехов из за недостатка знаний. И такая неуверенность во всём… как поднять самооценку и поверить, что всё получиться?
Его ответ мне очень понравился:
Я вас уверяю — любой самый крутой дизайнер на свете, когда заходит в дизайнерский отдел в книжном магазине, чувствует себя никчемным бездарем. Все уже сделано, все такое красивое, всего так много.
Но стоит выйти из книжного магазина — и ты понимаешь, что нужен.
Вот-вот! В самую точку.
Паша, дай pdf! :) Я тебя и тут достану :)
Дай мне пару дней, пришлю.
Я не забыл )))
Спасибо! Отличная работа!
Благодарю за статью, как раз хотел начать делать сайт для своего портфолио.
Очень хорошо и по делу :) В той части, где речь идет о дизайне, — почти нет возражений (по поводу шрифтов можно поспорить; думаю, что базовый шрифт на сайте все-таки должен быть системным). А вот что касается контента… его оформление — далеко не самое главное. Если у сайта грамотная информационная архитектура, то даже заурядное оформление ее не испортит. Как и не спасет отличное оформление сайт, где к информации относятся просто как к большому массиву данных, структурированных лишь по визуальным признакам.
Спасибо.

1

Для меня «оформление содержания», «структурирование содержания» и «информационная архитектура» — вещи неразрывно связанные меду собой.

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

2

На счет шрифтов, я не касался названий гарнитур. Я только говорил, что шрифт должен быть 1-2, максимум 3.
Для основного набора и элементов акциденции (заголовков, выделений, цитат). И в примерах показани именно стандартные шрифты. Я даже удивился, когда вы об этом упомянули )
Да, со шрифтами в примерах все нормально. Просто меня сбило с толку это «трех» и тот факт, что шрифтовая схема вообще обсуждается :) По поводу информационной архитектуры — я пока не пойму, разная ли у нас с Вами терминология или все-таки понимание отличается. В ближайшее время я опубликую свою статью об ИА с конференции RIW 2008 — возможно, у Вас появится желание продолжить обсуждение этой темы :)
Там описано, почему бывает трех:

Первые два — это заголовки, выделения и основной набор текста

Третий (а иногда и четвертый, пятый) могут вводится для навигации, для блоков <code> (моноширинный), для очень мелкого текста (подбирается другой шрифт, вместо основного, в целях увеличить читабельность).
Погодите-ка, для Вас «разные шрифты» — это одна и та же гарнитура, но при разных кегле, цвете, начертании? Но ведь это просто разные стили! Я же говорю именно о шрифтах (читайте — гарнитурах). Их, Вы считаете, тоже может быть три и более?

И еще вопрос к здравому смыслу: зачем делать «очень мелкий» (и уже по определению трудно читаемый) текст? Для красоты и стройности композиции? Кстати, подозреваю, что 90% пользователей давно научились пользоваться сочетанием клавиш Ctrl+ в браузере :)
Нет.
Вы невнимательно читаете.

1

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

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

2

Вопрос не о том, зачем делать «очень мелкий», а о том, что иногда нужен мелкий шрифт.

Например,
весь сайт построен на Arial (который хорошо смотрится в обычные 12 пунктов и выше),
но в подвале идут более мелкие копирайты (например 10 пунктов), и Arial без сглаживания просто превратится в кашу, но зато родственная Verdana в этом размере смотрится превосходно, а главное не выбивается из стиля.
Или пример не с подвалом, а с подписями к картинкам.

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

Не заметил, что бы в статье говорилось, что не нужно выделять посещенные ссылки из меню сайта, и когда они являются «системными» (например, «вход/выход»).
Гм… Вы правы.

Я рассматирвал разные случаи. И в типичном наборе посещенные сылки не числились.
Т.е. поступил по принципу: сообщил как нужно, но не сообщил, как нельзя.

В любом случае об этом сказано, только в другой форме.
Учитывая, что данный текст является памяткой дизайнеру, очень смущает в топовой картинке черная надпись «дизайнеру» на темно-синем фоне. Дизайнер должен думать(!), как много раз появлялось тут выше… Не должно быть в памятке дизайнеру таких непрофессиональных огрех.
А в чем именно-то огрех? Не совсем пойму.
То, что на картинке намеренно-лучше читаются ключевые «Памятка дизайнеру сайтов»?
Да терпимое, imho, нарушение. Ведь картинка — всего-лишь дубль заголовка, для привлечения внимания.
И контраст в любом случае достаточный, чтобы читаться.
Понажимайте на ссылки «Кто такие?», «Что делаем?», «Как связаться».
Как-то это сложно — нет привычного горизонтального скроллинга, и два раза вопрос «что делаем». Есть какое-нибудь правило дизайна о том, что надо делать привычно?
Это не ошибка сайта, это ошибка «юзабилити» :)
А что это за новостной сайт в примере, хотелось бы на него посмотреть «вживую».
Там в примерах много сайтов, которые готовятся к публикации.
Новостной сайт наполняется для запуска, например.
Спасибо, статья замечательная, разместили у себя для внутреннего пользования. Будем учить новых сотрудников.

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

p.s. Конечно все ссылки проставили.
Рад, что понравилось.
Конечно размещайте.
Не забудьте про верстку своего сайта :)

Не забывайте, что PASSED способствует бизнесу и напоминает самому себе как правильно ;)
Да всегда пожалуйста! =)
Отличная статья, Павел!
Жаль. 90% комментов — простое спасибо. Обсуждения технологического порядка почти нет.
Хотя статья в целом очень неплохая. Спасибо :)))
Дык статья никаким образом и не касалась «технологического порядка».
Список правил, которые не нужно забывать в работе. Не более.

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

Наверное нет.
Вещь, автору спасибо… буду мучать наших дизайнеров :)
А то любимое дело 3-4 сетки на сайта, плюс побеги а как этот элемент при наведении себя ведет.

Материал заслуживает, того, что давали его на «курсах».
Дык материал для курса и готовился.
Об этом написано в самом начале статьи )))
все очень правильно собрано и проиллюстрировано
добавлю в букмарки для нашей молодежи
Рад, что понравилось и пригодилось )
Не подскажете какая модульная сетка используется на скринах? Заранее спасибо ;)
В каждом из примеров — различная сетка.
В кадом из случаев, подбиралась и рисовалась индивидуально под проект, в зависимости от задач.
Невероятно. Шёл 2020 год, а статья всё ещё актуальна. А весь секрет в том, что советы дельные на все времена
Сам в шоке — 11 лет прошло.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации