Как да проектираме уебсайт (със снимки)

Съдържание:

Как да проектираме уебсайт (със снимки)
Как да проектираме уебсайт (със снимки)

Видео: Как да проектираме уебсайт (със снимки)

Видео: Как да проектираме уебсайт (със снимки)
Видео: Python Web Apps with Flask by Ezra Zigmond 2024, Може
Anonim

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

Стъпки

Част 1 от 2: Как да проектирате вашия уебсайт

Проектиране на уебсайт Стъпка 1
Проектиране на уебсайт Стъпка 1

Стъпка 1. Определете дали искате да използвате създател на уебсайт

Уебсайтовете, създадени от нулата, изискват доста подробно разбиране на HTML кодирането, но можете лесно да създадете уебсайт, като използвате безплатна хостинг услуга като Weebly, Wix, WordPress или Google Sites. Създателите на уебсайтове са много по-лесни за използване от дизайнерите за първи път от HTML.

  • Ако все пак решите да кодирате свой собствен уебсайт, ще трябва да научите HTML и CSS кодиране.
  • Ако инвестирането на време и енергия за създаването на вашия уебсайт не ви звучи привлекателно, можете също да наемете дизайнер на уебсайт, който да създаде вашия сайт вместо вас. Дизайнерите на свободна практика могат да струват между 30 долара на час и над 100 долара на час.
Проектиране на уебсайт Стъпка 2
Проектиране на уебсайт Стъпка 2

Стъпка 2. Очертайте вашия сайт

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

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

Проектиране на уебсайт Стъпка 3
Проектиране на уебсайт Стъпка 3

Стъпка 3. Използвайте интуитивен дизайн

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

  • Опциите за навигация (например раздели за различни страници) трябва да се намират в горната част на страницата.
  • Ако използвате икона на меню (☰), тя трябва да е в горния ляв ъгъл на страницата.
  • Ако използвате лента за търсене, тя трябва да е близо до горната дясна страна на страницата.
  • Полезни връзки (например връзки към страницата „Информация“или страницата „Свържете се с нас“) трябва да се намират в долната част на всяка страница.
Проектиране на уебсайт Стъпка 4
Проектиране на уебсайт Стъпка 4

Стъпка 4. Бъдете последователни

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

  • Например, ако използвате изключително студени цветове за началната страница на вашия сайт, не прилагайте ярки, силни цветове на следващата страница.
  • Имайте предвид, че използването на силни или сблъскващи се цветове, особено когато цветовете се показват динамично (например движещо се), може да предизвика епилепсия при малък брой потребители на мрежата. Ако решите да използвате такива цветове на вашия сайт, не забравяйте да добавите предупреждение за епилепсия преди съответните страници.
Проектиране на уебсайт Стъпка 5
Проектиране на уебсайт Стъпка 5

Стъпка 5. Добавете опции за навигация

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

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

Проектиране на уебсайт Стъпка 6
Проектиране на уебсайт Стъпка 6

Стъпка 6. Използвайте цветове, които се допълват взаимно

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

Черно, бяло и сиво е добра комбинация, ако не знаете откъде да започнете

Проектиране на уебсайт Стъпка 7
Проектиране на уебсайт Стъпка 7

Стъпка 7. Помислете за използването на минималистичен дизайн

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

  • Много създатели на уебсайтове ще имат „минималистична“тема, която можете да изберете при настройването на вашия уебсайт.
  • Алтернатива на минимализма е „брутализмът“, който използва по -строги линии, ярки цветове, смел текст и минимални изображения. Брутализмът има по -малко последователи от минимализма, но в зависимост от съдържанието на вашия уебсайт, той може да отговаря по -добре на вашите дизайнерски нужди.
Проектиране на уебсайт Стъпка 8
Проектиране на уебсайт Стъпка 8

Стъпка 8. Направете уникален избор

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

  • Не се страхувайте да отслабвате тенденциите, като поставяте елементите на уебсайта асиметрично или използвате припокриващи се елементи, за да създадете многопластов външен вид.
  • Докато елегантните, остри ъгли и закръглените елементи (известни също като „базирана на карти“презентация) са по-неблагоприятни, отколкото заоблените, меки елементи.

Част 2 от 2: Как да увеличите ефективността на уебсайта

Проектиране на уебсайт Стъпка 9
Проектиране на уебсайт Стъпка 9

