Kadzi

Привет, сделаю быстрый обзор.

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


уже видно, что некоторые элементы плавают и не выровнены.

2) Сформулируем и сфантазируем пользу:

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

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

3) Смотрим что можно улучшить:


Иконку почты убираем. Восклицательные не нужны! Убираем! лучше: Обратная связь. Обратную связь лучше убрать в подвал, слабо верится что ей вообще будут пользоваться при осмотре графика.

В кнопках-табах повторяются даты, всё, что повторяется всегда выносим за скобки. Не понятно, почему именно эти реки? Где остальные? Предположим, что они самые популярные и пока опустим момент.


Убираем знаки! Нуль поста так и пишется, без дефиса.

нет: Уровни рек относительно нуль-постов, 2018г. Используются оперативные данные Росгидромета, не прошедшие контрольную обработку. Могут содержаться ошибки!

да:

Уровни воды, см
р.Тура у г.Тюмень

Данные сняты с нуль постов Росгидрометом. Контрольная обработка не пройдена, допускаются погрешности 10..30 см. (спорный вопрос, стоит ли показывать эту информацию в начале, или вынести вниз после графика, пока опустим)

Далее, блок с температурой воды. Как видно они маркированы цветом, убираем, и так понятно. Не совсем очевидно, что речь идет о температуре, когда смотрим на блок рек справа, поэтому предлагаю обозначать так: −3 °С, +2 °С



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



Каша цветная, жирная и навороченная. Упростим: рассортируем в алфавитном порядке, вынесем повторения за скобки, привяжем цвета к рекам, обозначим температуру правильно, уберем заголовок.



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

4) Делаем быструю перевёрстку расположения:



5) переверстаем каждый блок и соберем в первый образец:

боковая панель:


добавим обозначающие:



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

Подробно на аналогичный вопрос отвечал.

к тому, что я описал в вопросе добавлю новые мысли, которые я не вкурил тогда:

— понять, как устроен фронт и бэкенд на базовом уровне (статьи, видосы)
— понять, как работает интернет в целом и браузеры (статьи, видосы)
— НАУЧИТЬСЯ ВЕРСТАТЬ
— понять, что дизайн это постоянный процесс, а не разовый

P.S у меня в ответах куча полезных ссылок, для старта в том числе

Скевоморфизм

Статья на хабре

1. В первую очередь я бы сделал страницу с хорошим адаптивом:

чтобы текст не прилипал к краям экрана, чтобы не было горизонтальных скролов

2. Далее, я бы увеличил размер шрифта, увеличил расстояние межстрочное, убрал бы этот серый цвет шрифта на адекватный темный:



3. Затем, я бы сделал другой формат дат, например: Jul 31, 2017. Да и вообще, этот блок можно оживить миниатюрой, аватаркой и т.д + сам заголовок можно сопровождать фоновой картинкой и т.д, чтобы не выглядело как серый мрачный день, пример блока:



4. Саму навигацию я бы сделал якорным объектом, привязанной к углу экрана или по крайней мере выровнял бы с текстом, сейчас сьехало + сьехали серые разделители-полоски

5. Панель боковая:



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

6. Зачем вообще нужна боковая панель? Чтобы что? Я бы вообще её убрал в десктопной версии

7. Зачем вообще нужна вкладка Resent? Может имелось ввиду Recent? У меня есть браузер, где есть история страниц. А вот в макете нет возможность логина, а можно было бы подписываться на автора или добавлять статьи в избранное, писать комментарии и т.д

P.s список не полный, но основные мысли я изложил

1. сделаем навигацию в нужном порядке: сначала блестяшки, доставка и оплата с оффером, фактоиды о себе и наконец, контактная информация.
2. покажем, что ссылки это ссылки, линию делаем с прозрачностью, чтобы не мешала, напишем-ка все строчными, по-европейски.
3. выровняем лого, навигацию и телефон по 1 линии — верхняя граница строчных
4. напишем правильно мобильный телефон, без мусора
5. упростим лого
6. используем 1 гарнитуру
7. сделаем менее агрессивный розовый
8. вынесем цитату, сделаем висячую пунктуацию, добавим автора
9. покажем поделки

