Ако искате да проектирате и създавате уеб страници, този процес ще бъде много по -лесен, ако планирате предварително. Във фазата на планиране дизайнерът и клиентът могат да работят заедно, за да намерят формат и оформление, които да отговарят на техните нужди. Процесът на планиране влияе върху стила или стила на сайта, бихте могли да кажете, че това е най -важният аспект в уеб дизайна, особено ако е за бизнес цели.
Стъпка
Част 1 от 4: Създаване на основна структура
Стъпка 1. Определете функцията на уебсайта
Ако създавате личен сайт, вероятно вече знаете отговора. Ако обаче създавате сайт за друга организация, компания или лице, трябва да разберете какво искат и функционалността на сайта. Всичко, което посочите тук, ще влезе в сила, когато уеб страницата приключи.
- Изисква ли уебсайтът Storefront? Трябва ли да се правят коментари на потребителите? Ще се наложи ли потребителят да създаде акаунт по -късно? Ориентирана ли е статията на уебсайта? Или ориентиран към изображението? Всички тези и други въпроси ще ви помогнат при проектирането и проектирането на сайта.
- Този процес на планиране може да бъде изготвен в чертеж, особено ако е за голяма компания и много хора участват в създаването на този проект.
Стъпка 2. Създайте диаграма на карта на сайта (карта на сайта)
Диаграма на карта на сайта е подобна на блок -схема, показваща как потребителите преминават от една страница на друга. На този етап не се нуждаете от уеб страница, а само от общ поток от концепции. Можете да използвате компютърна програма за създаване на диаграми или да скицирате свои собствени на хартия. Използвайте тази диаграма, за да демонстрирате концепциите за йерархично подреждане и свързаност с уеб страници.
Стъпка 3. Опитайте метода за изготвяне на картата
Един популярен метод за групова уеб разработка е да се използват редица карти, за да се разберат очакванията на всеки. Вземете няколко карти с бележки и запишете основното съдържание на уеб страница за всяка поотделно. Подредете тези карти заедно с екипа си, за да намерите най -добрата концепция. Този метод е подходящ за използване, когато сътрудничите с други хора при създаването на уеб страници.
Стъпка 4. Използвайте хартия и дъска за обяви или бяла дъска
Това е оригинален метод за планиране с малък бюджет, можете бързо да изтриете или изместите съдържание и да промените потока. Начертайте вашия уеб дизайн на хартия, след това свържете хартиите с конец или нарисувайте линии на дъската. Този метод е много подходящ за използване при сесии за мозъчна атака.
Стъпка 5. Създайте инвентар за съдържание
Всъщност той е по -подходящ за използване при препроектиране на мрежи, отколкото в нови уеб дизайни. Вмъкнете всяко готово съдържание или уеб страница в електронна таблица. Запишете целта на всяко съдържание или страница, като използвате този списък, за да определите какво да премахнете и какво да запазите. Можете да опростите структурата на мрежата и да опростите процеса на редизайн по -късно.
Част 2 от 4: Създаване на основен HTML контур
Стъпка 1. Създайте каркас за установяване на йерархията на уеб страницата
Основният HTML шаблон е чертежът на сайта, който ще изградите, като използвате само най -основните тагове и примерно (блокове/шаблони) съдържание. Тази рамка отговаря на въпроса „Какво се вижда в мрежата и къде?“Форматирането и стилизирането не се изискват при създаването на този контур.
- Можете да видите структурата и диаграмата на съдържанието с основен контур, преди да изберете настройка на стил.
- Основните HTML шаблони не са статични като PDF файлове или изображения, можете бързо да плъзнете през примерно съдържание, за да създадете нови структури.
- Базовата рамка е интерактивна, което е от полза както за уеб разработчиците, така и за клиентите. Тъй като тази основна рамка е написана с прост HTML код, все още можете да я навигирате и да знаете как работи превключването на уеб страници. Това не може да се направи с PDF.
Стъпка 2. Опитайте метода Grey Box
Блокирайте или маркирайте съдържанието на вашата уеб страница в Grey Box, най -важното съдържание е в горната част. Сортирайте съдържанието в една колона. Например, ако страницата е „За компанията“, тогава най -отгоре е подробна информация за компанията, последвана от списък с персонал, след това информация за контакт и т.н.
Това не включва заглавни и долни колонтитули. Grey Box е визуално представяне на съдържанието, което ще се появи в мрежата
Стъпка 3. Опитайте основна програма за създаване на контури
Има различни програми, които можете да използвате в процеса на създаване на основна уеб рамка. Количеството код (език) за уеб програмиране, което трябва да овладеете, е различно за всяка програма. Някои от доста популярните програми включват:
- Pattern Lab. Този сайт е посветен на „атомния дизайн“, всяко съдържание се счита за „молекула“, която съставя по -голяма уеб страница.
- Скокове. Тази уеб страница предоставя уеб базирани услуги за планиране и рамкиране. Тези сайтове са платени и изискват абонамент, но можете да изграждате уеб рамки бързо, без да се налага да овладявате много код за уеб програмиране.
- Wirefy. Wirefy е друг сайт, който предлага „атомен дизайн“. Уеб разработчиците могат да получат инструмента безплатно.
Стъпка 4. Използвайте проста HTML маркировка
Добър основен шаблон лесно ще се преобразува в оригиналния сайт. Не мислете твърде много за уеб стилизиране по време на процеса на създаване на този шаблон. Използвайте маркиране, което може лесно да бъде разбрано и променено.
Една проста базова рамка е много по -добра. Целта на създаването на маркиране е изграждането на структура. Визуалният вид може да се регулира по -късно с CSS и разширено маркиране
Стъпка 5. Създайте основен контур за всяка уеб страница
Може да се изкушите да приравните всяка уеб страница с един основен план. Всъщност това само ще направи вашия сайт обикновен и скучен. Създайте различен контур за всяка страница, ще разберете, че всяка страница се нуждае от собствен дизайн.
Част 3 от 4: Създаване на съдържание
Стъпка 1. Подгответе съдържанието, преди да създадете уеб страница
Ще ви бъде много по -лесно да визуализирате уеб изгледа си, ако вече имате действително съдържание, вместо да използвате мостри или заместители. Не е нужно да имате твърде много съдържание, но макетът ви ще изглежда много по -добре, ако използвате копие на оригиналното изображение.
Не е нужно да разполагате с целия материал на статията, но поне трябва да има действително заглавие
Стъпка 2. Не забравяйте, че страхотното съдържание не е само текст
Интернет е много по -сложен от обикновена текстова уеб страница. Имате нужда от разнообразие от различно съдържание, за да създадете страхотен уебсайт, който да привлича и кани посетители. Например:
- Снимка.
- Глас.
- Видеоклипове.
- Уеб предаване или уеб поток (Twitter)
- Интеграция с Facebook
- RSS
- Уеб емисия
Стъпка 3. Помолете професионален фотограф за помощ
Ако искате да включите снимки във вашия сайт, първото впечатление, което ще направите от вашия уебсайт, ще бъде много по -добро, ако е изпълнено с професионална фотография. Една добра снимка струва повече от двадесет снимки с ниско качество.
Потърсете нов възпитаник на изкуството на фотографията като по -евтино решение от професионален фотограф, който е в бизнеса от дълго време
Стъпка 4. Напишете качествени статии
Писменото съдържание на уеб страницата ще определи размера на вашия уеб трафик. Въпреки че не е нужно да се притеснявате твърде много за създаването на съдържание в този процес на проектиране, не е болно да започнете да мислите за това, защото също така ще имате нужда от съдържание редовно, след като вашият сайт е стартиран и работи.
В допълнение към съдържанието на статията, има и писмени материали, които също трябва да имате в процеса на съставяне на уеб страница. Например информация за контакт, име на фирма или нещо друго, което ще се използва многократно на сайта
Част 4 от 4: Превръщане на концепциите в уебсайтове
Стъпка 1. Подредете основните елементи
Това подреждане на елементи се прилага за всяка страница на вашия сайт, като заглавки, бележки под линия и навигационни менюта. Настройте го в много прост стил, за да можете да проверите как изглеждат всички страници. Това е особено полезно, докато напредвате в процеса на уеб оформление.
Не се притеснявайте много за подробности, опитайте да визуализирате (визуализирате) как изглежда заглавката
Стъпка 2. Създайте просто оформление
Започнете, като изместите позицията на часовника от колоната на основния контур до действителното местоположение на страницата. Например, може да искате да преместите примерното навигационно меню вляво на страницата и списъка със заглавия вдясно.
Продължете да експериментирате с уеб оформления за няколко страници, преди да преминете към следващата стъпка. Позволете на другите да го разгледат, за да видят дали създаденото от вас оформление се чувства живо
Стъпка 3. Създайте макет
Използвайте програма като Photoshop, за да създадете макети или примерни страници на вашия уебсайт. Използвайте оформлението, което сте съставили като ръководство. Можете да направите макети по -бързо и да получите желаните резултати с програма за обработка на изображения. Резултатите от тези изображения могат по -късно да се използват като справка в процеса на писане на код за уеб програмиране.
Поставете действителното съдържание в макета, за да изглежда добре
Стъпка 4. Заменете примерната концепция с оригиналното съдържание
Добавете съдържание и елементи към уеб страници. Засега не се побърквайте с настройките за уеб стил, просто подредете всичко на правилното място. Това ще ви помогне да прегледате промените в уеб стила, които правите по -късно.
Стъпка 5. Създайте ръководство за уеб стил
Много е важно да се поддържа комбинация от стилове, особено за големи сайтове. Ако сайтът е предназначен за бизнес цели и вече има своя собствена марка или стил, това трябва да бъде интегрирано в дизайна на сайта. Нещата, които трябва да имате предвид при създаването на ръководство за стил на уеб страница:
- Навигация
- Бележка за главата
- Параграф
- Курсив
- Смел характер
- Връзки (активни, неактивни, задръжте курсора на мишката)
- Използване на изображения
- Икона
- Копче
- списък
Стъпка 6. Приложете уеб стила
След като намерите правилния стил и дизайн, приложете го. CSS е един от най -лесните начини за внедряване на стилове на уеб страница или в целия сайт. Вижте следните инструкции, за да разберете по -добре подробностите за използването на CSS.
