Веб-дизайн для «чайников», 2-е издание
Лайза Лопак Web Design For Dummies, 2nd Edition Кол-во страниц: 304 Оглавление | Дополнительные материалы | | Купить книгу: Тираж книги закончился |
Книга «Веб-дизайн для «чайников» предназначена для начинающих Web-дизайнеров, которые хотят научиться быстро и качественно создавать современные сайты. Профессионал Web-дизайна Лайза Лопак в доступной форме расскажет вам обо всех тонкостях процесса Web-дизайна — начиная от создания карты сайта и подготовки макета и заканчивая презентацией результатов заказчику и получением вознаграждения за выполненный труд.
Расскажи про книгу своим друзьям и коллегам:
Твитнуть
Нравится
| ISBN | 978-5-8459-1434-7 |
| ISBN ENG | 0-471-78117-7 |
| Кол-во страниц | 304 |
| Год выпуска | 2008 |
| Формат | 70×100/16 |
| Тип переплета | мягкий переплет |
| Тип бумаги | офсетная |
| Серия | Для чайников… |
| Автор | Лайза Лопак |
Название ориг. | Web Design For Dummies, 2nd Edition |
| Автор ориг. | Lisa Lopuck |
Вас, возможно, заинтересуют следующие книги
|
.. Оглавление к книге Веб-дизайн для «чайников», 2-е издание
ВведениеЧасть I. Основы Web-дизайна
Глава 1. Вы хотите стать Web-дизайнером?
Глава 2. От концепции к реализации
Часть II. Дружественный пользовательский интерфейс
Глава 3. Ориентируем сайт на нужную аудиторию
Глава 4. Web-контент и элементы навигации
Глава 5. Дизайн пользовательского Web-интерфейса
Глава 6. Тестирование сайта пользователями
Часть III. Создание Web-графики
Глава 7. Советы по графическому дизайну
Глава 9. Цвета на Web-страницах
Глава 10. Создание Web-графики с чистого листа
Глава 11. Презентация вашего дизайнерского шедевра
Глава 12. Разработка графических элементов
Часть IV. Окончательная доработка Web-сайта
Глава 13. Краткий экскурс в HTML
Глава 14. Макет страницы
Глава 15.
Профессиональные Web-сайты
Часть V. Великолепные десятки
Глава 16. Десять советов по управлению собственным Web-бизнесом
Глава 17. Десять советов по информационному дизайну и дизайну взаимодействия
Глава 18. Десять затруднительных ситуаций
Предметный указатель
Материалы к книге Веб-дизайн для «чайников», 2-е издание
Полное содержаниеОб авторах
Введение
Предисловие
Глава книги
Как не облажаться с дизайном. Инструкция для чайников за 5 минут / Хабр
Перевод «Я люблю ИП»
Принципам хорошего дизайна может научиться любой человек. Из этой статьи вы получите базовые знания и практические навыки дизайна, которые сможете применить уже сейчас (и удивить ваших друзей дизайнеров).
Если вы не верите, что можете научиться дизайну, просто вспомните слова легендарного Дэвида Грола (барабанщик в группе Nirvana, гитарист и вокалист FooFighters, прим.
ред.) об изучении новых вещей:
Я никогда не учился играть на барабанах. Я никогда не учился играть на гитаре. Я как-то сам до всего дошёл. Если вы действительно любите своё дело, увлечены им и сфокусированы, вы сможете сделать всё, что захотите.
А теперь, помня эти слова, вы готовы к нашему крэш-курсу? Пристегните ремни, мы начинаем в произвольном порядке.
1. Используйте много контраста
Цвет фона и текста должны достаточно отличаться, чтобы не вызвать утомления глаз. Обычно чёрный текст на белом фоне читается лучше всего. Держитесь подальше от светло-серых, жёлтых и зелёных тонов. Если вам приходится щуриться, чтобы прочитать текст, то у вас проблемы.
2. Почти чёрный лучше, чем чёрный
Если у вас есть выбор, попробуйте использовать для текста цвет #333333 RGB (51,51,51) вместо чисто чёрного. Чисто чёрный текст на белом колеблется для глаз и не даёт сфокусироваться на буквах.
3. Важный контент сначала
Расположите самую важную информацию вначале, чтобы описать основную цель вашего приложения или сайта.
Важный контент должен быть виден без зума, скролла или тапов.
Давайте посмотрим на несколько хороших примеров визуальной иерархии в реальной жизни.
Instagram (внизу слева) делает основной фокус на фото/ видео, которое опубликовал пользователь.
Pinterest (внизу справа) начинает с поиска, после которого уже идёт красивая сетка. Pinterest делает это специально. Поиск — это основная функция их приложения, люди использует Pinterest, чтобы искать и находить визуальную информацию.
Давайте рассмотрим ещё пару примеров.
Spotify (внизу слева) делает акцент на обложке альбома и названии песни. Несмотря на то, что кнопки управления плейером вторичны, Spotify выделяет из них кнопку Play.
Facebook (внизу справа) очень похож на Instagram и на первое место ставит контент ваших друзей.
4. Выравнивайте все элементы
Самый быстрый способ поправить элемент, который выглядит неуместно или сомнительно, это выравнять его.
Когда дизайнеры говорят о необходимости использовать сетку, они пытаются обратить внимание на отсутствие выравнивания.
Выравнивание — то одно из самых простых улучшений, которое можно сделать на сайте или в приложении, чтобы они стали выглядеть в 10 раз лучше.
Вот ещё один пример, на этот раз от Medium. Я немного переделал макет. Как он выглядит? Не кажется ли вам, что что-то не так?
Подсказка: обратите внимание на выравнивание левого края. На рисунке слева я специально выделил линией его отсутствие. Справа все основные блоки выровнены.
Плохое выравнивание слева и исправленное справа
5. Размер шрифта и белое пространство
Мы делаем дизайн не для муравьёв. Увеличив размер шрифта, ваш контент станет гораздо легче читать при наличии достаточного расстояния между строк.
Хороший и плохой размер шрифта
Хороший и плохой интерлиньяж
6. Используйте список, если важен порядок
Если порядок не имеет значения и вы хотите вдохновить людей на поиск (как Pinterest или AirBnB), то используйте сетку.
Паттерны взглядов при использовании списка и сетки
7. Сначала сделайте дизайн в чёрно-белых тонах и добавьте цвет позже
Это позволит вам сфокусироваться на самом главном в вашем приложении.
Цвет побуждает сильную эмоциональную реакцию и чаще всего мешает сконцентрироваться на решении основной дизайн-проблемы.
8. Создавайте комфортный дизайн
Ограничение движений руки — это важная проблема, посмотрите на иллюстрацию из замечательной статьи Luke Wroblewski о навигации на мобильных устройствах.
Он выделяет области, до которых легче всего дотянуться пальцем (по крайней мере для правшей). Я бы очень хотел увидеть приложения, которые дают возможность изменить интерфейс справа налево.
Многие эффективные мобильные приложения располагают навигацию и основные элементы управления в нижней трети экрана мобильного телефона.
9. Используйте готовые палитры
Цвет — это немного недостижимое искусство.
Я очень рекомендую отправиться на Dribbble и поискать там цветовые палитры («Color Palettes»). Или можно использовать генераторы цветов, например, Coolors или Color Claim.
Используйте готовые палитры и сэкономьте себе часы бесконечных споров и догадок.
Прим. ред., вот ещё несколько сайтов:
- Colormind — создание цветовой гаммы на основе искусственного интеллекта,
- Color Farm — цветовые палитры из популярных работ на Dribbble,
- Color Lisa — цветовые палитры из картин великих художников,
- SwissColors — цветовые палитры в стиле швейцарского дизайна,
- HTML Color Codes — очень хороший сайт для дизайнеров и разработчиков о цвете, на сайте есть отличный инструмент для создания цветовых палитр, названия цветов в различных вариантах (Hex, RGB, HSL, HTML), готовые палитры цветов для Flat и Material дизайна, пособия по использования цвета и ссылки на другие полезные ресурсы,
- Color Hunt — специально отобранные, красивые палитры цветов, которые обновляются каждый день,
- Colordot — цветовая палитра, где с помощью мышки можно исследовать все оттенки цветов.
10. Используйте рекомендации Apple и Google
У этих компаний есть отличные ресурсы для разработчиков приложений на iOS или Android.
Например, Google Material Design, где собраны инструкции, инструменты, цвета, иконки и компоненты, которые помогут вам начать в дизайне вашего приложения.
У Apple есть Human Interface Guidelines, где вы найдёте всё, что вам нужно, для дизайна приложения на iOS.
Помните, главное — это практика
Для того, чтобы научиться видеть хороший дизайн, потребуется время, но вы заметите, как эти правила помогут вам улучшить ваши навыки.
Обложка в начале статьи lstore.graphics
Веб-дизайн для чайников Лизы Лопак — Электронная книга
Электронная книга606 страниц5 часов
Рейтинг: 4 из 5 звезд
4/5
()
Об этой электронной книге
инструменты и возможности веб-дизайна
У вас есть отличная идея для веб-сайта, но вы не знаете, с чего и как начать? Веб-дизайн для чайников, 3-е издание — идеальная отправная точка! Это веселое, но простое руководство, полностью обновленное с учетом последних и лучших достижений в мире веб-дизайна, поможет вам разобраться со всем, что вам нужно знать, чтобы упорядочить свои идеи, создать шаблон, начать разработку, протестировать, чтобы убедиться во всем.
работает правильно, и запустите готовый сайт. Эта книга, наполненная бесценными советами по включению аспектов социальных сетей, связыванию контента с социальными сайтами и дизайну для мобильных устройств, поможет вам в кратчайшие сроки стать профессионалом в области веб-дизайна.
- Подчеркивает множество значительных изменений в мире веб-дизайна по сравнению с предыдущим изданием, включая введение HTML5, новые технологии для обмена мультимедиа, мобильный веб-дизайн и многое другое.
- Особое внимание уделяется эффективному использованию цвета, текста и навигации.
- Дает полезные советы, как избежать распространенных ошибок
- Подробно описывает способы подключения к социальным сайтам, таким как Twitter и Facebook
Веб-дизайн для чайников, 3-е издание выходит за рамки простого создания простого веб-сайта и предлагает вам создать привлекательный, практичный и полезный сайт.
Пропустить карусель
ЯзыкАнглийский
ИздательWiley
Дата выпуска 21 марта 2012 г.
s for Web Design For Dummies
Рейтинг: 4,0833333333333333 из 5 звезд
4/5
12 оценок2 отзыва
Предварительный просмотр книги
Веб-дизайн для чайников — Лиза Лопак
Часть I
Начало веб-дизайна 9781118004906-pp01004906-pp0101.eps3 9000 взаимосвязанные задачи и требует опытная команда людей, чтобы сделать все. Когда вы начинаете свои приключения в веб-дизайне и/или веб-управлении, хорошим первым шагом является понимание этого производственного процесса от начала до конца — и вовлеченных людей — чтобы у вас была целостная картина того, чего ожидать, и знать, где вы подходите. в пути. На самом деле, несмотря на то, что многие дизайнерские фирмы рекламируют свое мастерство в процессе веб-производства как аргумент в пользу продажи, когда они пытаются выиграть тендеры, правда в том, что большинство фирм следуют одному и тому же или похожему процессу: определение, проектирование, разработка, развертывание.
. Затем клиент получает возможность обрабатывать Фаза пятая
— Техническое обслуживание!
В главе 1 я познакомлю вас с различными типами ролей и обязанностей, связанных с процессом веб-производства. В главе 2 я проведу вас через весь производственный процесс, показав, как дизайнерские агентства и внутренние группы дизайнеров управляют веб-проектами от начала до конца.
9781118004906-pp0102.tif9781118004906-pp0103.tif9781118004906-pp0104.tif97811118004906-ba01.tif
1 1
1 1 Итак, вы разрабатываете веб-сайт
9781118004906-co01.tif
В этой главеarrow Понимание ролей и обязанностей членов команды
arrow Начало карьеры веб-дизайнера3 9000 стремительно развивается с момента своего создания — от веб-сайтов до мобильных приложений и социальных сетей возможности безграничны. Это отличная новость для вас, если вы думаете о том, чтобы стать профессиональным веб-дизайнером.
Отрасль постоянно меняется и развивается, и за каждым углом происходят захватывающие и стремительные события.
Веб-дизайн — это не просто создание серии хорошо выглядящих страниц. В этой книге я покажу вам, как спроектировать связный сайт, который связывает его части таким образом, чтобы он соответствовал бизнес-целям и имел смысл для пользователя. Современные веб-сайты могут состоять из сотен страниц. Как профессиональный веб-дизайнер или менеджер, вы должны знать, как интегрировать дизайн и навигацию, используя множество технологий и методов для создания эффективного сайта.
Хотя создание веб-сайта профессионального уровня может показаться сложной задачей, если вы понимаете процесс от начала до конца и роли вовлеченных людей, вы сможете лучше приступить к работе.
В этой главе я познакомлю вас с различными игроками, которыми вы будете окружать себя на пути к профессиональному веб-дизайну.
Вовлеченные люди Разработка веб-сайтов — это настолько масштабное мероприятие, что для того, чтобы сделать его правильно, вам действительно нужна команда людей — независимо от того, работаете ли вы с внутренней командой, поставщиками или независимыми консультантами.
Вот выборка основных игроков, их роли и когда они вам нужны.
В первые дни вы могли без особых усилий разместить веб-сайт в Интернете и рассчитывать на приемлемый трафик без особых усилий. Однако сегодня на переполненных интернет-магистралях вам действительно нужна бизнес-стратегия и маркетинговый план. Специалисты по бизнесу и маркетингу, как внутренние, так и ваши клиенты, должны быть вовлечены в работу веб-сайта с самого начала. Они отвечают за следующие обязанности:
check.png Постановка целей и требований к сайту. Вы всегда должны понимать бизнес-цели сайта в порядке приоритета. Например, целью номер один может быть продажа продукта. Деловые люди не только задают три или около того основных целей, чтобы определить направление сайта, но также должны будут предоставить список требований сайта — по сути, список пожеланий возможностей сайта — его способности делать X.
check.
png Определение целевого клиента. Члены маркетинговой команды — это те, кто ближе всего к конечному потребителю бизнеса. Они должны предоставить изображение профиля идеального клиента, которого сайт должен обслуживать. Информационные архитекторы
(обсуждаемые позже в этой главе, это люди, которые проектируют базовую структуру сайта) в команде будут использовать эти данные для разработки набора из персон
, которые будут сосредоточивать усилия творческой группы на протяжении всего процесса веб-разработки.
webspeak_4c.eps check.png Пошатывание посетителей. Отделу маркетинга также необходимо выяснить, как направлять клиентов на сайт. В интернет-бизнесе привлечь внимание (привлечь людей на свой сайт) не так просто, как кажется; он включает поисковую оптимизацию (SEO), партнерство с другими компаниями и разработку интегрированной онлайн- и офлайн-стратегии. По этим причинам маркетологи должны немедленно приступить к реализации своего плана.
Как только клиенты и компании принимают участие в новом веб-проекте, их взгляды неизменно превышают бюджет. Часто они просят луну, потому что просто не понимают сложностей, связанных с веб-разработкой. Помимо многих других обязанностей, основная задача производителя или менеджера проекта состоит в том, чтобы устанавливать ожидания клиентов и управлять ими, чтобы проект оставался в нужном русле. (Для простоты, с этого момента я буду называть эту роль просто 9-й.0111 производитель .) Используя различные инструменты, такие как Microsoft Project, показанный на рис. 1-1 , продюсер должен следить за проектом, членами команды, клиентом и бюджетом от начала до конца.
warning_4c.eps Одной из наиболее распространенных проблем, с которыми приходится сталкиваться продюсеру в проекте, является расползание объема . Возможности и функции, которые вы не планировали, имеют сверхъестественную способность найти свое место в дизайне.
Часто вы обнаружите, что либо члены команды проекта пытаются проявить себя на позолота
(переусердствовать) их вклад или клиенты тщательно изучают сайт и предлагают слишком много изменений и улучшений. В любом случае такая постоянная болтовня может отнять у вас больше времени и денег, чем вы планировали. Чтобы ограничить расползание масштаба, не забудьте запланировать разумное количество непредвиденных изменений на случай непредвиденных обстоятельств и следите за дополнениями, возникающими в ходе проекта, чтобы вы могли управлять ими или устранять их.
Успешное управление проектами удерживает членов команды веб-разработчиков на той же странице
на протяжении всего проекта. Сбалансировать потребности клиента, цели сайта и реальность масштаба и бюджета — сложная задача. Установление четкой коммуникации означает понимание потребностей клиента и отдельных членов команды. Следование процессу и понимание общих целей и задач сайта с самого начала также имеет решающее значение для успеха проекта.
Цель состоит в том, чтобы поддерживать четкие цели на каждом этапе разработки, управлять расползанием масштаба (тенденцией проектов к увеличению в размерах) и предсказывать будущее.
Келли Гото, президент компании, www.gotomedia.com
9781118004906-fg0101.tif
.
Информационные архитекторы Это впечатляющее название принадлежит человеку, чья работа заключается в том, чтобы сесть и выяснить, как весь сайт сочетается друг с другом и как люди будут переходить с одной страницы на другую. Они также являются теми, кто разрабатывает персоны — профили целевого пользователя — и будут проводить пользовательское тестирование
позже в процессе разработки.
webspeak_4c.eps Одной из первых задач информационного архитектора является разработка диаграммы сайта (подобной той, что показана на рис. 1-2), которая показывает все основные разделы сайта.
IA, как часто называют этого человека, затем погружается в детали на уровне страницы и создает серию каркасных диаграмм , как в примере, показанном на рис. главная страница сайта. Срок 9Каркас 0111 , который встречается на протяжении всей этой книги, берет свое начало из устоявшейся техники 3D-моделирования, в которой используются экранные линии, похожие на проволочную сетку, для черновой обработки основных форм перед их дальнейшим рендерингом. Этот термин был принят на раннем этапе индустрией веб-дизайна для обозначения эскизов страниц, похожих на диаграммы, которые предшествуют этапу визуального дизайна. Между картой сайта и каркасными диаграммами, нарисованными для каждой основной страницы, информационный архитектор, по сути, строит чертежи для всего сайта. Это важный первый шаг, прежде чем вы сможете погрузиться в исследование визуального дизайна.
9781118004906-fg0102.tif
© OHM Cycles. http://ohmcycles.com/
9781118004906-fg0103.
tif
Рис. 1-3. Каркас показывает структурную схему, дизайн взаимодействия и план содержания страницы.
Визуальные дизайнеры Вооружившись картой сайта и каркасами, которые определяют базовую структуру сайта, это Работа визуального дизайнера по преобразованию имиджа и характера бренда компании во внешний вид веб-сайта. Однако визуальный дизайн заключается не только в том, чтобы сайт выглядел хорошо; это может повысить или снизить эффективность сайта и даже удобство его использования. Хороший визуальный дизайнер не просто раскрашивает
каркасов; они перестраивают элементы, регулируют относительное размещение и размер элементов и используют хорошие принципы графического дизайна в отношении цвета, формы, согласованности и макета, чтобы подчеркнуть навигацию и важный контент, а также указать, как пользователи должны взаимодействовать с каждым
Нравится предварительный просмотр? Страница 1 из 1 знания и навыки? Или, может быть, у вас есть отличная идея для веб-сайта, но вы не знаете, с чего начать? Веб-дизайн, который когда-то был исключительно задачей для профессионалов, стал более доступным для любителей благодаря большому количеству удобного программного обеспечения.
С «Веб-дизайном для чайников» вы сможете создать свой собственный веб-сайт, как профессионал. Для веб-дизайна требуется множество программ, чтобы сделать веб-сайт привлекательным и увлекательным, в том числе: Использование веб-редакторов, таких как Dreamweaver Инструменты редактирования изображений, такие как элементы Photoshop Инструменты для рисования, такие как IllustratorBackground языки разметки и сценариев, такие как HTML и CSS
Это увлекательное руководство охватывает все темы, которые должен знать каждый начинающий веб-дизайнер. Эта книга предлагает советы по следующим вопросам: дизайн для вашей аудитории; создание прочной основы для удобной навигации; создание привлекательной графики, подходящей для сайта; выбор правильного типа и цвета; настройка HTML, чтобы все работало правильно; под руководством Лизы Лопак, пионера в области дизайна интерактивных медиа и старшего продюсера Disney, вы будете создавать превосходные веб-страницы, которые очаруют и впечатлят всех ваших посетителей
659 страниц, Мягкая обложка
Впервые опубликовано 1 января 2001 г.
Об авторе
Что вы думаете?
Оценить эту книгу
Поиск по тексту отзыва
Показано 1–5 из 5 отзывов
Kim Cl
79 отзывов6 подписчиков
30 января 2020 г.Zeboer interesant. Пошел лисбаар. Met duidelijke voorbeelden. Dit gaat меня zeer пошел helpen als achtergrond informatie voor mijn komende studie.
17 июля 2015 г.
Лопак сразу предлагает, чтобы при предоставлении дизайнов для клиентов вы делегировали полномочия членам вашей команды (тоже чайникам, предположительно?), чтобы дизайны отражали разные интерпретации требований, а через несколько страниц — что-то столь же приземленное, как копирование и вставка изображений. будет покрыто. Книга настолько пронизана такими странными сопоставлениями, что в итоге оказывается, что она никому не нужна. Настоящие новички будут очень разочарованы многими главами, которые предполагают либо опыт работы в полиграфическом дизайне, либо то, что читатель уже является членом команды веб-дизайнеров (напрашивается вопрос, почему они должны читать книгу якобы для чайников). , или, возможно, у читателя уже есть такие программы, как Dreamweaver, Fireworks или Photoshop. Более опытные читатели могут найти несколько полезных советов, но я полагаю, что ключевые разделы этой книги уже рассматривались в другом месте, и их только оскорбят более приземленные главы о причудах веб-адаптивных палитр или типов шрифтов.
12 февраля 2016 г.
Я читаю третье издание, опубликованное в 2012 году. Я решил проверить это, потому что думаю о собственном веб-сайте.
Что я усвоил из этой книги, так это то, что создание веб-сайта очень сложно, и если я хочу этим заниматься, мне, вероятно, следует пройти курс обучения этому.
Ян Кинг
Автор 7 книг8 подписчиков
13 мая 2015 г. Мне очень понравилась эта книга, и она оказалась весьма полезной.