Получете идеалното оформление на уебсайта в 27 стъпки

Страница 1 от 2: Оформление на уебсайта: Първи стъпки и дизайн на работния процес

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

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

Все още търсите домакин? Разгледайте нашето ръководство за най-добрите услуги за хостинг на уебсайтове и най-добрите строители на уебсайтове точно сега. И тук не е разгледано, но не забравяйте страниците си за грешки! Разгледайте нашия избор на най-добрите 404 страници за вдъхновение.



Приготвяме се да започнем

01. Определете какво означава успех

човек с лаптоп

Стигнете до корена на целта на вашия дизайн

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

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

02. Разберете текущия сайт

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

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

03. Рано споделяйте дизайни с клиенти

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

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

Работен процес на проектиране

04. Първо оформление за справяне

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

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

05. Започнете да скицирате рамка от най-високо ниво

Оформления на уебсайтове: UX скица

Основен каркас ще ви помогне да структурирате оформлението (щракнете върху иконата горе вдясно, за да го увеличите)

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

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

06. Добавете решетка

мрежи на различни екрани

Пример за мрежа от 978 с базова линия 10px

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

За да разберете как да направите това, разгледайте това ръководство създаване на мрежа, която се адаптира към всички размери на екрана .

07. Изберете вашата типография

Оформления на уебсайтове: типография

Основно правило е да използвате не повече от два различни шрифта в оформлението на уебсайта

Изследването на различни шрифтове и цветове е част от фазата на откриване на проект. Като цяло бих препоръчал да не се използват повече от два различни шрифта в уебсайт, въпреки че това наистина зависи от неговото естество. Изберете шрифт, който да се чете лесно за големи парчета текст, и бъдете по-игриви със заглавия и призиви за действие. Търсите вдъхновение? Разгледайте нашия обзор на перфектни сдвояване на шрифтове или списък на безплатни шрифтове . Не се страхувайте да използвате големи шрифтове и бъдете креативни и последователни, когато използвате типография.

08. Изберете вашата цветна тема

Оформления на уебсайтове: цветове

Инструменти като Color Hunt са създадени, за да ви помогнат да изберете палитра

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

Важно е да ги прилагате последователно в оформлението на уебсайта, в зависимост от функционалността на всеки елемент. Помислете за оформлението на сайтове като Facebook, Twitter, Quora и Vimeo. Освен потребителския интерфейс не трябва да има никакви цветови ограничения за илюстрации или графични детайли, стига те да не пречат на функционалността на компонентите.

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

09. Опростете оформлението

Оформления на уебсайтове: Начална страница на B-макара

Обикновените оформления са по-лесни за навигация

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

В действителност не трябва да има твърде много призиви за действие на дадена страница - всичко трябва да води до последното „Какво мога да направя тук?“

Microsoft изтече 12-дневни сделки

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

10. Прецизирайте всеки компонент

Microsoft Music дизайн

Клаудио Гулиери е работил по дизайна на потребителския интерфейс в Microsoft Music

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

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

11. Разходете клиентите през вашите решения

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

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

12. Мислете в движение

уебсайт за самотна планета

Движението е от съществено значение при проектирането на интерактивни преживявания

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

13. Прототип, прототип, прототип

сайт за самотна планета на мобилно устройство

Прототипирането е най-добрият начин за тестване на взаимодействията

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

Следваща страница: Дизайн подход и завършване

  • 1
  • две

Текуща страница: Оформление на уебсайта: Първи стъпки и дизайн на работния процес

Следваща страница Оформление на уебсайта: Дизайн подход и завършване