Блог Макеевой

за жизнь, фриланс и веб дизайн
makeevafl@gmail.com
telegram: @makeevafl

Не могу соединиться с базой данных

Топ 7 сайтов, которые используют веб дизайнеры в работе

https://colorhunt.co/
Сайт с готовыми палитрами. Можно использовать везде, как и в вебе, так и в графическом дизайне.
Частота использования: 4 из 5

https://uigradients.com/
Шикарные градиенты. Думаю, в этом сезоне они так же останутся в топе по популярности.
Частота использования: 3 из 5

www.reliablepsd.com/ultimate-google-font-pairings/
Большая коллекция шрифтовых пар. Обычно новички могут часами выбирать что с чем лучше сочетается, хотя это не самое главное. Все шрифты бесплатные из базы Google fonts.
Частота использования: 2 из 5

https://undraw.co/illustrations
Модные иллюстрации с бесплатной лицензией. Используй где угодно и как угодно.
Частота использования: 2 из 5

https://www.flaticon.com/
Топовый сайт по бесплатным иконкам. Все иконки беру от туда.
Частота использования: 5 из 5

https://www.freepik.com/
Огромная база с бесплатными фото и векторами. За 7 евро в месяц можно получить полный доступ. Но новичку гарантировано хватит и фри версии.
Частота использования: 5 из 5

https://uifaces.co/
Фоточки людей, которые можно использовать для заглушен на сайтах в ваших макетах. Есть фильтры по возрасту, полу, цвету волос и эмоциям.
Частота использования: 5 из 5

40000 рублей победителю или как тебя ещё заставить работать?

В инстаграме я анонсировала конкурс на разработку главной страницы для клиники по пластической хирургии.

Вводные данные

Техническое задание лежит на гугл диске: https://docs.google.com/document/d/1ezeCLfQ49ZciF68Oir8aiqQso_PwtmXibJpfHMAb7Fw/edit?usp=sharing
Дедлайн: 27 марта
Куда присылать и задавать вопросы: novikov@senseway.ru
Приз: 40к за главную и возможность дальнейшей разработки всего сайта

Не благодарите!

Книга «Руководство по Figma»

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

Ее автор Саша Окунев, старший дизайнер в Газпромбанке, собрал в одном месте практически все аспекты, которые нужны в работе. Он подробно рассмотрел 23 темы, среди которых: обзор интерфейса, шейпы, перо и векторные сети, градиенты всех типов с примерами, кадрирование и цветокоррекция, булевы группы, адаптивность, общие стили, компоненты, оверрайды и много чего ещё.

Мастхев для новичков.

Книга бесплатная, постоянно обновляется и живет за счет доната, поэтому, если она вам поможет, то я настоятельно рекомендую отблагодарить Сашу через PayPal :)

Приложение: проект в Фигме
Внешняя ссылка: slashdesigner.ru/books/Figma_Guide_v.1_beta.pdf
Скачать с гугл диска: https://drive.google.com/open?id=1StsPiH3K_umcTCPUvYXr47qwzK6xglCL

Лонгрид. Типографика в веб дизайне

Время чтения 4 минуты

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

Типографика — это сочетание текста между собой. Заголовок и подзаголовок на сайте? Это типографика. ФИО и должность на визитке? Это типографика.

Вы занимаетесь не перемещением текста туда-сюда, а типографикой! При правильной расстановке отступов и интервалов текст может ЗАИГРАТЬ, стать более заметным и читаемым.

типографика раз
типографика два

Гарнитура — это несколько шрифт в единой стилистике начертания.
Видели у себя в шрифтах light, regular, medium, bold, heavy? Вот все это в совокупности называется гарнитурой.

Если сложно запомнить, то привожу ассоциацию с семьей: Futura light — это пиздюк, Futura regular — старший брат, Futura italic — дочь, Futura bold — мама и т. д. Все вместе — семейство шрифтов или гарнитура.

Шрифт — это отдельный член семьи. Futura BOLD — это шрифт. Futura ITALIC тоже шрифт.

Гарнитура бывает двух видов:

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

Антиква

Гротеск — шрифт без засечек.
Строго, четко и по делу. Буквы без украшательств. Гротеск звучит грозно и нацелено на результат.

Гротеск

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

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

Кегль — высота букв, включающая в себя верхние и нижние выносные элементы.

Кегль

Интерлиньяж — межстрочный интервал.
Расстояние между базовыми линиями соседних строк. Чем длиннее строка, тем больше интерлиньяж.

Как вычислить правильный интервал? Размер кегля*1.5. Этого будет достаточно на первое время.

Интерлиньяж или межстрочный интервал

Кернинг — расстояние между буквами.
Не знаешь до чего доебаться? Напиши: «Кернинг сосет». Чтобы кернинг не сосал можешь потренироваться в игрушке https://type.method.ac/#

Ответы на популярные вопросы

Сколько шрифтов использовать?

Чем меньше, тем лучше. Используйте не больше 3-х начертаний, вероятность проебаться сокращается в разы. Стандартный набор light, regular, bold.

Какой размер выбрать?

Основной текст ставьте в пределах 14-18px. При этом если вы выбрали 18 px для основного текста, то он остается таким на каждой странице! Сразу заносите это в стайлгайд, чтобы не забыть.

Никаких дробных чисел. Либо 17px, либо 18px, а не 17.3px.

Как вычислить правильный интервал?

Размер кегля*1.5. Допустим у вас основной текст 18px, то норм интервал будет 18*1,5=27. Этого будет достаточно на первое время. ОПЯТЬ ЖЕ это рекомендательный совет, все зависит от самого шрифта и его окружения.

