Уважаеми дизайнери,
Това се прави от години. Части са доставени в речи, а някои в писмен вид на различни дизайнери в продължение на дълъг период от време.
Винаги обаче съм се страхувал да го публикувам от страх, че ще засегне или дизайнера, или клиента, с когото работя в момента. Така че, преди да отида, бих искал да подчертая, че това не е конкретна жалба, а подробен списък от 18 години разногласия.
Работим заедно почти две десетилетия и всеки PSD файл, който ми изпратихте, имаше (повече или по-малко) същите проблеми. Простете ми тогава за непристойността да се опитвам да ви науча как да си вършите работата.
Не смея да ви уча на графика или естетика. Няма да се задълбочавам в типографията, четливостта или използването на празно пространство.
Вместо това бих искал да обясня как плодовете на вашия труд информират моите.
Бих искал да ви напомня какво е необходимо за възпроизвеждане на идеални за пиксели дизайни на уеб страница. Бих искал да ви кажа как вашето оформление на файла ще се използва за документация и как създадените от вас изображения ще определят използваните технологии - чак до самата основа на мащабируемост и нива на производителност.
Също така бих искал да покажа какво може да се направи бързо и лесно и какво ще генерира режийни разходи, които ще преминат през цялото производство.
И преди всичко бих искал да ви напомня това дизайн това, което създавате сега, ще се превърне в живо същество, което взаимодейства и реагира, което общува с хиляди различни хора, което трябва да преподавате и да се учите от тях по възможно най-простия начин. И за това, и за тях.
Проектиране за документация
Преди всичко бих искал да ви напомня това PSD файлове които произвеждате, са не само източникът на изображенията, които клиентът трябва да одобри, но и Техническа документация Y. изходни материали за разработчици. Така че, моля, запазете слоевете и групите си подредени, организирани и назовани .
Разработете своя дизайн. Създайте отделен файл с конвенциите, които сте използвали, или ги отбележете в скрит слой.
вид валутен риск
Кажете ми какви шрифтове сте използвали за какво. Кажете ми какви цветове, разстояния и контекст сте използвали. Трябва да го знам.
Също така трябва да знам дали екстраполатът е направил дизайна на определена характеристика.
Това, което се опитвам да кажа, е: ако изобщо е възможно създайте малко ръководство за стил за продукта, който проектирате.
За нас, когато добавяте стандартни текстови блокове - като заглавия - добавете правоъгълник зад тях, за да посочите пространството около тях, което трябва да ви позволява да ги поставяте последователно всеки път. Ако това е твърде много работа, посочете поне кой пример в документа е канон.
Не мога да ви кажа колко често намирам заглавия, които да се поставят на око, така че визуалното им поставяне не работи, но когато се измерват, те разкриват, че всяко има свое собствено пространство.
Същото важи и за съдържателните блокове. Ако имате списък с различните блокове със съдържание, моля, интервалирайте го последователно.
Ще ви разкажа повече в раздела на проектиране за content_, но не допускайте, че заглавията ви винаги ще бъдат на един ред и използвайте тази информация във файла.
кой модул може да каже колко време е отнело да се изпълнява кодът ви?
Продължавам да се натъквам на тези заглавия с размер 22px шрифт и 92px височина на реда (очевидно копирани и поставени от заглавието на основната страница). Избраната от вас настройка е подходяща, въпреки че визуално не променя експортирания файл.
Проектиране на технологията
Има две страни в това: Какво може да се направи Y. какво е подходящо за средата.
Докато бързо достигаме точката, при която всичко ще бъде технически възможно за разработване на уебсайт (все още мога да рисувам пиксел по пиксел, отколкото да използвам платно), куп от тези решения не те са готови за производство.
Фактът, че намирате пример, когато някой успешно се комбинира WebGL 3D с филтърна маска CSS размазване плюс за демонстрационна страница това не означава, че можете да използвате прозореца на една страница като пълен паралакс панел.
И ако наистина искате да вървите напред, моля, консултирайте се с вашия разработчик преди представяне на проекта за одобрение. В противен случай ще бъде трудно за клиента да се уреди.
Ако наистина искате да опитате кант и искате да го направите за забавление, моля, свържете се с мен частно. Обичам да създавам такива неща точно като теб. Просто не влагайте тези неща в бюджетен производствен проект.
Отвъд тези неща - отвъд тестването на границите на това, което може да се направи, опитайте се да бъдете чувствителни и разумни какво трябва да се направи .
Вие не сте графичен художник; вие сте повече от това, вие сте дизайнер.
Вие не само проектирате да изглеждате по определен начин, но и трябва да го проектирате така бягай , общуват Y. дръжте се по определен начин .
За да отидете на клишето, познато на дизайнерите навсякъде: Колко добър е един стол, ако никой не може да седне на него?
Трябва да включите скоростта на зареждане и скоростта на изпълнение и лекотата на използване във вашия дизайн, за да го направите дизайн вместо изображение.
Опитайте се да получите възможно най-много само с HTML и CSS.Опитайте се да получите възможно най-много само с HTML и CSS. Избягвайте да използвате хубави функции, налични във Photoshop. Не използвайте сместа! Не използвай Удебелен изкуствен Y. Курсив изкуствен .
Освен ако намерението на вашия елемент е изображение, не използвайте ни най-малко филтри - с изключение на най-простите сенки.
Не ме карайте да изчислявам или да избирам цветовете, защото имате смесени цветни запълвания. Моля, не използвайте фалшиви прозрачни изображения чрез наслояване, наистина се нуждая от прозрачно изображение на място.
Ако използваме интерфейс, като рамка ( Bootstrap , много от тези въпроси вече ще бъдат решени, за да се научи как се прави и как може да се модифицира. Не ходете да проектирате нещо несвързано.
Ако вашият дизайн не е в съответствие с това, което прави рамката, приложението не изпълнява дизайна. Вместо това в крайна сметка селективно ще заменим рамката, така че да не пречи на нашия дизайн и след това да я приложим от нулата. Натоварването се удвоява вместо наполовина.
И накрая, не използвайте повече от три шрифта - или варианти на шрифтове - на сайта. Ако имате нужда от шест различни тежести, всяка със собствени варианти на плъзгача и курсив, вече не проектирате за мрежата.
Проектиране за интерактивност
Това е огромно. И това писмо първоначално е написано изключително за тази тема. Наистина трябва да знаете и да разберете всички начини, по които потребителите и функционалността могат да си взаимодействат.
Нека започнем с най-простите неща: връзки.
Връзките нямат само две състояния.
В навигацията, която получавам, винаги се предлагат дизайни връзка Y. за активна връзка (действителна страница).
В други случаи обикновено предоставяте база и _ховер държави.
Ако искате да бъдете най-лесен за употреба, трябва да имате различни оформления за _ състоянията на основа, задръжте Y. фокусното ( посетен Y. активен те също са хубави за UX). А за навигация има връзка и активна връзка всички предишни държави .
О, и не смейте да промените оформлението на връзката между състоянията (различна ширина на границата, подложка и други подобни).
пенсионни общности с нестопанска цел
По същия начин, ако не изглежда като бутон, това е неоснователно. Точка. Попълването на вграден текстов елемент е караница и нерамкираният текстов фон никога няма да работи.
Тъй като ще използваме това на мобилни устройства, уверете се, че има достатъчно празно пространство между различните интерактивни елементи и това всеки hitbox бъдете достатъчно големи. Мисля, че минимум 42px на всяка ос е норма.
Начертайте невидим правоъгълник или скрит слой, показващ hitboxes ; Уверете се, че те не се припокриват и че потребителските взаимодействия са еднозначни.
Елементите на формата са още по-лоши.
Най-честият случай, който виждам, е с радио бутоните и квадратчетата за отметка. Стандартите са грозни! Така че, проектирайте своя собствена и ми дайте маркиран и немаркиран статус и помислете за завършената си работа.
Има обаче цяла многомерна таблица на състоянията чрез квадратче за отметка и всяко трябва да бъде визуално посочено на потребителя.
Имаме следните състояния:
- Преработен или не
- Задръжте курсора на не
- Фокусно или не
- Активирано или не
- Грешка или не
Всеки от тях може да се комбинира с останалите.
Disabled предотвратява някои комбинации (hover и focal обикновено са ирелевантни, когато са деактивирани), но не всички (отметката и деактивирането са напълно валидни и информационен статус за отметка). Така се оказваме с 16 включени и четири изключени състояния, като даваме общо поне 20 различни състояния. Например състоянията, които обикновено ми давате, са проверени-не-не-не-активирани и забранени-не-не-не-активирани в тази настройка.
Другите елементи на формуляра може да нямат непроверено преработено състояние, но може да са празни или непразни (показва текст на заместител). Те могат да имат и по-сложно информационно състояние, така че грешката или не може да бъде толкова сложна, колкото успехът за предупреждение за неутрална грешка.
Така че на всичкото отгоре той трябва да бъде задължителен или незадължителен, заедно с ясно дефинирани индикатори и оформление и дизайн на етикета, плюс помощ при въвеждане и текст за грешка.
И ако наистина искате да бъдете лесни за ползване, ви е необходим мръсен набор от девствени състояния, което показва, че потребителят никога не е предоставял данните или данните, които вече се съхраняват, или е бил модифициран, но все още не е съхраняван.
Проектирането за интерактивност е трудно. И ако искате да промените външния вид на радиобутоните, не го правете толкова леко с две състояния.Това, което казвам, е: проектирането за интерактивност е трудно. И ако искате да промените външния вид на радиобутоните, не се съобразявайте с две състояния.
как да кодирам в c++
Само една последна точка относно дизайна на интерактивността: решете как изглежда взаимодействието. Искам да кажа, че вие решавате кои инструменти да се използват за интерактивни елементи и не ги използвайте в нищо друго.
Не! Нямате право да използвате основния си цветен знак за посочване на връзки, особено ако използвате едно и също решение за подчертаване на важно съдържание!
Дизайн за съдържание
Съдържанието на всеки идеален дизайнерски елемент, пълен с lipum достатъчно е добре да представите на клиента изображение, за да получите одобрение за визуалния стил. Но дизайнът на съдържанието не започва и не свършва там.
След като имате приблизителна представа какво искате да направите с дизайна на вашето съдържание, не забравяйте, че работите с динамично съдържание.След като имате приблизителна представа какво искате да направите с дизайна на вашето съдържание, не забравяйте, че работите с динамично съдържание. Има два случая, които трябва да проверите за всяко съдържание:
- Ами ако има твърде много от него?
- Ами ако има твърде малко (или липсва изцяло)?
Вижте какво се случва, ако заглавието е абсурдно кратко или необичайно дълго. Как трябва да изглежда блокът със съдържание, ако липсват критични елементи? Ами ако няма изображение?
Ако няма съдържание за раздела на дадена страница, не можем да изтрием целия раздел - заглавие, съдържание и всичко - или трябва да запазим раздела и да видим нещо като: „Все още няма статии, моля, опитайте отново по-късно?“ Още по-добре: „Искате ли да получавате известия, когато пристигне това съдържание? Абонирайте се за нашия бюлетин!'
Вземете решенията! Тогава Проектирайте тези неща!
Ако проектирате емисия или съдържание, заредено от външен или динамичен източник, не забравяйте да включите всички грешки и известия. Всъщност вие проектирате страницата за известия за мета съдържание, за да покажете как изглежда на всички, и след това се придържате към конвенциите за проектиране, за да уведомите потребителя, в случай че нещо се обърка.
Избягвайте бутоните с фиксирана ширина и фиксирана височина на текстовите блокове. И ако не съм го казвал досега, ако смятате, че това винаги ще бъде един ред текст, грешите! Сега вижте най-добрия начин да направите многоредова .
Уверете се, че едно и също съдържание има същата структура.
Ако едно и също заглавие се вижда на няколко места, не подчертавайте удебелена дума в един и друг случай на друго място!
Всъщност той се опитва да избягва структури в рамките на пълноформатни заглавия. Освен това не разбивайте ръчно текста на едно място, а на друго място. Не разбивайте текста ръчно!
Тези неща могат да подобрят дизайна ви, но не забравяйте, че съдържанието вероятно ще бъде разрешено със CMS и лицето, което отговаря за документирането му, може да не вижда как изглежда, докато не бъде публикувано, или дори да не разполага с инструментите за ръчно прекъснете го или дайте формат на текста.
Проектирайте го със същите ограничения, които ще има окончателното съдържание - контейнери с фиксирана ширина и автоматичен текст на обгръщане на думи . Ако изглежда грозно така, дизайнът не е добър.
Проектиране за отзивчивост
Напоследък това измина дълъг път. Поне в случаите, когато наистина е проектиран да бъде мобилизиран. Все повече и повече сме оставяли Bootstrap да разбере.
Винаги обаче има няколко прости принципа, които трябва да знаете.
На първо място, вариантите за мобилни устройства и настолни компютри не са отделни страници. Знам, че знаеш. Те са просто отраженията на една и съща страница.
Това е същото като работата с подравнен вляво текст. Изречението не променя реда на думите или буквите само защото сте поставили малък контейнер.
Също така групите със съдържание трябва да се споделят във всички оформления. Когато добавяте колони, уверете се, че прекъсванията на колоните са последователни.
интернет на нещата умен дом
Също така, вашите конвенции трябва да следват една и съща структура за различни версии на страницата.
Което означава, че ако на работния плот има два еднакви елемента, те трябва да са идентични и на мобилни устройства.
О, и ако искате паралакс, предоставете фино изображение, което е достатъчно голямо за движение. Ако подберете или изрежете изображението, така че да е точно във файла, който клиентът показва, тогава няма какво да местя.
Изключения от дизайна
Разбира се, винаги са възможни изключения. Освен това те са необходими, за да може продуктът да бъде привлекателен и ефективен. Не ги добавяйте обаче в първата кутия по кутия.
Ако откриете, че решавате един и същ проблем с дизайна отново и отново и това не работи, особено ако всеки път избирате различно решение.
След като направите всичко по-горе, трябва да постигнете ефективен, стабилен и последователен (макар и донякъде скучен) дизайн. Сега е моментът да оживим малко нещата. Разглеждайки цяла страница, говорете с клиента, за да идентифицирате парични изстрели - елементите, които им осигуряват най-много пари.
Ние сме били работим заедно от години и нашите клиенти винаги са били доволни от крайния резултат.
Разбира се, че ще се побъркам, ако пропуснете някои от тези точки и когато използването на сложно оформление е оправдано, ще продължа да пиша за изобразяване на логиката в JavaScript, ако е необходимо.
Ще се намеся и ще оправдая допълнителната работа за клиента, ако е необходимо. От векове проектирам форми и интерактивност върху получените оформления, така че това няма да е проблем.
Надявам се само, след като прочетете това, можете да имате предвид някои от тези предложения следващия път, когато работим заедно. Надявам се те да повлияят на вашата работа и да дадат насоки, когато не знаете какво да правите. Бих искал да разберете, че връзката ни има значение за мен и че не съм написал това, за да ви нараня, а за да направим връзката ни по-добра.
С любов,
Вашият Front-End разработчик
