Уеб дизайн for Dummies

Уеб дизайн for Dummies Лиса Лопук Времетраене: 0:54 мин. Няма край Дейвид Гогинс Времетраене: 1:12 мин. Биполярно афективно разстройство Д-р Владимир Симов Времетраене: 1:28 мин. Лира Петя Андонова Времетраене: 1:03 мин. Юдина щерка Симона Панова Времетраене: 1:11 мин. Сляпата армия Давид Тоскана Времетраене: 1:07 мин. Усмихни се! Рейна Телгъмайър Времетраене: 1:00 мин. Замъци и сливовица - как се влюбих в Словения Сам Болдуин Времетраене: 1:10 мин. Цочо Билярски Времетраене: 2:04 мин. Върни назад Лиз Томфорд Времетраене: 0:59 мин. Пътуване в мрака Джон Дъглас, Марк Олшейкър Времетраене: 1:11 мин.

Прави всичко по-лесно. Поемете по пътя към невероятните уеб дизайни и приятни за потребителите сайтове.

Готови сте да изграждате най-страхотните високофункционални уеб сайтове? Този наръчник е пълен с процеси, съвети и техники, които ще ви разкрият как. Ще добиете нови умения, докато се учите да планирате, произвеждате и управлявате уеб страници на бизнес ниво. След това ще издигнете вашия сайт до нови висини, като го свържете с профили в социалните медии и го оптимизирате за таблети.

В книгата ще откриете информация за:

• начало на уеб дизайна - научете за целия производствен процес и ролите и отговорностите на вашия екип от разработчици;
• изготвяне на удивителен сайт - от определяне на вашата публика и създаване на карта на сайта до навигиране из уеб съдържание, тестване на дизайни и правене на планове;
• изображения, текст, цвят, бордове за настроения и още - забавлявайте се, докато създавате уеб графики и следвате ключовите техники за развиване на правилния облик и усещане;
• създаване на крайния уеб сайт - прилагане на визуални стратегии за дизайн, които подсилват използваемостта и представят уникалното послание на марката.

Отворете книгата и открийте:

• съвети за създаване на лесен за потребителите дизайн;
• начини за организиране и навигиране из уеб съдържание;
• как да провеждате тестове за потребители, за да си осигурите оптимална производителност;
• методи за изготвяне на нагледен интерфейс;
• стъпки за вграждане на социалните медии във вашите страници;
• как да създавате дизайни на оптимизирани за мобилни устройства сайтове;
• подсказки как да бъдете намирани в търсачките;
• как да разширявате функционалността си с приложно-програмни интерфейси.

Научете как:

• ефективно да планирате аспектите на вашите сайтове и корпоративни социални медии;
• да прилагате добри принципи за уеб дизай, използвайки цветове, текст и направления;
• да развивате, тествате и пускате вашите сайтове.

Лиса Лопук е вицепрезидент на отдела по творчески и цифрови медии на "Monster Energy". Преди се е занимавала като творчески директор и консултант за "Disney", "ESPN", "Epson", "Apple" и "RIM".

Алекс-Софт Пъблишинг ЕООД
София, 1528
ул. Поручик Христо Топракчиев 11
cust_serv@alexsoft.net

За автора
Посвещение
Благодарности на автора
Въведение

• За тази книга
• Условности, използвани в тази книга
• Глупави предположения
• Какво не трябва да четете
• Как е организирана тази книга
• Начало на уеб дизайна
• Удобен за потребителите дизайн
• Графичен уеб дизайн
• Създаване на крайния уеб сайт
• Частта на десетте
• Икони, използвани в тази книга
• Тук съм, ако имате нужда от мен!

Начало на уеб дизайна

• И така, проектирате уеб сайт
• Участващите хора
• Бизнес участници и клиенти
• Производители и мениджъри на проекти
• Информационни архитекти
• Визуални дизайнери
• Разработчици на съдържание
• Специалисти по мултимедийно съдържание
• Уеб разработчици
• Програмисти
• Първи стъпки в уеб дизайна
• Придобиване на опит
• От концепция към изпълнение
• Фаза 1: Дефиниране
• Разбиране на целите на сайта
• Събиране на бизнес изискванията
• Разработване на искане за предложение
• Създаване на план на проекта
• Фаза 2: Проектиране
• Създаване на карта на сайта
• Разработване на скелетни диаграми
• Тестване с потребители
• Сглобяване на план за съдържание
• Установяване на "облика и усещането"
• Получаване на данни от фокусната група
• Фаза 3: Разработване
• Създаване на макети
• Разработване на съдържанието
• Разработване на мултимедийно съдържание
• Изграждане на презентационен слой с HTML и CSS
• Разработване на бекенд
• Фаза 4: Разполагане
• Осигуряване на качество
• Денят на пускане
• Фаза 5: Поддръжка

