Телеграм канал 'Веб дизайн: теория и практика от @elenabazu'

Веб дизайн: теория и практика от @elenabazu


3'802 подписчиков
0 просмотров на пост


Детальная рекламная статистика будет доступна после прохождения простой процедуры регистрации


Что это дает?
  • Детальная аналитика 186'438 каналов
  • Доступ к 67'550'748 рекламных постов
  • Поиск по 256'458'513 постам
  • Отдача с каждой купленной рекламы
  • Графики динамики изменения показателей канала
  • Где и как размещался канал
  • Детальная статистика по подпискам и отпискам
Telemetr.me

Telemetr.me Подписаться

Аналитика телеграм-каналов - обновления инструмента, новости рынка.

Найдено 20 постов

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

У всех сайтов в целом есть базовая структура.

Шапка сайта (header, где лого и меню), главный экран, описание, заголовки, тексты, кнопки, разделы и подвал сайта (footer).

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

БОЛЬШОЕ ВИДЕО С ПРИМЕРАМИ — https://youtu.be/6Al34ZM8yW8
Web-страница:
С чего начать сайт: структура и насмотренность
Всегда дизайн сайта мы начинаем с вопроса — какая главная задача сайта, что человек должен сделать (подписаться, оставить эмейл, купить, получить эмоцию).

У всех сайтов в целом есть базовая структура.

Шапка сайта (header, где лого и меню), главный экран, описание, заголовки, тексты, кнопки, разделы и подвал сайта (footer).

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

INSTAGRAM https://www.instagram.com/elenabazu
Всегда перед началом работы я спрашиваю у клиента, какие сайты ему нравятся, есть ли у его бренда фирменный стиль и в каком направлении он вообще видит свой сайт.

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

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

Сайты для референсов:
https://land-book.com
https://www.lapa.ninja
https://thegallery.io
https://www.siteinspire.com
https://wow-web.co.uk
https://httpster.net/2020/aug

Я не очень люблю Dribbbble, мне больше нравится смотреть на живые сайты, не на картинки.

ВИДЕО — https://youtu.be/4ROs-c_4K4g
В чем же рисовать сайты — в Фотошопе, Скетче или Фигме?

Лет 15 назад мы все рисовали в Фотошопе, потому что просто не было вариантов. Сайты тогда были графичные, еще не было html5 и многое верстали картинками, не кодом.

Сейчас же есть более удобные программы.

Чем отличается Sketch от Figma?

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

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

ВИДЕО — https://youtu.be/6EtIQ5UIytA
Есть два подхода: хостить сайт на своем хостинге (покупать место на сервере) или же публиковать сайт на сервере платформы.

Раньше хостили всегда на своем, покупали хостинг, разворачивали там базу данных и тд. Обычно такие сайты были на Wordpress, Magento и тд.

Сейчас же 90% проектов можно положить на платформу и это будет работать лучше. Потому что платформы отлично заточены для seo, для соцсетей, для мобильной версии. И для изменений в сайте не нужно постоянно дергать программиста.

Я выделяю 5 платформ для своих задач: Tilda, Vigbo, Squarespace, Readymag, Persona.

Tilda моя любимая платформа, потому что они активно развиваются, вносят много новых функций и фичей, у них отличная техпоодержка и любой дизайн можно перенести на Тильду в zero block. Тильда хорошая как для своего дизайна, так и для работы с готовыми блоками и шаблонами (их много у них). Отдельно советую Ютуб канал Tilda Publishing про дизайн.

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

Squarespace подходит для всех сфер, от фотографа до магазина, но работать только с шаблонами (они у них потрясающие). Нюанс — для оплаты нужно иметь амер или европ карту. Если сайт без оплаты (визитка или портфолио), то вообще без проблем. Весь интерфейс на английском.

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

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

ВИДЕО — https://youtu.be/8cFrYkbmFeU
На самом деле, что 15 лет назад, когда я начинала, что сейчас — конкуренция одинаково высокая. Но классных спецов все так же мало, кто включает голову и не высокомерит.

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

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

Есть разные способы, как свой навык в вебе можно применять. Я советую пробовать разное, чтобы понять, что нравится именно сейчас.

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

2. Рисовать только дизайн в рамках офиса или команды. Работа в офисе или в команде важна, для понимания процессов, особенно полезно работать с классным арт-диреткором, который будет направлять. В студии есть менеджер, ти лид, арт диреткор, креативный директор, отдельно верстальщики, копирайтеры. Дизайнер рисую только дизайн и общается с менеджером, не с клиентом.

3. Собирать сайты из готовы блоков (Tilda, Vigbo). Полезно для начинающих дизайнеров, у кого еще хромает типографика. Можно собирать из готовых блоков сайты по структуре от клиента. Бюджет тут ниже, но зато для вас и для клиента быстрое решение задачи. Для опыта полезно.

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

5. Только собирать дизайн на конструкторе (в zero block на Тильде). Это обычно разовая работа или часть работы в офисе. Вы собираете чужой дизайн на Тильде, тем самым учитесь на чужих макетах.

6. Рисовать презентации для клиента, коммерческие предложения. По сути это та же работа со смыслами и типографикой, только для pdf.

7. Упаковка для соцсетей. Можно комбинировать разработку сайта и тот же стиль наследовать для оформления соцсетей клиента. Обычно заказчик приходит за решением общей задачи «упаковать продукт в диджитале» и вы можете комплексно это ему закрывать.

ВИДЕО — https://youtu.be/_2hGybFyrLc
Контент бесплатный, канал открытий.

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

t.me/bazuweb
Нужно ли у знать программирование и верстку дизайнеру?

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

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

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

ВИДЕО — https://youtu.be/gdhBn2GmYTE
Для меня веб дизайн это в первую очередь сайты, а графический — это брендинг, печатные материалы и иллюстрации.

То есть — иллюстрации диджитал и физически, 3д графика, логотипы, визитки, стикеры, этикетки.

Все это также можно применять в вебе и совмещать, давая для клиента больше ценности.

ВИДЕО — https://youtu.be/SVBuE8YGuwQ
Для меня веб дизайн это в первую очередь про сайты. Раньше мы рисовали картинку в Фотошопе, программисты ее кодили. Сейчас же все рисуют в Figma (об этом отдельно поговорим) и зачастую сами собирают руками в конструкторах.

Сайты бывают разные — сайт-визитка, интернет магазин, блог, портал, одностраничники (лендинги) и тд.

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

И сейчас веб дизайн уже стал софт скиллом (soft skill). Порог входа в профессию ниже, конкуренция выше, но все так же классных дизайнеров, которые включают голову — единицы.

ВИДЕО — https://youtu.be/u8SpuTOjslg
Ура, уже 31 июля мы стартуем! 💛

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

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

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

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

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



На курсе нет обратной связи, так как курс бесплатный, но вы всегда можете придти пообщаться на консультацию, с радостью посмотрю на ваше портфолио, отвечу на все вопросы и помогу разобраться, куда двигаться дальше.
Привеет, меня зовут Лена Базу и я рада видеть вас на канале курса «Веб-дизайн: теория и практика» 🔥

https://instagram.com/elenabazu

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

Найдено 20 постов