• Какие существуют правила хорошего дизайна?

    @xlusv
    Я бы рекомендовал попробовать сверстать собственный макет самостоятельно, к примеру, на том же bootstrap. На своем опыте оцените, есть ли недостатки.

    Из правил:
    1. Дизайн не должен мешать пользователю. Чем меньше шума, тем лучше. В идеале - ничего лишнего на экране. И как можно меньше анимации.
    2. Функциональность превыше эффектов - сначала содержимое, только потом украшения
    3. Мыслить от абстрактного к конкретному, мыслить модульно - чистый холст делим на части (в пропорциях), потом добавляем компоненты в виде сплошных фигур, потом детализируем компоненты. Так мыслит и верстальщик, и программист. Хранить компоненты в отдельных файлах.
    4. Красивый дизайн - логичный дизайн. Все должно быть упорядоченно, иметь обоснованные размеры, отступы, цвета и эффекты
    5. Постоянство - одна цветовая схема, пропорции, типографика, элементы
    6. Стандарты и традиции. Поведение предсказуемо. Стрелка вниз на панели означает, что панель развернется вниз, а не вверх. Красный - опасное действие, зеленый - безопасное. Используйте стандартные иконки, вместо никому не знакомых.
    7. Смотрите на дизайн чужими глазами - наложите черно-белый фильтр или размытие и убедитесь, что содержимое не растворилось, акценты на месте. Продумайте, что случится с колонкой или меню, если текста будет слишком много или мало.
    8. Растровая графика для фотографий и многоцветных изображений. Все что может быть описано в векторе - делается в векторе.
    9. На каждое правило бывают исключения


    Книги и материлаы
    1. Design for Hackers: Reverse Engineering Beauty - технический взгляд на элементы дизайна
    2. Прочие книги по UX и web-design в списках бестселлеров amazon / ozon
    3. behance и dribbble - для анализа лучших практик
    4. Руководства по стилям: Google Material Design, Modern UI, Apple Human Interface Guidelines, ibm design. Тоже для анализа практик и правил для конкретной платформы.
    Ответ написан
    6 комментариев
  • Какие существуют правила хорошего дизайна?

    kawabanga
    @kawabanga
    на хабре помню всплывала очень интересная статья по этому вопросу, там советы дизайнеру именно о том, как готовить дизайн для верстальщика. Там в статье был особый упор на сетку и на то, чтобы верстальщик сразу видел в комментариях код, с помощью которого можно все сделать на css.
    UPD. Во, нашел, статья на подобии этой была - habrahabr.ru/post/175083

    20 «НЕ» для веб-дизайнеров
    habrahabr.ru/post/52019

    К слову, Sketсh 3 инструмент позволяет создавать дизайны, которые более приятны верстальщикам.

    а пока, что по поиску гугла нашел
    - habrahabr.ru/sandbox/41405
    - habrahabr.ru/post/173271
    - habrahabr.ru/post/159141
    - habrahabr.ru/post/197588
    - habrahabr.ru/post/145295
    Ответ написан
    4 комментария
  • Как правильно изучать верстку c переходом на front-end?

    psdhtmlcss
    @psdhtmlcss
    • HTML, CSS (для начинающих здесь курсы)
    • JavaScript, jQuery (можно эти сайты wisdomweb, курсы на youtube)
    • Отличный справочник по HTML и CSS на сайте htmlbook.ru
    • Также рекомендую параллельно учиться печатать вслепую, отличный тренажер "Соло на клавиатуре" за 2 месяца можно научится на русской и английской раскладке уверенно печатать вслепую. Изучать технический английский.
    • В дальнейшем изучить less,sass, bootstrap, поработать с git Основы php, mysql, поработать с популярными cms: Drupal, Joomla, WordPress и т.д.
    • Также немаловажен текстовый редактор, используйте тот, в котором быстро и удобно работать. Можете почитать про Sublime Text, в том числе и про полезные плагины.
    Ответ написан
    Комментировать
  • Как правильно изучать верстку c переходом на front-end?

    almac
    @almac
    Есть 2 варианта развития фронт-ендера:
    1. как верстальщик - тут на 1ом плане html+css и немного jquery
    2. как программист - более оплачиваемая работа; на 1ом месте - javascript и различные js-фреймворки, версткой возможно и не придется заниматься на данной позиции

    Что учить:
    1. верстальщику - htmlbook.ru и MCSS\БЭМ
    2. front-end программисту - learn.javascript.ru
    Ответ написан
    Комментировать
  • Как правильно изучать верстку c переходом на front-end?

    Aspirin77
    @Aspirin77
    HTML5&CSS3, в любом случае самое первое, что стоит изучить. Html Book - неплохой вариант, для новичка, но всё же в идеале оф. сайт консорциума с документацией www.w3.org
    Думаю, для хорошего верстальщика и front-end developer'a важно понимать "кухню".

    Есть не плохая книга, мне лично очень нравится, Джон Дакетт "HTML и CSS". Книга не из дешевых, но лично мне очень помогла в изучение основ.

    Далее, опять таки на мой взгляд, хотя бы на уровне синтаксиса - изучить JavaScript. Пока не говорю, про библиотеку JQuery. Но она по сути, важна. Книга - Бер Биро, Иегуда Кац "Подробное руководство по продвинутому JavaScript".

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

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

    Свой код после верстки, можно проверить на валидаторе оф. сайта консорциума. Просто нужно вставить ссылку туда на свой сайт и он анализирует.

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

    В целом терпение и желание именно заниматься версткой и front-end. Удачи )
    Ответ написан
    Комментировать
  • Как быстро верстать (нужен совет как быть дальше)?

    msulim
    @msulim
    Front-end / UI Designer
    На самом деле, я сейчас тоже задаюсь этим вопросом.

    Поделюсь своими наработками:
    1) Любимый редактор Sublime Text
    - plugins : emmet, JQuery, Sass, less, CSS, автопрефилы. Есть ещё несколько полезных которые подставляют пути к файлам подсвечивают цвета.
    В нете полно статей. Ну сам редактор это предпочтение.

    2) gulp на самом деле использую как нубло, вот буду делать boilerplate для старта. На sass. Несколько хаков в HTML типа мета тегов обёртки шапки, контента и футер. JQuery с фолбеком если вдруг с CDN не пройдет. Даже в дефолтном джиес написал $(document).ready();

    3) Пока не добрался до автогенерации sprite картинок но думаю это отлично сэкономит время в тех местах где нету шрифта.

    4) Собираюсь уйти от препроцессоров на пост процессор, а также использование Angular/Ember.js/React для решений крупнее Landing Page :)

    5) Cейчас думаю поработать также над архитектурой (как бы пафосно не звучало для вёрстки) розбивка на блоки продумать всякие проблемы и работу функционала.

    6) Подобрать готовые решения, имею ввиду плагины, слайдер/карусель/работа с таблицами.
    К примеру owl'Carousel/ data tables / animate.CSS / wowjs ну и тому подобные)))

    7) Самый маленький пункт - сокрость/качество печати как такова :)

    8) Ну и опыт :)

    Как-то так, если есть советы, может упустил.

    По поводу скорости вёрстки лендинга:
    Вёрстка Landing Page в четыре блока то там нечего верстать, просто сетку надо. И исходники нормальный, все шрифты и элементы (лого, гайдлайн от дизайнера) грид например Susy для Sass.

    А вот если присутсвуют анимации, фулскрин видео, дизайн под девайсы продуман дизайнером, стейты на поля форм, а плюс ещё и одеть на CMS то пусть не ВЫЕ своим "Г" :)

    Все придёт с опытом :)
    Ответ написан
    Комментировать
  • Какие шрифты чаще всего используете в дизайне сайта?

    p1xel
    @p1xel
    UX-спасатель
    Предлагаю посмотреть статистику со всего мира о том, кто и какие шрифты использует.

    www.fontreach.com
    FontReach scans the top million sites to show font usage across the web.
    Ответ написан
    3 комментария
  • Какие инструменты сейчас в арсенале у верстальщика/front-end разработчика?

    vahe_2000
    @vahe_2000
    Chrome dev tools
    Лучший инструмент, который мы имеем в наших руках сегодня. С момента своего рождения, хром вложил много в его инструментов разработчика и до сих пор их улучшения непрерывно. Каждый выпуск (каждые 6 недель или так) идет со своими собственными торговыми новых функций DEV инструмента.

    LiveReload
    Сколько раз в среднем вы нажмете клавишу обновления на клавиатуре каждый день? Много, верно? LiveReload простой веб-протокол, который вызывает события для клиентов, когда файлы были изменены.

    Тестирование фронтэнд JavaScript код с помощью Mocha / Chai / Sinon

    Karma тест бегун Javascript написаны парней за AngularJS.

    Eще много есть но по моему это самые нужные список front-end
    Ответ написан
    2 комментария
  • Где вы берете полезные наработки для сайтов?

    isay777
    @isay777
    Джумлавод, делаю сайты на jbzoo
    Ответ написан
    Комментировать
  • Опишите тезисно, как сегодня должен быть сверстан хороший сайт?

    In4in
    @In4in
    °•× JavaScript Developer ^_^ ו°
    • БЭМ. Независимые блоки.
    • Препроцессоры
    • Постпроцессоры
    • Семантическая верстка
    • Целиком и полностью адаптивная верстка
    • Грамотное использование тегов HTML5
    • Оптимизация скорости загрузки страниц
    • Меньше бессмысленных JS-плагинов и библиотек
    • Относительная кроссбраузерность
    • Деление сайта на 2 версии - сжатую (без мусора и воды, ту, что реально сервер будет отдавать) и обычную (для человеко-понятного редактирования).
    • И еще: Тык
    Ответ написан
    9 комментариев
  • Как называть точную цену заказчику при большом объёме работ?

    SV0L0Ch
    @SV0L0Ch
    Разработчик специализируюсь на Bitrix и Wordpress
    Я обычно указываю вилку, при чем чем мутнее ТЗ тем больше вилка. Например, на абстрактные запросы типа "хочу лендинг" я говорю от 5000 до 15000, точная оценка будет после ТЗ и дизайна который надо верстать.

    Заказчику сразу поясняю, что разброс из-за потенциальных не предусмотренных сложностей из-за не четкого ТЗ.
    Ну и от 20 до 50% сверху на внезапные "а теперь передвинем вот это и поменяем вот тут".

    По опыту лучше сказать заказчику 5000 и сделать за 4000, чем сказать 3000, а сделать за 4000. В первом случае заказчик платит меньше чем планировал и доволен. Во втором он платит больше чем планировал и не доволен.
    Ответ написан
    Комментировать
  • Сколько времени требуется для разработки дизайна и верстки?

    Просто поставьте себе тестовую задачу по дизайну и вёрстке для вымышленного заказчика. Когда будете выполнять - засеките время. Результат занесите в портфолио. Дизайнеру портфолио полюбому не помешает, так что можно сделать две-три слегка разных тестовых задачи для точности ))
    Ответ написан
    Комментировать
  • Стоит ли овладеть веб-дизайном из-за жалости к проектам, неосведомлённости заказчиков и наглых дизайнеров?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Если у вас до этого не было каких-то успехов в дизайне, то это весьма мутная перспектива.
    Уметь оценивать дизайн !== быть смышленым в дизайне. Я вот могу с легкостью сказать что выглядит плохо, а что нет, так же оценить анимацию и прочие вещи. Но, это совершенно не значит, что я в состоянии с нуля что-то наваять реально крутое или дать очень качественную/детализированную оценку чужому дизайну.
    Так что проще фильтровать заказы с убогим дизайном (как минимум руководствуясь самоуважением и чувством прекрасного). Самый простой способ - представить что этот сайт будет у вас помещен в первой пятерке работ в портфолио. Если от этой мысли вам становится неприятно/стыдно - вежливо объясняете клиенту, из-за чего у вас когнитивный диссонанс, и прощаетесь с ним, как минимум до появления нового дизайна.
    А пытаться "помогать" это путь вникуда. Ибо в итоге окажется что заказчикам "и так норм", а вы лишь только свои нервы и время потеряете.
    Ответ написан
    Комментировать
  • Стоит ли овладеть веб-дизайном из-за жалости к проектам, неосведомлённости заказчиков и наглых дизайнеров?

    overmind0
    @overmind0
    Основатель Огнива - ognivo.me
    Стоит попробовать.
    Если Вы можете и фронт и сервер, то Вы можете сразу делать HTML / CSS макет без скриптов и логики, который можно легко и дёшево переделать. Утверждать его, а уже потом спокойно туда подводить логику и JS.

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

    Обновление:
    Я бы попробовал "рисовать" сразу в вёрстке (но я никогда не работал со Sketch). При правильных инструментах и сноровке это может быть даже быстрее, чем рисование в редакторе. Что я бы посоветовал (хотя, наверняка, вы всё это знаете):
    - Берите второй монитор. В одном будет редактор, во втором будет в реальном времени обновляться результат.
    - Обязательно ставьте LiveReload
    - Препроцессор и постпроцессор цсс. У меня на проекте это stylus + autoprefixer.
    - Хороший движок для рендеринга html. Я их знаю очень мало, пробовал только Jade, PHP, HandleBars. Сейчас у меня бэкенд на Clojure, я использую библиотеку Hiccup для рендера HTML, и там рендеринг сделан просто на функциях. То есть Вы собираете структуру данных определённого вида, пользуясь всем арсеналом языка (богатейшим), а библиотека выполняет только конечное преобразование. Это просто изумительно! И соответственно можно сразу делать какие угодно компоненты, передавать им набивочные данные и т.д. Из того что я знаю, только Jade ещё как-то может тягаться с этим, но это всё равно далеко.

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

    Из недостатков такого способа можно отметить отсутствие визуальной сетки. Есть расширения, но наверно не такие гибкие.
    Ответ написан
    2 комментария
  • Как называть точную цену заказчику при большом объёме работ?

    @Elizavetta
    Matroid: gamedev/js-разработка
    Заказчик в США, почасовая оценка ему будет понятна. На маленький проект вилка в часах от и до.
    Если заказчику нужна жесткая цена, абсолютно без вилки, и в то же время он не готов оплачивать по часам, повод отказаться. Это сигнал того, что будет море неоплачиваемых доработок, которые типа относятся к "качеству" вашей работы.
    Ответ написан
    Комментировать
  • Как людям удается столько зарабатывать на фрилансе?

    Deerenaros
    @Deerenaros
    Программист, математик, задрот и даже чуть инженер
    Внесу свою небольшую лепту.

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

    Во-вторых, на фриланс биржах жуткий демпинг. Так что первые два месяца скорее всего придётся поработать на зп дворника. Вооще, сейчас фриланс сообщество относительно стабильно именно из-за высокого входного порога. Первые серьёзные деньги раньше второго месяца увидеть очень сложно. Здесь придётся работать на престиж, то есть зарабатывать контакты. Очень часто бывает, что довольный клиент вернётся, а бывает даже не уходит - оставляет проект на сопровождение. Причём делать скорее всего ничего не придётся, а лишняя копейка никогда не помешает. Набрав 10-15 проектов на сопровождение можно вообще не работать и получать пару зарплат дворника.

    В-третьих, время, требуемое на проект, что вы привели, это не средней руки вэб-мастера. Это начинающего вэб-мастера. К тому же вэб-мастера вымирают как вид. Идеально, когда со временем вы специализируетесь на чём-нибудь узком - разработка дизайна, вёрстка с дизайна или программирование бэк-энда, найдя других надёжных дизайнеров или даже скооперировавшись в вэб-студию. Многие "фрилансеры" есть никто иные, как клиент-менеджеры вэб-студий. То есть менеджер формирует ТЗ - пара часов (или дней) общения в скайпе, передаёт дизайнеру, который формирует дизайн - ещё пара часов (или дней), а верстальщик с программистом верстают и программируют - последние пара часов (или дней) =) По моему очевидно, что специализируясь на узком профиле можно значительно ускорить свою работу: знакомство с инструментами, доскональное знание области, проще следить за трендами... Когда знаешь, что делаешь, количество работы можно свести к минимому, к тому же постоянное использование уже готовых наработок...

    Впрочем, постоянный поток заказов, сформированный круг знакомых как заказчиков, так и фрилансеров, узкая специализация... Это всё хорошо и классно. Но часто не хватает одного - дисциплины. Обустроить свой рабочий день таким образом, чтобы минимально отвлекасться и действительно выполнять свою работу быстро, действительно нагружать себя по максимому. Такое даётся далеко не каждому. Но таким ни демпинг не почём, ни кризис. Заказы будут всегда, они сами будут приходить, тогда как высокая дисциплина позволит выполнять их быстро.
    Ответ написан
    6 комментариев
  • Как называть точную цену заказчику при большом объёме работ?

    Если это типовой для вас проект, значит вы примерно знаете свою стоимость. Очень помогает опыт прошлых проектов, когда вы записываете сколько времени у вас ушло на любую задачу. Например, вы сделали 5 проектов по которым у вас собралась табличка с рабочими часами. Главная страница 55 часов, форма обратной связи 72 часа, страница контактов 19 часов, каталог 35 часов (числа условные, не кидайтесь камнями :) ). С такой табличкой очень легко называть более точные сроки на следующие проекты.

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

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