„Ето ги за лудите, за неудачниците, за бунтовниците, за създателите на проблеми, за кръглите колчета в квадратните дупки ... тези, които виждат нещата по различен начин - те не обичат правилата ... Можете да ги цитирате, да не се съгласите с тях, да прославите или хули ги, но единственото нещо, което не можеш да направиш, е да ги игнорираш, защото те променят нещата ... ' - Apple’s Мисли различно кампания, Стив Джобс, 1997 г.

През повечето време дизайнерите все още създават статични макети на екрани, използвайки традиционни инструменти за дизайн по време на процеса на проектиране на уебсайта. Но някои дизайнери предприемат гигантски скок и ги заобикалят направо да кодирате, изграждате и коригирате дизайни в браузъра и тествате техните проекти както биха изглеждали на хората в реално време. Дали те са лудите, неподходящите, бунтовниците?

Обикновено традиционният процес на разработване на уебсайт включва много фази, включително планиране, стратегия за съдържание, проектиране, изграждане на каркаси, създаване на прототипи, тестване, разработване, публикуване и т.н. Но по време на фазата на проектиране, може ли да има друг начин за създаване на „перфектни за пиксели“ отзивчиви дизайни на сайтове и изобщо да се заобиколят инструментите за проектиране?

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

Въпреки че не е необходимо дизайнерът да се превърне в експертен кодер, едно решение е дизайнерите да започнат да работят директно с кода, който управлява уебсайт. Дизайнери, които могат да разправят код само с малко HTML и CSS ще се окажат голям актив за всеки отбор и ще имат огромно предимство като цяло.

Защо? Когато ангажирате отзивчив проект за дизайн на уебсайт с всичките му сложности, дизайнери обикновено нямат време да създават статичен дизайн на един компонент (да речем горен или долен колонтитул) в 10 различни резолюции и изгледи. Дори ако проектират само най-популярните устройства, те пак ще трябва да вземат предвид 4-5 екрана с различни пропорции, плътност на екрана и размери на екрана. Малка меко казано не малка задача.

Решаване на предизвикателствата при дизайна на уебсайтове с писалка и хартия първо

Нека разгледаме различен подход и дизайн на уебсайта.

Първата фаза започва с въпросник за клиента, който се интересува от общите цели на проекта от гледна точка на бизнеса, целевата аудитория, стратегиите за преобразуване, различни очаквания за изпълнение , и така нататък. Това се прави преди стартирането на действителната фаза на проектиране, за да се разберат по-добре нуждите на клиента и цялостния проект и за да бъде по-ефективен по линия.

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

Това помага при дефинирането на терминологии, ключови думи и процеси. В зависимост от сложността на проекта е добра идея да направите няколко сценария и потребителски потоци - обикновено бордови поток, търсене и навигация в даден сайт или поток „добавяне в количката“ и плащане, ако това е сайт за електронна търговия.

Кадриране и прототипиране

Прототипирането е следващата фаза в процеса на проектиране на уебсайта. Изграждане бързо телени рамки да поговорим за оформлението на страницата, функционалностите и как страниците на сайта ще изглеждат на различни устройства е добро начало. Не е нужно много време за изграждане на десетки рамки от различни шаблони и компоненти. От тях може да се създаде прост прототип на уебсайт и в зависимост от сложността на проекта, инструменти за прототипиране като InVision , Adobe XD , Balsamiq , Moqups , или Axure може да се използва.

Табла за настроение и инвентарен интерфейс

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

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

Инвентарният списък е изчерпателна колекция от частици, които съставят вашия интерфейс.

Брад Фрост

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

Проектиране в браузъра

„Проектиране в браузъра“ е термин, който стана популярен с възхода на адаптивния уеб дизайн. За да се сведат до минимум часовете, прекарани в дизайнерски програми като Скица , дизайнерите бяха призовани да преместят фазата на проектиране в браузъра и да използват CSS за оформление и стил. Този подход към дизайна на уебсайта се оказва по-ефективен, тъй като изрязва много стъпки.

Като се фокусираме върху HTML макета и тестваме дизайнерски идеи „в браузъра“ с CSS, обикновено се отделя време за създаване на статични макети на страници в други инструменти за проектиране като Sketch. Това е добра идея за дизайнери да се сдобият с добър редактор на код и да измислят добър метод за опресняване на браузъра, за да могат да виждат промени в реално време. Възвишен текст и Codekit например са чудесна комбинация.