ну это фастран, можео и лучше ;)

Зависит от багажа умений.

Аналогия — музыкант или боец, например, который знает не 4 удара, а все 600 и как угодно может их комбинировать.

Скилованный веб-дизайнер сделает за 4 часа выше среднего по рынку по качеству.

Обычный дизайнер и за 20 часов часов не сделает скорее всего страницу, которая будет приносить деньги. (вы кстати ниже обычного)

Компетенции дизайнера, чтобы делать быстро и качественно:

1. Понимает задачу
2. Понимает ЦА и как работает реклама.
3. Умеет строить структуру и навигацию
4. Умеет писать текст
5. Понимает суть интерфейса
6. В курсе, какие бывают контролы, как они адаптируются, как работает адаптивный дизайн
7. Понимает вёрстку на HTML и CSS, что в свою очередь опять влияет на качество адаптивного дизайна, что в свою очередь помогает быстрее принимать решения и дает свободу действий. бонус
8. Понимает типографскую вёрстку, знаком со всеми элементами вёрстки, правилами взаимодействия, якорными объектами, модулями и т. д.
9. Владение приемами Фотошоп, Иллюстратор для нестандартных коллажей и svg графики — на автоматизме. Для сборки — скетч, фигма. ( в случае с фигмой прям онлайн тестирование своего макета на устройствах)
10. Умелый поиск нужных картинок, иконок, графики, шрифтов. В том числе платных. Можно вообще, имея в голове структуру и умение писать текст собрать сайт на готовом шаблоне с готовыми элементами. Платные элементы выглядят дорого, есть и бесплатные. А можно и скачивать и использовать их для коллажей. Пример
11. Приемы композиции
12. Умеет использовать прогрессивный джипег, для быстрой сборки макета из вырезок по другим сайтам.
13. Горячие клавиши помогут
14. Спринты, пальминг, свежая вода, быстрые углеводы, помодоро и прочее....))))
15. И так далее.

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

но таких на русском рынке практически нет, если знаете таких ссылку в студию)

Чем больше багаж, тем быстрее скорость принятия решений, А когда ты умеешь делать как минимум что было описано, такой клиент/работодатель идет на, или платит очень дорого, ибо есть за что.

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

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

на подобные вопросы с подбором ссылок я ответил:

как стать дизайнером
мой подбор ссылок и рекомендаций в ответе
книги и советы
подбор ссылок по фигме
сетки фигма

Илья, ты не перейдешь от фотошопа полностью. Делать нужно так:

1) сложные векторные штуки рисуем в иллюстраторе (там и фильтры есть и эффекты), затем берем и экспортируем как SVG в фигму. Инструкция, как правильно сохранять в SVG.

2) Растровые коллажи рисуем конечно в фотошопе, экспортируем в фигму, как PNG или JPEG

3) Фигма - для сборки, потомучто а) гораздо быстрее работа с макетами б) гораздо меньше весят файлы в) несколько человек могут дизайнить одновременно г) можно делать компоненты - кирпичи, например ты нарисовал кнопку и сделал её компонентом, затем можешь её плодить одним нажатием кнопки, так, ты можешь сделать хоть 100 таких кирпичиков и за считанные минуты собрать интерфейс (посмотри такого чувака, как Roman Kamushken, чтобы понять насколько это ускоряет работу)

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

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

ролики на ютубе есть, но их объясняют такие болваны с ээээканьем мммммэканьем, что сил нет смотреть 15 мин то, что можно обьяснить за 10 сек.

из адекватного, русское:

знакомство с фигмой
почитать статейка старая, много что поменялось, но визуально там показаны преимущества
полезный материал по резине

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

Весь дизайн одинаковый, новые типы компонентов появляются очень редко, если абстрактно, то сейчас это:

квадраты, прямоугольники, круги, полоски

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

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

