Автор:
John Pratt
Дата На Създаване:
11 Lang L: none (month-010) 2021
Дата На Актуализиране:
7 Може 2024
Съдържание
Ако искате да създадете и създадете уебсайт, ще ви е много по-лесно да направите това, ако го планирате първо. Фазата на планиране позволява на разработчика и клиента да работят заедно, докато намерят формат и оформление, отговарящи на техните нужди. Процесът на планиране влияе върху избора на стил на уебсайта и несъмнено е най-важната част от уеб дизайна (главно за компаниите).
стъпки
Част 1 от 4: Създаване на структурата
Определете функционалността на уебсайта. Ако правите уебсайт за себе си, вероятно вече знаете отговора на това. Ако правите уебсайт за друго лице, компания или организация, ще трябва да разберете какво клиентът очаква от уебсайта и неговата функционалност. Каквото и да решите тук, ще се отрази на крайния продукт.
- Имам ли нужда от преден магазин? Имам ли нужда от потребителски коментари? Ще могат ли да създават акаунти? Ориентиран към статията на сайта? Образите? Всички тези и други въпроси ще помогнат за информиране на дизайна и структурата на уебсайта.
- Това може да бъде уморителен процес, особено за големи компании, с няколко души, участващи в проекта.
Създайте схема на карта на сайта Прилича на диаграма и показва как потребителите навигират от страница на страница. В този момент дори не ви трябват страници, а само общ поток от понятия. Можете да използвате компютърна програма за създаване на диаграмата или да я нарисувате на ръка на хартия. Използвайте тази схема на карта на сайта, за да покажете своите виждания за йерархията и свързаността на страниците на сайта.
Опитайте се да използвате карти. Популярен метод за групово използване е да използвате купчина карти, за да откриете идеалния подход на всеки човек. Вземете купчина карти (тези за счетоводство) и напишете основното съдържание на една страница на всяка карта. Помолете екипа си да организира картите по начина, по който те намират за най-полезни. Тази стратегия е чудесна за ситуации, когато си сътрудничите с други хора при създаването на уебсайт.
Използвайте хартия и табло или бяла дъска. Това е оригиналният метод за планиране на евтини цени и ви позволява да изтриете или преместите съдържание и бързо да реорганизирате всичко. Начертайте дизайна на парчета и хартия и свържете с линия или направете очертанията на бялата дъска. Страхотно за мозъчни атаки.
Използвайте инвентаризация на съдържанието. Тази опция е по-насочена към редизайн, отколкото към нови сайтове. Поставете всяко парче съдържание или страници в електронна таблица. Обърнете внимание на целите на другия и използвайте този списък, за да определите какво върви и какво остава. Това ще помогне за намаляване на излишъка и опростяване на процеса на препроектиране.
Част 2 от 4: Създаване на телена рамка на HTML
Създайте телена рамка, за да помогнете за втвърдяването на йерархията. HTML телена рамка е скелет на вашия бъдещ сайт, използвайки само най-основните маркери и блокове за представяне на съдържание. Той отговаря на въпроса "Какво става на всеки екран и къде?" Форматирането и стилът са напълно игнорирани в телена рамка.
- Тел рамката ви позволява да видите структурата и потока на съдържанието, преди да направите избор на стил.
- HTML телените рамки не са статични като PDF файлове или изображения и ви позволяват бързо да премествате блокове от съдържание, за да създадете нова структура.
- Една телесна рамка е интерактивна, което е добре както за разработчика, така и за клиента. Тъй като телената рамка е написана на обикновен HTML код, все още можете да я разгледате и да получите представа за това как работи движението между страниците. Това е нещо, което не може да бъде изразено чрез концептуален PDF.
Опитайте метода на Grey Box. Групирайте съдържанието на страницата си в сиви полета, като най-важното съдържание е в горната част. Блоковете са подредени в една колона, като най-важната част от съдържанието е на страницата в горната част. Например, ако страницата е страницата „Всичко“ за компанията, детайлите могат да отидат до върха, последван от списък на екипа, информация за контакт и т.н.
- Това не включва заглавката и долния колонтитул. Сивите полета са просто визуално представяне на съдържанието, което ще намерите на страницата.
Опитайте програма за създаване на телени рамки. Има няколко програми, които могат да ви помогнат в процеса на телена рамка. Количеството знания за програмиране варира от програма до програма. Някои от най-популярните са:
- Pattern Lab. Този уебсайт е специализиран в "атомен дизайн". Всяко парче съдържание се мисли като "молекула", която създава голяма страница.
- Jumpcharts. Това е уебсайт за планиране на уебсайт и също е услуга за телефрейминг. Той изисква платен абонамент, но ви позволява да създавате телесни рамки бързо, без да се притеснявате твърде много за кода.
- Wirefy. Това е друга система за атомно проектиране. Инструментите са безплатни за разработчиците.
Научете как да използвате проста HTML маркировка. Един добър телесен кадър може лесно да бъде превърнат в истински уебсайт по-късно. Не се притеснявайте за стила по време на процеса на телена рамка. Вместо това използвайте маркер, който може да бъде лесно разбран и обменен с много малко усилия.
- По-малко е повече с телената рамка. Целта е просто да се изгради структурата. Изгледът може да бъде коригиран по-късно с CSS и разширени маркировки.
Направете телена рамка за всяка страница на уебсайта си. Може да е изкушаващо просто да направя телена рамка и да кажеш „Готино, мога да го приложа на всички останали страници и това е“. Всъщност това ще генерира общ и скучен уебсайт. Отделете време за всяка страница с телесни рамки и скоро ще откриете, че всяка страница има своите организационни нужди.
Част 3 от 4: Създаване на съдържание
Пригответе малко съдържание, преди да започнете да изграждате уебсайта си. Ще бъде много по-лесно да видите как изглежда сайтът, ако имате истинско съдържание, а не само отметки. Не ви трябва много съдържание, но ще изглежда много по-добре при макетите, ако имате оригинални текстови изображения.
- Не е задължително да се нуждаете от съдържанието на статия, но поне трябва да имате заглавия.
Не забравяйте, че доброто съдържание е повече от текст. Интернет е много повече от прости текстове на уебсайтове. За да се откроите във вашата ниша, ще ви трябва разнообразие от различни видове съдържание, за да задържате вниманието и да привлечете посетители. Някои възможни съдържания, които трябва да имате предвид:
- Изображения.
- Audio.
- Видео.
- Потоци (Twitter).
- Интеграция с Facebook.
- RSS.
- Емисии на съдържанието.
Платете професионален фотограф. Ако включвате снимки на уебсайта си, първоначалните ви впечатления ще бъдат много по-добри с професионалните снимки. Една добра снимка е много по-добра от двадесет лоши снимки.
- Потърсете скорошните възпитаници на фотографията за по-евтини решения в сравнение с по-опитни професионалисти.
Пишете качествени статии. Съдържанието, написано на вашата страница, ще определи по-голямата част от вашия уеб трафик. Въпреки че не е нужно да се притеснявате твърде много за създаването на съдържание в този процес на проектиране, не ви пречи да мислите за това, тъй като ще се нуждаете от съдържание редовно, след като сайтът е онлайн.
- В допълнение към съдържанието на статиите има и писмени елементи, които ще ви трябват по време на процеса на изграждане на сайта. Това са информация за контакт, имена на фирми или нещо друго, което се използва на различни места в сайта.
Част 4 от 4: Преобразуване на концепцията в уебсайт
Стилизирайте глобалните елементи. Това са нещата, които се виждат на всяка страница на вашия уебсайт, като заглавката, долния колонтитул и менюто за навигация. Създайте много основен стил, така че да можете да видите как ще изглеждат всички страници. Това ще бъде много полезно, когато влезете в процеса на оформление.
- Не се притеснявайте твърде много за детайлите, но се опитайте да се доближите максимално до окончателния вид на заглавката.
Създайте основно оформление. Започнете да премествате вашите телени рамкови обекти, като ги извадите от колона и ги поставите на правилното място. Например, можете да преместите навигационния блок в лявата част на страницата и списък от заглавия вдясно.
- Продължете да експериментирате с оформлението с още няколко страници, преди да продължите. Нека другите го тестват, за да видят дали намират навигацията за органична.
Създайте макет. Използвайки програма като Photoshop, създайте макет на някои страници на вашия уебсайт. Използвайте оформлението, което сте определили като ръководство. Можете да работите много по-бързо в програма за редактиране на изображения и да оставите всичко както искате. Това ще ви позволи да използвате изображения като ориентир, когато дойде време за кодиране.
- Включете истинско съдържание в макета, така че всичко да е в хармония.
Заменете блоковете със съдържание. Започнете, като добавите вашето съдържание и елементи към страницата. Не се притеснявайте за стила все още: просто поставете всичко на правилното място. Това ще ви помогне да разберете дали промените в стила ви ще работят.
Създайте ръководство за стил. Това е съществената част от поддържането на сплотен уебсайт, особено за големи уебсайтове. Ако уебсайтът е за компания, която вече има визуална идентичност, той трябва да бъде включен в дизайна на уебсайта. Нещата, които трябва да се вземат предвид в ръководството за стил са:
Приложете този стил. След като сте решили стил и дизайн на вашия сайт, е време да започнете да го прилагате. CSS е един от най-лесните начини за реализиране на стил на страница.