Где искать шрифты?

https://fonts.google.com/

Какие книги почитать?

«Живая типографика» Александра Королькова
«Новая типографика» Ян Чихольд
«Основы стиля в типографике. 2-е издание» Роберт Брингхерст

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

2019  

Лонгрид. Процесс разработки сайта

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

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

Технического задания не было. Если не считать «хочу красиво!». Было 2 условия: сохранить цвет компании и логотип, возможны минимальные изменения под сайт.

Задаем вопросы:

  1. Что не нравится в сайте?
  2. Зачем нужен редизайн?
  3. Скидываю примеры сайтов с разной стилистикой, чтобы понять, что ближе к клиенту.
  4. Определились со стилистикой material design.
  5. Попутно изучаю старый сайт, вычленяю тезисы и инфу о компании.
  6. Объясняю, что тексты хуйня и надо переписать. Привожу аргументы в пользу нормальных, полезных текстов. Клиент не охотно соглашается, рассказываю про мой подход с помойками. История про помойки выстреливает, до заказчика наконец-то дошло (либо он притворился, чтобы я поскорее отъебалась), что я хочу как лучше, а не для галочки.
  7. Прорабатываю структуру главной. По классике добавим офер в первый блок, расскажем, чем компания занимается, отзывы впихнем, клиентов покажем и контакты добавим. Отзывы. У меня бомбит от отзывов на сайтах, они не вызывают доверия и отторгают нормальных клиентов. Пользователь не дурак и понимает, что вся эта слащавая писанина выдумки больного копирайтера. Люди покупают не потому, что «текст», а потому что видят пользу в продукте. Хороший продукт работает лучше, чем хороший продающий текст. В итоге отзывы убрали:)

Старая версия сайта:

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

Разбираемся с текстом. Я считаю, что дизайн делается на основе текста. Хороший дизайн лишь помогает донести пользователю информацию. Поэтому никаких «Lorem ipsum dolor sit amet, consectetur...». Переписывайте текст сами. Дизайн без хорошего текста не дизайн!

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

>Компания промэлектро выполняет любые электромонтажные работ
Любые это какие? Нихуя не понятно, а вдруг мне надо электрику в ракете провести, а они таким не занимаются. Значит пиздеж, врать не нужно, выкатывайте пользу вперед.

Читаем дальше
>Специалисты нашей команды имеют профильное образование, что гарантирует вам быстрое и качественное выполнение всех работ...
На самом деле это хуевые гарантии. Во-первых все ошибаются, во вторых это гарантирует только то, что «специалист» отсидел 4 года в пту на электрика.

>Мы разработаем проект для любого промышленного или коммунального предприятия , и быстро внедрим его в жизнь.
Ого, вот уже проскальзывает польза. Становится ясно с кем компания работает. Оставляем на заметку.

Дальше идут 3 адекватных блока с полезной инфой. Закидываем в миксер, получаем: «Проектируем, прокладываем, налаживаем, поставляем электричество в любое помещение». Почему я выше выебывалась на слово «любое», а сейчас сама запихнула его в утп? Потому что дальше я доказываю, что компания проводит электричество в ЛЮБОЕ помещение.

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

Самое сложно — переписывать тексты на тему в которой ты не разбираешься. Мне повезло, исходные блоки были ничего, убрала воду, сделала простую структуру. Решила добавить ЖИЗНИ с помощью иллюстраций. Все иллюстрации беру с Freepik. Купила за 7 евро PRO аккаунт, радуюсь жизни.

Дальше идут простые блоки с клиентами, нахожу логотипы в формате svg. Почему свг? Свг векторный формат => изображение ресайзится без потери качества. Добавляю «френдли» в контакты, зазываю в гости, это показывает, что компания открыта к сотрудничеству и дружелюбна!

Отправляю заказчику для получения фидбека. Получаю ответ «Все нравится, кроме блока про услуги, ссылки это 2003, хочу что-то другое». Мне ссылочки нравятся, но спорить не стала, есть много вариантов, как обыграть эту ситуацию иначе.
Открываю сайт с кучей классных иконок. Главное правило выбора иконок — иконки должны быть из одного набора. Если на странице используются разношерстные иконки в разной стилистике, то получается ебучая окрошка (вы же не любите окрошку?). Нам окрошка не нужна, поэтому открываем один набор и из него тащим иконки.

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

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

До и после. Стало лучше? Чтобы вы исправили? Знаете, как лучше обыграть тематику? Оставляйте комментики здесь или в инсте, можно еще в директ написать :)

Всех чмок в пупок, лайк в инстаграме поставить не забудьте!

Договор на разработку сайта

Зачем нужен договор?

  1. Защитить деньги
    Если вам не заплатят, то суд выбьет последние деньги из клиента, еще и юриста оплатят.
  2. Защитить время
    Если заказчик пытается вас задинамить, тянет время, то вправе закончить работу в срок или пойти в суд. Как итог он оплатит ваше потерянное время.
  3. Защитить от «хотелок»
  4. Держать клиента и себя в узде
    Вместо «как-нибудь потом договоримся», у вас четкие условия и сроки, срыв которых грозит штрафом.

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

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

Пункт 7.4 один из важных, он дает право подписывать документы онлайн и считать договор действительным!

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

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

Скачать договор можно с моего гугл диска: https://drive.google.com/open?id=1BVGcToHLUEjxcNXOEyHsg_wjJ3aC_XdNh1ZrLwpbtok