30 Невероятно прости уеб страници

Някои от най-известните страници са много претоварени с информация, но аз предпочитам обратното: простите.

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

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

Кийн Ричмънд

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

Връзка към мрежата: Keanrich mond

Алиса неприятна

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

Връзка към мрежата: Алиса неприятна

Джонатан Огдън

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

Връзка към мрежата: Джонатан Огдън

сипка

Финч вече отива на други места, за да си играе с типография и такива цветове, които обозначават елегантност и мъдрост на това, което прави. Само с няколко елемента той оставя целия си професионализъм под внимание. Освен това става ясно кои страници са водили към вас.

Връзка към мрежата: сипка

Различен дизайн

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

Връзка към мрежата: Различен дизайн

Бризк

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

Връзка към мрежата: Бризк

Вертикален дизайн на градината

Подобно на предишния, Vertical Garden Design отива към снимка, която показва бързо една от най-добрите му работни места на летището в Осло. В горната част имаме заглавката с «навигационна лента» или навигационна лента и дори възможност за промяна на езика. Логото го поставя във вертикален формат, за да даде последния щрих на много проста страница.

Връзка към мрежата: Вертикален дизайн на градината

247 градуса

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

Връзка към мрежата: 247 градуса

Наслаждавайте се на това

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

Връзка към мрежата: Наслаждавайте се на това

Алисън Хоу

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

Връзка към мрежата: Алисън Хоу

Пикселот

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

Връзка към мрежата: Пикселот

Лионел Шолтс

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

Връзка към мрежата: Лионел Шолтс

Елегантни чайки

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

Връзка към мрежата: Елегантни чайки

хабитат

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

Връзка към мрежата: хабитат

PinkPoint

Контрастът на цветовете ни води до малко по-сложна мрежа от всички изгледи. Не всички тези основни елементи липсват за да играете с градиентите за фоновото изображение този път и тези две секции, които имат основните цветове на градиента за основното изображение.

Връзка към мрежата: PinkPoint

IWC

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

Връзка към мрежата: IWC

Клъц, клъц

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

Връзка към мрежата: Клъц, клъц

7Бор

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

Връзка към мрежата: 7Бор

Сумата

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

Връзка към мрежата: Сумата

Кутия за шапки

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

Връзка към мрежата: Кутия за шапки

Кара лайт

Кара отива при простота и минимализъм със своето естествено и красиво присъствие във вашата снимка. Останалото е текст, който идва заедно с основните елементи на заглавката и бутон за хамбургер, за да го отворите.

Връзка към мрежата: Кара лайт

Маркетинг на Instrinsic Studio

Es от най-простата мрежа но това ни показва какво представлява създаването на блог. Червеното и черното са главните герои в много "блог" сайт.

Връзка към мрежата: Маркетинг на Instrinsic Studio

Как да създадете прост уебсайт в HTML

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

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

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

• Документи: всички документи, които ще създадем, трябва да бъдат направени с a . Отваряме с и винаги се затваря с a
• Тялото или тялото: видимата част на документа е между Y.
• Хедъри: те са известни с H1, H2, H3 ... Започваме с a и затваряме с a . Текстът, който е вътре, ще се появи като заглавна част и в зависимост от номерирането му ще го направи в по-малък или по-голям размер.
• Параграфи: абзацът е затворен в буква и се затваря с
• Звена: най-ясният пример еcreativosonline.org/»> Връзка към Creativos Online
• Образност: определяме ги по етикета . Един пример би бил . Извикваме изображението между кавичките и използваме alt за алтернативния текст, което е от съществено значение за SEO.
• Списъци: дефинираме списъците с за разхвърлян и с за чист. Елементите от списъка се използват с . Винаги не забравяйте да ги затворите с бара.

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

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

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

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

Това е ясен пример за HTML код с най-важните елементи:

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

С тези редове HTML код бихме имали първо създаде заглавието на страницата в заглавката с, в този случай «Семантичен HTML», бихме затворили и двете заглавия с , заглавката с и бихме дали път да отворим тялото с .

Бихме имали първа заглавка в H1 с за да го затворите с и щяхме да отидем до списък, който ще ни помогне да създадем лентата за навигация за различните страници на нашия сайт. Затваряме списъка с , затваряме и накрая html документ с .

За да завършите, винаги отваряйте документ с за да го затворите в края на целия код с наклонената черта. След отваряне на документа винаги се използва препратка към езика, който в този случай е испански с "es" и с a .

Важно е да се вгледате внимателно в кода и винаги отваряте функция, затваряте я с лентата засегнати.

Малко CSS

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

Ако от една страна имаме семантичното използване на HTML за това, което е заглавката или заглавката, тялото или тялото със статията или изображението и долния колонтитул, в CSS бихме използвали функцията «Div» за идентифициране към всяко от тези пространства, за да се приложат по-късно необходимите промени в дизайна.

Нещо толкова просто като:

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

Un пример за прост CSS код:

h1 {
цвят: бял;
текст-приравни: център;
}

Наричаме H1 и текста ще го сложим в бяло с цвят: бял; и ще го подравним към центъра с «подравняване на текст». Винаги затваряйте със скоби, след като отворите разговора H1.

Заглавна снимка на Грег ракози