Базовые элементы верстки (на этой странице читать все ссылки)
Контур гайды (тут посмотри из каких кирпичей собирают интерфейсы)
Блог Бирмана(выборочно сначала почитай, что интересно, а потом по ситуации)
Советы главреда (их много, сразу не осилить, но успешный коммерческий сайт это все еще текст, а текст это типографика. Хороший текст + хорошая типографика и ты уже можешь делать продукты лучше, чем половина нищебродов которые заполонили отрасль)
Гайды материал дизайн (наблюдай за Романом Камушкеном, если нужно купи его готовую библиотеку компонентов в фигме)
Искусство мыть слона (потом почекай кто такой этот Головач)

несколько книг, которые прям апнут тебя:

А.Горбунов - Типографика и верстка (скачать можно вк или найти в инете)
Илья Бирман - пользовательский интерфейс (подписка 400р)
Idea book - графический дизайн
Пиши, сокращай - Максим Ильяхов

это хороший базовый набор, +ссылки, что я дал, если не полениться и почитать и вникнуть, через месяца 3, ты будешь понимать как сдизайнить любой компонент, как перестать писать тупой текст и как перестать смотреть у других. Я уверен ты сделаешь просто астрономический рывок в дизайне. Все остальные ссылки тебя будут находить сами, ты как-бы выйдешь на поток, работает довольно интересно.

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

дизайн-системы 1
работай в фигме

бонус:
главные ошибки дизайна

p.s становись проактивным, меньше задавай вопросов, сначала пробуй найти ответ сам, засунь подальше тщеславие и просто начни делать фейковые работы. Так ты очень быстро научишься принимать дизайн-решения, а после ссылок у тебя наступит первое просветление (:

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

как стать дизайнером

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

Совет бюро, базовые элементы верстки

В этом совете еще 12 ссылок на эту тематику, в том числе, про выравнивание и чередование ритма. А на самом сайте бюро в советах можно поискать дополнительные ответы, их не прикладываю, так как ты интуитивно найдешь нужные.

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

Чтобы сделать резкий скачок, рекомендую:

1) Подборка советов главреда по тексту их там очень много, за месяц не осилить если вдумчиво читать и осознавать, но за 2 месяца, с видео на его канале, вполне.

2) Книга А.Горбунова Типгорафика и верстка (можно на сайте бюро купить подписку, а можно скачать из сети, например из вк)

3) Джеймс Феличи, Типографика: шрифт, верстка, дизайн. Ооочень классный справочник. Читается не легко. Информации много, почти 500 страниц. Но после него, ты со скоростью света будешь принимать решения в верстке. (а это очень важно для хорошего адаптивного сайта, например, сложные таблицы и т.д).

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

5) Эдвард Тафти. Рекомендую погуглить его. И Брокмана "Модульные сетки в графическом дизайне".

6) Упражнение. Однажды я пошел и купил порядка 700 листов А4, плотных, это несколько альбомов, были также А2. И по очереди каждый разукрашивал кисточкой, черной краской, серой краской, красной. Рисовал полоски, имитируя текст, заголовки, рисовал квадраты, представляя, что это картинки. Ну и всякие кружки. У меня ушло несколько недель на это, чтобы не лениться. Но после 300 листа, я стал импровизировать и самонаучился, вкус начал развиваться. Я делал симметритчно, асимметрично, упарывался с полосками, прямоугольниками, квадратами и кружками. И осознание наступило. А потом пришло понимание, когда нужны собственные сетки.

7) стайлгайды

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

Рекомендую, полностью вот
и не торопясь вот

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

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

Сергей, вас раскачает Figma.

Без лишних слов:

Фишки фигмы
Обзор фигмы

Все то, что вы спросили, там есть. В одном месте.
В умелых руках (понимание формы и пропорций, цвета, композиции, типографики) такие программы просто восхитительны.

p.s не углубляйтесь, попробуйте фигму в течение нескольких часов, если вам покажется, что этого мало, пробуйте скетчи и т.д