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

Стъпка

Част 1 от 4:

Създаване на основна структура

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

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

Изображение, озаглавено Планиране на уебсайт стъпка 2

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

Изображение, озаглавено Планиране на уебсайт стъпка 3

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

Изображение, озаглавено Планиране на уебсайт стъпка 4

4. Използвайте табела или борда на бюлетина. Това е първоначалният нискобюджетен метод за планиране, той ви позволява бързо да изтриете или преместите съдържанието си и да го пренасочите. Начертайте дизайн на хартия и ги свържете в последователност или начертайте верига на дъската. Чудесно за мозъчна атака.

Image озаглавен Планирайте уебсайт стъпка 5

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

Част 2 от 4:

Създаване на HTML-рамка

един. Създайте рамка (стр. Структурни схеми), за да помогнете за осигуряване на йерархия. HTML-Frame е BoneCloth бъдещ сайт, който използва само най-основните маркери и блокове за представяне на съдържанието. Той отговаря на въпроса: "Какво е на екрана и къде?". Форматирането и стилът се игнорират напълно в рамката.

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

Image озаглавен План на уебсайт стъпка 7

2. Опитайте сивия метод на кутията (сиво поле). Поставете съдържанието на страницата си в сивите полета с най-важното съдържание на самия връх. Блоковете са разположени в една колона, като най-важната част от съдържанието на страницата отгоре. Например, ако страницата е страница за компанията (за), подробностите за компанията могат да отидат в горния блок, последван от списъка на персонала, след това да се свържете с информация и т.н.

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

Image озаглавен Планирайте уебсайт стъпка 8

3. Опитайте да използвате програмата Wireframing. Има няколко програми, които могат да ви помогнат в процеса на създаване на интерактивен прототип на дизайн (wireframing). Размерът на знанието на изходния код варира от програмата към програмата. Ето някои от най-популярните програми:

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

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

Wirefy. Плаваща друга система"Атомен проект". Всички инструменти са достъпни безплатно за разработчици.

Image озаглавен План на уебсайт стъпка 9

4. Използвайте прост HTML маркиране. Добрата рамка може лесно да се превърне в действителното място по-късно. Не се безпокойте като цяло за стила в процеса на създаване на интерактивен прототип дизайн. Вместо това използвайте маркировката, която може лесно да се разбере и да се промени с малко усилия.

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

Image озаглавен Планирайте уебсайт стъпка 10

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

Част 3 от 4:

Създаване на съдържание

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

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

Изображение, озаглавено Планиране на уебсайт стъпка 12

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

Снимки.

Аудио

Видео

Теми или поток (Twitter)

Facebook интеграция

RSS (от английски език. Наистина проста синдикация - стандартизирана система за съдържание)

Новини на съдържанието на канала

Изображение, озаглавено Планирайте уебсайт стъпка 13

3. Изберете професионален фотограф. Ако добавите снимки към сайта си, тогава с професионална фотография първите впечатления от това ще бъдат много по-добри. Една добра снимка е повече от 20 лоша.

Работата на начинаещите фотографи ще бъде много по-евтина от произведенията на опитни професионалисти.

Изображение, озаглавено Планиране на уебсайт стъпка 14

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

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

Част 4 от 4:

Превръщайте идеите в сайта

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

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

Изображение, озаглавено Планиране на уебсайт стъпка 16

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

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

Image озаглавен План на уебсайт стъпка 17

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

Добавете това съдържание в оформлението, за да се уверите, че всичко изглежда добре заедно.

Image озаглавен План на уебсайт стъпка 18

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

Изображение, озаглавено Планиране на уебсайт стъпка 19

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

Навигация

Заглавия (

,

, И т.н.Чест

Параграфи

Курсив (курсив)

Удебеляване (удебелен)

Референции (активни, неактивни, плаващи)

Използване на изображение

Икони

Бутони

Списъци

Image озаглавен Планирайте уебсайт стъпка 20

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