HTML и CSS , структурирани такива, каквито са, принуждават ви да мислите за модели и да ви държи под контрол. По-лесно е да мислите за модулност, когато изграждате HTML компоненти, които могат лесно да се копират, дублират и пълнят с динамични данни, като същевременно се запазва същата структура. Ако искате да създадете конкретна модификация, трябва изрично да насочите този елемент или да добавите друг CSS клас.

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

С една CSS декларация можете да промените подплънките на бутоните за по-добри цели за докосване и да тествате директно на a мобилен телефон , таблетка и десктоп. Това не е лесно да се направи във Photoshop или Sketch, тъй като другите елементи не са наясно един с друг в оформлението и трябва да реорганизирате обектите всеки път, когато преоразмерите нещо.

Искате ли да изпробвате различна цветова схема на заглавката? Работейки само с няколко реда CSS код, промените се виждат незабавно във всички HTML шаблони, на всички устройства и екрани. Този вид гъвкавост не може да бъде емулиран лесно, когато имате 20 статични макета. Разбира се, можете да използвате „символи“ в Sketch или Adobe XD за многократно използваеми компоненти, но те не са толкова гъвкави като CSS.

На тази фаза ще трябва да се вземат няколко технически решения. Въпросите, на които ще трябва да се отговори, са:

• Ще използвате ли CSS препроцесор ? (препоръчително)
• Какъв тип на отзивчива мрежа ще използвате за оформлението?
• Налични ли са шрифтовете, които искате да използвате? Клиентът има ли бюджет за първокласни уеб шрифтове или ще се върнете към използването на наличните безплатни уеб шрифтове ?
• Ще използвате ли многоцветни или едноцветни икони? Ще варира ли размерът в целия сайт? След това разчитате ли на изготвени по поръчка икони или на вече съществуващ пакет от икони? Какви размери ще са необходими на вашите икони?

Проблемът с шрифтовете и отзивчивият уеб дизайн

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

Има много онлайн инструменти за избор и тестване на шрифтове и изпробване на комбинации от шрифтове. На Typetester и Typecast могат да бъдат намерени и тествани различни шрифтове от различни услуги и леярни. Когато работите с определена услуга за абонамент за шрифтове като Азот или Fonts.com , дизайнерите могат да генерират шрифтове и да тестват директно шаблоните на своите страници. Генерирането на пакет Typekit с нови шрифтове е лесно и бързо и лесно можете да видите как конкретни шрифтове ще повлияят на производителността на уеб страниците.

Икони, които отговарят на стила на марката

Ако рисувате по поръчка икони , размерът, мрежата и стилът ще трябва да бъдат дефинирани. Работя в Илюстратор , всяко монтажно поле ще представлява една икона, например. Иконите могат лесно да бъдат експортирани от Illustrator като SVG или PNG, които по-късно могат да бъдат превърнати в иконен шрифт с услуги като Icomoon . Препоръчва се използването на векторни икони (SVG), тъй като векторите не зависят от разделителната способност, така че няма опасения относно това как се показват на екрани с висока разделителна способност (Retina).

Ръководство за стил и CSS, за да поддържате процеса на проектиране на уебсайта под контрол

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

Компонентите на потребителския интерфейс могат да бъдат неща като разбиране на страници, списък с продукти, галерия с изображения, модални прозорци, елементи на формуляри и др. И се използват като градивни елементи за шаблони. Поддържането на всичко на едно място е наистина удобно, когато е време да тествате изграждането на конкретен UI компонент.

С CSS е най-добрата практика да разделяте стиловете на компонентите в отделни файлове. Например, стилът на пагинация ще бъде в _pagination.scss, елементите на формата в _form.scss и всички тези файлове ще бъдат включени в един SCSS файл с други файлове (променливи, миксин и др.).

Въпреки че style.scss може да се състои от десетки „малки файлове“, когато няколко души работят по един и същ проект, по-лесно е да следите промените (независимо дали използвате контрола на източника или не), ако всичко е разделено на по-малки парчета. Важно е да продължите да поддържате ръководството за стил, след като проектът за дизайн на уебсайта е в производство, тъй като екипът ще трябва да следи всеки компонент на сайта.

Използване на таблици със стилове - Модулен CSS

От гледна точка на развитието има много подходи за писане на модулен CSS. Най-известни са SMACSS (Мащабируема и модулна архитектура за CSS), ДОБРЕ (Блок, Елемент, Модификатор) и OOCSS (Обектно ориентиран CSS). Има доста голяма сума за учене, дори ако в крайна сметка развиете свой собствен подход. В този момент трябва да имате хубава колекция от компоненти на потребителския интерфейс и уеб страници, които ще ви позволят лесно да създавате нови уеб страници. Можете да копирате и поставяте елементи от ръководството за стил и да ги пренареждате при необходимост.