Стъпка 1. Възползвайте се от опциите за мобилна оптимизация

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

  • Уверете се, че бутоните (например връзки към сайта) са големи и лесни за докосване.
  • Избягвайте внедряването на функции, които не могат да се видят на мобилни устройства (например Flash, Java и т.н.).
  • Помислете за създаване на мобилно приложение за вашия уебсайт.
Проектиране на уебсайт Стъпка 10
Проектиране на уебсайт Стъпка 10

Стъпка 2. Избягвайте използването на твърде много снимки на страница

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

Най -общо казано, искате страниците на уебсайта ви да се заредят за по -малко от четири секунди

Проектиране на уебсайт Стъпка 11
Проектиране на уебсайт Стъпка 11

Стъпка 3. Добавете страница „Контакт“

Ще забележите, че почти всички утвърдени уебсайтове имат страница „Свържете се с нас“, която съдържа информация за контакт (например телефонен номер и имейл адрес); някои сайтове дори имат вграден формуляр за въпроси на тази страница. Добавянето на страница „Контакт“ще даде на зрителите на уебсайтове пряка комуникационна линия с вас, като по този начин ще добави решение към потенциалните разочарования.

Проектиране на уебсайт Стъпка 12
Проектиране на уебсайт Стъпка 12

Стъпка 4. Създайте персонализирана страница 404

Когато някой посети определена страница на вашия уебсайт, която или не е настроена, или не съществува, ще се покаже уеб страница „Грешка 404“. Повечето браузъри имат страница по подразбиране 404, но може да успеете да персонализирате вашата от настройките на създателя на вашия уебсайт; ако е така, не забравяйте да включите следните подробности:

  • Леко съобщение за грешка (напр. "Поздравления - намерихте нашата страница за грешка!")
  • Връзка към началната страница на сайта
  • Списък с често преглеждани връзки
  • Изображение или лого за вашия уебсайт
Проектиране на уебсайт Стъпка 13
Проектиране на уебсайт Стъпка 13

Стъпка 5. Използвайте лента за търсене, ако е възможно

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

Лентите за търсене също са полезни, когато вашата аудитория иска да търси общ термин, без да използва проба и грешка

Проектиране на уебсайт Стъпка 14
Проектиране на уебсайт Стъпка 14

Стъпка 6. Инвестирайте най -много време в началната си страница

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

  • Призив за действие (напр. Бутон за щракване или формуляр за попълване)
  • Лента с инструменти за навигация или меню
  • Примамлива графика (например една плътна снимка, видеоклип или малка група снимки с придружаващ текст)
  • Ключови думи, свързани с услугата, темата или фокуса на вашия уебсайт
Проектиране на уебсайт Стъпка 15
Проектиране на уебсайт Стъпка 15

Стъпка 7. Тествайте уебсайта си в множество браузъри на множество платформи

Това е изключително важно, тъй като различните браузъри могат да обработват аспектите на вашия уебсайт по различен начин. Преди да започнете да популяризирате уебсайта си, опитайте да го посетите и използвате в следните браузъри на платформи Windows, Mac, iPhone и Android:

  • Google Chrome
  • Firefox
  • Safari (само за iPhone и Mac)
  • Microsoft Edge и Internet Explorer (само за Windows)
  • Вграденият браузър на няколко различни телефона с Android (напр. Samsung Galaxy, Google Nexus и др.)
Проектиране на уебсайт Стъпка 16
Проектиране на уебсайт Стъпка 16

Стъпка 8. Продължете да актуализирате уебсайта си с възрастта

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

Основна помощ за HTML

Image
Image

Примерна уеб страница с HTML

Поддръжка на wikiHow и отключете всички проби.

Image
Image

HTML Cheat Sheet

Поддръжка на wikiHow и отключете всички проби.

Image
Image

Примерна проста уеб страница

Поддръжка на wikiHow и отключете всички проби.

Съвети

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

Предупреждения

  • Повечето създатели на сайтове са безплатни; обаче, ако искате да използвате свой собствен домейн (напр. „www.yourname.com“вместо „www.yourname.wordpress.com“), ще трябва да плащате месечна или годишна такса.
  • Избягвайте плагиата и спазвайте всички закони за авторските права: не добавяйте произволни изображения от мрежата или дори структурни елементи без разрешение.

Препоръчано: