Изработка на сайтове със собствен стил

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

Цели

Стиловите правила произхождат от света на печатните издания - например, всеки вестник има свои. А концепцията се е доказала като изключително приложима и в уеб проекти. Основното,както и в печатните издания, е съдържанието. Целта на стиловите правила е да осигуряват яснота и цялостност на това съдържание и да гарантират, че то звучи с един и същи тон. Фантастичен пример за стилови правила на уеб сайт са тези на BBC Global Experience Language, те надграждат глобалния визуален език на BBC, тяхното въвеждане може да бъде проследено чрез блога на Пол Робърт Лойд на gelled.info.

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

Като дизайнери на взаимодействието често правим това, след като потребителският интерфейс е завършен и сайтът е готов за реализация. Но този модел е доста рискован. Дали тази ситуация Ви звучи познато? Имате перфектно оформен дизайн, изграден във Photoshop Или Fireworks. Всеки пиксел е там, където му е мястото, височината на редовете е перфектна, и цветовете са отлично съчетани. Чудесно! Но ако не Вие изработвате уеб сайта, как ще предадете всеки елемент от Вашия дизайн на компания, която ще го реализира, или дори на друг вътрешен отдел с фронтенд разработчици?

Помислете за всички важни дизайнетски решения, които сте взели до този момент. Тази фина еднопикселна графитеносива линия, която перфектно завършва полето за съдържание с прозрачност 60%. 20-пикселното уплътнение, 40-пикселното поле...тоест всичко.

Важността на хармонията

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

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

Всички елементи на интерфейса трябва да имат поне една обща черта: хармоничност. Те трябва да излъчват и въплъщават същината на дизайна, който е бил създаден и е станал част от по-мащабна система за дизайн. Хората, използващи Вашия сайт, дори - или специално - на различни устройства, би трябвало да го възприемат така, сякаш всичко е едно цяло. Както казва Нейтън Борър, който през 2009 написа чудесна публикация за хармонията в интерфейса (nathanborror.com): „Хармоничността в интерфейса, ако бъде реализирана правилно, трябва да остане незабелязана“. Бих стигнал дотам да заявя, че тя би трябвало да създава удоволствие по такъв начин,че потребителят дори да не знае защо усеща такова голямо удоволствие.

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

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

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

  • Стилови образци
  • Глобални решетки
  • Мрежови рамки
  • Платно за интерфейсна хармония, което се развива по време на проекта

Всичко за комуникацията

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

Марк Боултън го формулира добре в публикацията в блога си, озаглавена "A Richer Canvas": "Убеден съм, за да създаваме хармонично оформление за уеб - без значение на какво устройство, е необходимо да се отърсим от идеята, че визията трябва да е първа. Необходимо е да обърнем нещата наопаки и да създваме оформление от съдържанието навън." С други думи, необходимо е да започнем създаването на стиловите си правила с по-горните елементи. Ако се заставите да мислите по-рано за дизайна си на глоблано ниво, ще откриете, че той е станал по-хармоничен.

Досега установихме, че в разясняването как да се реализира дизайнът, стиловите правила би трябвало да започват с обектите от най-високо ниво, след което да се върви към по-детайлни елементи или спрайтове. Звучи ли Ви познато отнякъде? Да, точно като CSS (каскадните списъци със стилове, ключова за този подход е последователността - ако предпочитате, може да наречем този метод каскадни стилови правила.

Каскадни стилови правила

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

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

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

  1. Общ преглед
    Кратко обяснение на проекта, Вашият подход и Вашето решение. Това е шансът да предадете някои основни насоки и за какво хората би трябвало най-общо да внимават. На този етап можете зададете тона и звученето на сайта. Това е и мястото, където можете накратко да представите стратегията на съдържанието в проекта.
  2. Oоформление
    Вашата решетка, общо позициониране на оформлението и разположението на блоковете. Как се позиционират определени глобални елементи, какво е хоризонталното свободно място и как се работи с колоните (ако има такива) - това са все въпроси, ма които да отговорите тук. Тук също би трябвало да бъдат включени вашите мрежови рамки.
  3. Брандинг
    Цветовата палитра, глобално брандираната графика и ограниченията на марката се разглеждат в този раздел.
  4. Типография
    Това не е мястото, където разглеждам конкретните размери на шрифта. Тук само бих обяснил кои шрифтове се използват и защо са избрани, бих осигурил някои примери за реализацията, за да предложа контекст за предстояща конкретика.
  5. Навигация
    Текстови връзки, основна навигация, падащи списъци, поднавигация, бутони, поле за търсене... почти всичко, което позволява на потребителя да се премества в сайта си, би трябвало да бъде разгледано тук. Започваме да навлизаме в много по голямо ниво на детайлност. Цветове на връзки, обработка, декорации на текста и така нататък би трябвало да бъдат описани тук. Помнете, за вас това може да изглежда ясно, но за другите хора, работещи по проекта да може да не е толкова очевидно.
  6. HTML елементи
    Заглавия, (h1, h2, h3), списъци, поясняващи подзаглавия, текст на бутоните, форми, набори от полета, таблици и така нататък. Чудесно е да имате изчерпателен списък за всеки проект, за да гарантирате, че сте взели всичко предвид. Отново, наличието на последователна система ще ви спести времето и главоболията като премахнете нуждата да правите нещо неколкократно за проекта.
  7. Медийно съдържание
    Като всеки съвременен дизайнер, вероятно и Вие сте включили различни типове медия съдържание във Вашия дизайн. Какви са пропорциите на графиката и видеото в сайта? Дали сте използвали стандартно съотношение? Има ли настройки за кеширане на изображенията, които е необходимо да вземате предвид, базирайки се на CMS, която клиентът ви ще използва? Добре, последното беше малко твърде технически, но се случва в повечето проекти, по които работя, така че винаги го имам предвид.
  8. Елементи
    Тук е мястото, където наистина навлизате в най-големи подробности - и е необходимо да стигнете надълбоко, за да приключите. Ключът е в детайлите. Всяка модификация, която не би могла по подходящ начин да бъде разгледана в предишните седем раздела, трябва да бъде описана тук. Как ще се работи с различните блокови елементи, когато е намирате в уникални ситуации? Ами тези реклами в страничната лента - или страницата с резултати от търсенето, показана след неуспешно търсене? Как ще изглеждат коментарите, когато са нишковидни или линейни? Как ще изглеждат и функционират фотогалериите в сайта? И на този етап е важно да потърсите възможни повтарящи се елементи или модели и да ги опишете.
  9. Платно за интефейсна хармония
    В същността си това е едно огромно платно или HTML страница, което демонстрира всеки елемент с неговото състояние. Ако можете да включите елементи от кода или да ги добавите с развитието на проекта, това е от голяма полза. Целта на този раздел на правилата е двойна: бърза справка за разработчиците, откъдето те да вземат елементи за имплементацията, и място, където да прегледате, за да се уверите, всички елементи се вписват в перфектна хармония.
  10. Документи за потребителско взаимодействие
    Това е малко общо заглавие, но и областта за обхващане също е много широка. Важно е да включите основните достигнати резултати, които са били получени по-рано в проекта, например като карта на сайта, мрежова рамка, скрийншотове на прототипи с връзки към тях, ако те вече са онлайн, както и различните групи потребители. Често тези по-рано постигнати резултати са спомагали и продължават да спомагат за дефинирането на функционалността, целта и взаимодействието в сайта.

Използвайте стиловите правила

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

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

Включете документация във Вашите PSD файлове чрез слоеве и помнете, че Вашите решения може да не са очевидни за другите. Никой не може да чете мисли - това е добра мантра за потребителско взаимодействие, която би трябвало да приляга навсякъде в нашата професия. Стандартите и общоприетите практики не съществуват, за да Ви пречат да измисляте нови решения. Те са налице, за да Ви помогнат да решите какво е добра идея, и какво не е. В книгата си Don't make me think Стив Круг казва, че всички общоприети практики започват съществуването си като нечия блестяща идея. Така че по правило общоприетите практики стават такива само ако работят добре. Използвайте ги.

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

Гледната точка на дизайнера

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

  • За кого са тези правил?
  • За какво ще се използват те?
  • Как хората ще преглеждат документа - дали е подходящ за печат, или само онлайн?
  • Кой носи отговорност

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

Създаваме нашите указания чрез Adobe InDesign, тъй като той ни дава възможности за публикуване като динамична страница със съдържание, разделяне на страници и показалци, както и стилове за символи и абзаци.

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

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

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

  • Уверете се, че получавате одобрение от клиента за страницата със съдържанието, преди да започнете.
  • Пишете ясно и сбито, като избягвате техническите понятия.
  • Включете пример за добра и лоша реализация.
  • Ясно маркирайте Чернова на работните си документи, така че те да не се окажат в публичен достъп.
  • Винаги проверявайте правописа.

Стюарт Макмормис, компания Realise Design.

Гледната точка на уеб разработчика

Защо стиловите правила за толкова важни? Очевидно, като уеб разработчици изключително много се гордеем с това, което създаваме. Но без значение колко искаме да демонстрираме нашата компетентност и опит, важно е всеки, който е необходимо да прави промени в сайта в бъдеще, да не бъде принуден да чете колко много усилия сте положили, за да накарате навигацията да се регенерира в IE6. Те просто е необходимо да знаят как да направят корекциите си колкото се може по-бързо и безболезнено.

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

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

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


Рос Ангъс, Realise Digital.

Отзивчив дизайн

Текстът от 2010 г. на Итън Маркът в A List Apart дефиниращ понятието отзивчив уеб дизайн промени нещата за много от представителите на индустрията. Всъщност за мен това е една от по-въодушавяващите промени, на които съм станал свидетел в уеб дизайна. Толкова много възможности, толкова по-близо до концепцията за единен уеб; потенциално по-труден за документиране по стандартен начин. Именно там стиловите правила за HTML, CSS и Javascript наистина изпъкват.

Като уеб дизайнери, можем да дадем ясна насока чрез пример. Много сайтове за чудесен пример за отзивчив дизайн, като колекцията ма mediaqueries.es (както и сайтът, на който сте в момента :-).

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

Първата стъпка би трябвало да бъде да четете колкото може повече за отзивчивия уеб дизайн. Има много отлични текстове, но любима ми е излязлата наскоро книга на Итън Маркот, озаглавена Responsive Web Design.

Втората стъпка е да приложите концепциите към Вашия дизайн и документация. Това върши работа за печатни или HTML стилови правила за уеб сайтове. като цяло, вместо да заявявате, че нещо е необходимо да бъде широко 300 пиксела в 940-пикселен контейнер (например второстепенна характеристика), бихте приложили отзивчива формула цел/контекст = резултат. Така че в този случай това би било 300/940 = 0.31914894. Това не е твърде приятна цифра, но не се притеснявайте. Оставете я, както е, тъй като браузърът може да се справи с нея, желаем имплементацията на нашия дизайн да бъде толкова точна, колкото е възможно. Така че, когато документирате това, просто запишете width: 31.914894% /* 300px/940px */.

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

Има още доста неща, които да обмислите за отличен отзивчив уеб дизайн, но това е материал на друга тема. Препоръката ми е да прочетете книгата на Итън Маркот,след което просто да експериметирате.


Стив Фишър. Списание .net, брой 43