Тъй като всичко е модулно, не е нужно да се притеснявате за последователност на дизайна и кода; но не забравяйте, че ако коригирате UI компонент за цялата система, ще трябва да актуализирате ръководството за стил с промените (или да добавите новия компонент). За да поддържате всичко организирано, най-добре е да използвате някакъв подход за шаблониране / автоматизация при работа на уеб страници като Глътка или мрънкане .

Какво следва? Проектиране в браузъра

Сега имате централно хранилище на UI компоненти, всеки елемент документиран и уеб страници, изградени от тези компоненти. От този момент нататък е повече от вероятно това дизайнери вече няма да се налага да отварят любимите си инструменти за проектиране, тъй като по-голямата част от „дизайна“ ще бъде направена директно в кода и предварителен преглед в браузъра.

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

Когато използвате персонализирани уеб шрифтове, как добавянето на повече тегла на шрифта ще повлияе на ефективността на зареждането на страницата? Можем да тестваме ефективността на уеб страница в процес на работа, като използваме услуги като WebPageTest , и да вземат информирани решения относно действителните резултати. Определено не можем да направим това във Photoshop или Sketch.

Работата с HTML и CSS и работата в браузъра може да не е за всеки дизайнер по време на процеса на проектиране на уебсайт. Но ако дизайнерите наистина се интересуват от това как изглежда тяхната работа на различни устройства и размери на екрана, те трябва да се уверят, че тя е идеална всеки път. Нещо, което изглежда невероятно като статичен макет на дизайн, може да изглежда по-малко от желателно, когато се гледа в уеб браузър на мобилно устройство. Би трябвало да се докоснат до разумни дизайнери да създават и тестват уеб дизайни в среда, в която всички ще ги виждат ... в браузъра.

• • •

Допълнително четене в блога за дизайн на ApeeScape:

• Отзивчив дизайн - най-добри практики и съображения
• Как да проектираме ефективна целева страница
• Крайното ръководство за уебсайт за електронна търговия
• Основите на редизайн на уебсайтове - казус
• Движещи сили на дизайна - казус за редизайн на уебсайтове

Разбиране на основите

Какъв е процесът на изграждане на уебсайт?

1. Изберете уеб хост 2. Регистрирайте име на домейн 3. Планирайте сайта (тип, навигация, съдържание) 4. Проектирайте и изградете сайта 5. Публикувайте сайта 6. Популяризирайте сайта 7. Поддържайте сайта.

Колко време трябва да отнеме проектирането на уебсайт?

Най-общо, тъй като зависи от обхвата, типичен сайт (50-100 страници) може да отнеме приблизително 14 седмици (откриване 3 седмици, дизайн 6 седмици, разработка 5 седмици). Обикновена страница с 10-15 страници, дизайн по поръчка ще отнеме около 4-6 седмици.

Как да започна да проектирам уебсайт?

Преди да влезете във фазата на проектиране: 1. обмислете и проучете (напр. Целева аудитория, творческа насока, цели, бюджет, график). 2. Съдържанието стимулира дизайна, така че мозъчна атака. 3. Потвърдете техническите изисквания. 4. Разработете контур. 5. Създайте телени рамки, за да определите разположението на елементите.

Как се занимавате с проектиране на уебсайт?

Откритие: 1. Проучване (напр. Целева аудитория, творческа насока, цели, бюджет, времева линия). 2. Мозъчна буря. 3. Потвърдете техническите изисквания. 4. Разработете контур. Дизайн: 1. Създаване на телени рамки за определяне на оформлението 2. Разработване на визуални процедури (напр. Дъска за настроение, макети на Photoshop, HTML) 3. Творчески отзиви със заинтересованите страни.

Как структурирате уебсайт?

Добрата структура на сайта се равнява на по-добър UX. Конвенционалната структура на сайта е от решаващо значение за SEO и използваемостта. Обикновено оформен като пирамида, той трябва да има ясна навигация и да има предвид потребителя: 1. Начална страница 2. Раздели 3. Подкатегории 4. Отделни страници и публикации.

Как планирате оформление на уебсайт?

1. Изберете тип оформление, като вземете предвид обхвата на устройствата, използвани за преглед на сайта. 2. Определете структурата с помощта на карта на сайта. 3. Идентифицирайте потока на навигация.