Удобен за потребителите дизайн

• Проектиране на правилни сайтове за...
• Коя е публиката?
• Въпросник за клиента
• Персони
• Потребителски сценарии
• Създаване на схема на сайта
• Баланс между бизнес изисквания и потребителски нужди
• Категоризиране на информация и подреждане на приоритети
• Създаване на навигационни комплекти на база приоритети
• Създаване на карта на сайта
• Четене между редове и кутиите
• Разработване на собствен набор от символи
• Да пеят всички в един глас
• Официалният индекс на страници
• Създаване на карта при промяна на дизайна на сайт
• Деконструкция на уеб сайт
• Завършване на картата на сайта
• Разработване на маркетингов план
• Офлайн маркетинг
• Онлайн маркетинг
• Организация и навигация на съдържание в Мрежата
• Планиране на ниво страници
• Обозначаване на зони със съдържание
• Създаване на скелетни диаграми
• Представяне на съдържание на страница
• Показване на текст в скелетна диаграма
• Работа със система за управление на Оптимизиране на пространството
• Добавяне на анотации към скелетна диаграмма
• Да помислим за стила
• Обща навигация
• Навигация в раздели
• Да оставим следа от хлебни трохи
• Комбиниране на навигационни техники
• Използвайте графични теми, а не метафори
• Проектиране на потребителски интерфейс за Мрежата
• Дизайн на взаимодействията
• Създаване на поточни потребителски диаграми
• Следване на потока
• Роля на визуалния дизайн в използваемостта
• Проектиране на бутони, които изглеждат възможни за щракване
• Подсказки от ежедневието
• Групиране и разполагане на елементите
• Предоставяне на обратна връзка "Намирате се тук"
• Цветовото кодиране е надценено
• Различаване на елементи, върху които може да се щраква, и такива, върху които не може
• Уеднаквеността е всичко
• Максимално използване на пространството
• Потребителско тестване: лабораторните
• Разработване на тестови прототипи
• Създаване на скелетни диаграми с възможност за щракване
• Тестване на вашия визуален дизайн
• Изграждане на HTML щраквания за тестване на използваемостта
• Подготовка за потребителския тест
• Подготвяне на списъци със задачи за потребители
• Разработване на методология за тестване
• Провеждане на потребителския тест
• Намиране на желаещи да участват опитни зайчета
• Провеждане на теста
• "Хюстън, имаме проблем...": оценяване на резултатите

Графичен уеб дизайн

• Основи на графичния уеб дизайн
• Изработване на визуален интерфейс
• Разработване на шаблони на страници
• Създаване на макети
• Съчетаване на цвят, шрифтове и графики
• Използване на модулна решетка
• Установяване на визуални приоритети
• Въвеждане на стратегия "голям, среден, малък"
• Разбивка на страница на управляеми зони
• Дизайн край линията на сгъване
• Добавяне на пространство за "дишане"
• Създаване на ръководство за дизайнерски стилове
• Ръководство за графични стилове
• Стилове на бутони
• Стилове на шрифтове
• Перфектен дизайн на шрифт
• Текст, който действително можете да прочетете
• Избиране на правилния шрифт за ситуацията
• Не твърде големи, не твърде малки
• Контролиране на показването на текст
• Графичен текст срещу HTML текст
• Езикова локализация
• Спецификации на шрифта
• Имайте резервен план за шрифтовете
• Работа с CSS
• Външни стилови листове
• Разбиране на цветовете, разделителните
• Тайният свят на RGB
• Субтрактивни и адитивни цветове
• Безбройни множества от цветове
• Цветова дълбочина
• Ограничени цветови палитри
• 24-битови изображения
• Цветова дълбочина на монитора
• Шестнадесетичен цветови код
• Разделителна способност на изображения и монитори
• Разделителна способност на монитор
• Разделителна способност на изображение
• Растерни графики срещу векторни графики
• Растерни графики: една тъкан от пиксели
• Вектори: за хората с наклонност към математиката
• Векторно-растерно съревнование
• Компресиране на изображения и файлови формати
• Формат GIF
• Графики с назъбени краища срещу загладени графики
• Форматът JPEG
• Форматът PNG
• Форматът SVG
• Форматът SWF
• Изграждане на макети за уеб страници
• Обичайните софтуерни заподозрени
• Photoshop
• Fireworks
• Illustrator
• Flash
• Dreamweaver
• Табла за настроение: да дадем тон за песен
• Дизайнерски ресурси
• Хранилища за снимки и илюстрации
• Цифрова фотография и сканирани изображения
• Типография
• Четки на Photoshop
• Приспособления
• Шаблони за уеб дизайн
• Изграждане на шаблон за уеб страница от нулата
• Графичен дизайн на фон
• Намиране на вдъхновение: идеи за уеб дизайн
• Разработване на дизайнерски направления
• Работа на базата на скелетни диаграми
• Включване на множество дизайнери в работата по задачата
• Получаване на дизайнерско вдъхновение
• Получаване на идеи за визуален и интерактивен дизайн
• Кинематографски уеб сайтове
• Иновативен интерактивен дизайн
• Улавяне на опита на марката
• Проектиране на удобна за мобилни устройства версия на вашия сайт
• Нов поглед върху пикселите
• Опростяване на навигацията
• Намаляване на размера на файловете
• Хоризонтална и вертикална ориентация
• Използване на оформление с една колона
• Представяне на вашия дизайнерски шедьовър
• Изготвяне на онлайн презентация
• Представяне на вашите дизайни онлайн
• Изграждане на работещи и неработещи прототипи
• Създаване на впечатляващи печатни презентации
• В живи цветове: разпечатване на вашите макети
• Поставяне на вашата работа върху табла
• Представяне пред клиентите
• Клиентите са любители на "грозните патета"
• Ето ни отново: втори кръг

