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

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

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

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

Кийн Ричмънд

Кийн РичМонд

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

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

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

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

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

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

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

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

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

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

сипка

сипка

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

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

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

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

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

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

Бризк

Бризк

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

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

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

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

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

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

247 градуса

247 градуса

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

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

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

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

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

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

Алисън Хоу

Алисън Хоу

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

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

Пикселот

Пикселот

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

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

Лионел Шолтс

Лионел Шолтс

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

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

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

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

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

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

хабитат

хабитат

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

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

PinkPoint

PinkPoint

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

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

IWC

IWC

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

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

Клъц, клъц

Клъц, клъц

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

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

7Бор

7Бор

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

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

Сумата

Сумата

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

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

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

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

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

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

Кара лайт

Кара лайт

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

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

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

присъщ

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

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

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

HTML

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

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

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

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

HTML

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

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

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

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

Това е ясен пример за 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.

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


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

3 коментара, оставете своя

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

  1.   Кристофър - уебсайт каза той

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

    С Най-Добри Пожелания.

  2.   Хорхе каза той

    Здравейте приятели, как сте?

    Правя много проста уеб страница в html и бих искала да добавя поле за коментар към всяка публикация. Бихте ли ме насочили как да го направя?

  3.   Емерсън каза той

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