Създаване на крайния уеб сайт

• Създаване на презентационния слой
• HTML: лепилото, което държи страницата
• Надничане в изходния код
• Учене (заемане) от другите
• Мощни инструменти за редактиране на HTML
• HTML5
• Решение за мобилни устройства
• Алтернатива на анимацията
• Поддръжка за сензорни екрани
• Геолокация
• Мощно управление на съдържание
• DHTML, JavaScript, JQuery и Ajax
• CSS
• Как работи CSS
• Цветови градиенти, прозрачност и отражения
• Ефекти със сенки
• Заоблени ъгли
• Анимиращи ефекти
• Избор на платформа, управление на Платформа за разработване
• Управление на съдържанието
• Персонализирани срещу готови решения
• Свързване на вашия сайт към CMS
• Уеб анализ
• Google Анализ
• Какво можете да научите за вашия сайт?
• Наблюдение в реално време
• Къде щракват хората?
• Услуги срещу заплащане
• Оптимизация на търсещите машини
• On-page и off-page търсене
• Структура на електронния адрес и имена на файлове
• Отстраняване на дублиращи се електронни адреси на една и съща страница
• Изготвяне на карта на сайта специално за търсене
• Още SEO стратегии
• Естествено срещу платено търсене
• Входящо и изходящо свързване
• По-мощен уеб сайт
• Разширяване на функционалността на уеб сайтове
• Facebook Connect
• Twitter
• Disqus
• Google Maps
• Безброй приложни програмни интерфейси, от които да избирате
• Сайтове за електронна търговия
• Криптографски протокол Secure socket layer
• Портали за плащане
• Съвети относно дизайна на пазарска количка, които увеличават продажбите
• Персонализирани уеб страници с бисквитки
• Засичане на браузъри и местоположение
• Засичане на IP и GPS
• Адаптивен дизайн
• Производителност на глобални уеб сайтове

Частта на десетте

• Десет съвета за управление на вашия
• Представяне на вашата работа
• Изграждане на портфолио
• Представяне на вашата работа
• Разработване на предложение
• Спечелване на проекта
• Знайте колко да таксувате като независими консултанти
• Как таксуват агенциите
• Управление на очакванията на клиента
• Определяне на отговорностите на клиента за проекта
• Получаване на подписи от клиентите за ключовите моменти
• Управление на работния процес на уеб проекта
• Наемане и управление на подизпълнители
• Десет съвета за информационен и интерактивен дизайн
• Използвайте само от пет до седем основни категории
• Разработване на скелетни диаграми за всяко уникално оформление на страница
• Винаги етикирайте бутоните и иконите
• Не забравяйте за времето за изтегляне
• Осигуряване на обратна връзка "Намирате се тук"
• Осигуряване на лесно завръщане в началото
• Визуално разграничаване на нещата
• Един от тези бутони не е като другите
• Внимавайте с метафорите от реалния живот
• Използвайте умерено цветовото кодиране
• Десет неща, които могат да се объркат
• "Може ли да добавим само още едно нещо?"
• "Ние нямаме време за карта на сайта."
• "Клиентите искат ТОЗИ дизайн?"
• "За какво ви е потребителски тест, щом имате мен?"
• "Но аз съм сигурен, че мога да накарам тази нова технология да работи!"
• "Планираме за международна публика?"
• "Сайтът трябва да работи на мобилни платформи?"
• "Искате да кажете, че е необходимо да поддържаме сайта сега?"
• "Ох, забравихме да добавим анализи"
• "Ако го построим, те ще дойдат."