Мащабируемост и видове уеб дизайн. Мащабируемост и видове уеб дизайн Поглед към междинния резултат
Уебсайтовете също имат свой собствен скелет. Но е безполезно да питате лекарите за неговите характеристики. А ветеринарите също не са запознати със структурата на сайта. Само дизайнерите на оформление знаят за това. От тях зависи структурата на скелета на бъдещия ресурс. И основният начин за създаване на костите на скелета му е блок оформление.
Оформлението на уебсайта е занаят за посветените
Има нещо загадъчно в оформлението на сайта. Но това е докато не опознаете по -добре този занаят. Започваме нашето посвещение:
Следващият етап от разработването на уебсайта след създаването на неговото оформление е оформлението. Задачата на дизайнера на оформление е да прехвърли скелета на бъдещия сайт във виртуалния свят с помощта на html код и css таблици. Просто казано, прехвърлете размерите и пропорциите на ресурса във форма, която е разбираема за браузъра.
В процеса на оформление с html код "скелетът" на сайта се разделя на части. И използвайки css ( каскадни стилови таблици) задава размера на "костите", цвета и местоположението.
Има няколко вида оформление:
I. Таблична - използвана за основен тип оформление. В оформлението на таблицата тагът се използва за задаване на структурата на сайта
и неговите дъщерни тагове. Оформлението с помощта на таблици ви позволява да подредите всички елементи на дизайна по най -пропорционалния начин един спрямо друг. Но в същото време този код се оказва твърде обемен:
Също така, основните недостатъци на кода на таблицата включват дългото му време за зареждане и лошото индексиране на съдържанието от търсачките.
Съдържанието на страница, базирана на електронни таблици, няма да се показва, докато не се заредят всички данни. Оформлението на блока ви позволява да показвате всеки зареден елемент поотделно.
Лошото индексиране на страниците на таблицата се дължи на големи пропуски между блокове текст, разположени в различни клетки на таблицата.
Сега табличен verst рядко се използва като основен метод за създаване на сайтове. Сега той се използва само за структуриране на таблични данни и местоположението на графичните изображения.
II. Блок - понастоящем основният метод за оформление. За разлика от оформлението на табличен блок, той има редица предимства:
Отделяне на стила на елементите от html кода;
Способността да се наслагва един слой върху друг - тази способност значително улеснява позиционирането на елементите.
По -добро индексиране от търсачките;
Висока скорост на зареждане на страница, състояща се от взаимно независими елементи;
Лесно създаване на визуални ефекти ( падащи менюта, списъци, подсказки).
Основният недостатък на оформлението на блока е определен „ неяснота»Разбиране на кода му от различни браузъри. Следователно, html страниците често трябва да бъдат „усъвършенствани“, като се използват специални хакове.
С появата на блоковото оформление се роди такова понятие като „съвместимост между браузърите“. Поради разликата в показването на един и същ елемент в различни браузъри, дизайнерите на оформление трябва да вмъкват цели парчета код (хакове) в основния html.
Хакът е силно специализиран и решава проблема с неправилното показване само в един браузър.
Основният елемент, използван в оформлението на блока, е етикетът
... Разделът на кода, разделен от този маркер, се нарича слой. Всички решения за стилизиране са преместени извън html кода в каскадни стилови таблици. Достъпът до тях става чрез идентификатори или css класове:
Как работи оформлението на блока?
Преди да започнете оформлението, готовото psd оформление на сайта се нарязва на блокове (слоеве) в графичен редактор. Изрязаните фонови снимки се поставят в отделна папка, която ще бъде прикрепена отделно към всеки слой:
Да вземем например това оформление на уебсайта, създадено във Photoshop. Първо, в текстов редактор, използвайки div, задаваме структурата на бъдещия ресурс и присвояваме на всеки слой свой собствен идентификатор за избор. Оказва се следната структура:
След това към готовата структура на сайта в html с реда прикачете css файла. След това добавяме към него описанието на стила на всеки слой, позициониране спрямо другите елементи и неговите размери.
Можете да научите повече за всички свойства на css от техническата документация за езика.
Ето как изглежда нашият пример за блоково оформление на сайт в прозорец на браузъра:
Разбира се, този пример е само визуална помощ, за да демонстрира как работи оформлението на блока. Истинското оформление се извършва с помощта на фонови изображения и лога, включени в css. А също и с включването на хакове в html и css кода за оптимизиране на дисплея във всички браузъри.
Докато изследват необятността на мрежата, мнозина вероятно ще забележат, че повечето сайтове са изградени на базата на мрежа. Елементи или блокове в такива сайтове са разположени на страницата не хаотично, както е било преди няколко години, а в определена последователност и структурирани (понякога е незабележимо на пръв поглед). Тези сайтове са добре балансирани и изглеждат чисти и подредени. Голяма заслуга за тази спретнатост принадлежи решетка, който стои в основата на дизайна и предоставя на потребителя ясна, неизкривена структура на сайта.
Докато решетките представляват прости пресечни точки на хоризонтални и вертикални линии на определени интервали, много дизайнери ги използват, за да украсят и подчертаят очевидни геометрични форми и визуални пътеки. Можем да видим тези пътища и форми в сайтове за портфолио, галерии, блогове и други творчески проекти. Това не е изненадващо, тъй като мрежата има редица полезни свойства и предимства, например, като:
Създаване на визуални пътища за насочване на потребителите
Комбиниране на различни компоненти в единно цяло
Сортиране на информация
И, разбира се, мрежата е идеална за показване на красотата на правите линии. По -долу сме подготвили сайтове, в които решетката е нещо повече от основен дизайн.
Заключение
Както вече споменахме, мрежата е неразделна част от дизайна и лесно превръща хаоса в ред, а в дизайна на уебсайтове, както никъде другаде, тази възможност е наистина важна. Повечето потребители искат информация бързо и лесно и няма по-добър начин от това да им представят ясна и добре организирана структура.
Не, това изобщо не означава, че външният вид на сайта трябва да бъде линеен и прост. Понякога дори прости геометрични форми, умело „разредени“ с цветове, изображения и графики (спомнете си плоския дизайн), могат да бъдат наистина привлекателни. Какво мислиш? Не изглежда ли толкова ясно разделение на блокове привлекателно?
Здравейте, другарю читателю!
Защо имаме нужда от целеви страници в 10 блока, ако важна информация е на първия екран и можете да се ограничите до разделите „За нас“, „Услуги“, „Цени“ и „Контакти“? Отговорът е прост: да поглъщат вниманиетокупувач и мотивирайте влизат в отношения с продукта истимулират да купуват продукт.
Най-използван техники за ангажиране на посетителитев процеса на закупуване на продукт е AIDA(от английски Внимание-Интерес-Желание-Действие) и PMPHS(Болка-още болка-надежда-решение). Водени от тези техники, се изгражда логическата структура на целевата страница и се определят блоковете, които ще присъстват на лендинга.
Събрах за вас 20 илюстративни примера за блоковекоито изпълняват специфична информационна функция. Примерите са полезни, ако вие и улесняват комуникациятас дизайнера и дизайнера на вашата целева страница.
В този пост ще се запознаете с първата половина - 10 блока. За останалите 10 примера изчакайте следващата статия през август.
20 блока целеви страници - изберете вашия
Съставни части на продукта, пълен комплект;
Блокови гаранции (тройни);
Блокирайте постиженията / предимствата на вашата компания;
Блок за служителите на компанията;
Блок за услуги / отдели на компанията;
Блок за партньори / клиенти;
CTA (Призив за действие, призив за действие);
Блокови предимства на клиента от използването на вашия продукт („Защо ние?“);
Блокиране на процеса на предоставяне на услуга (доставка, начин на извършване на транзакция);
Блок калкулатор;
Блок със специална оферта + ограничител на времето;
Блок с подарък + условия за получаване на подарък;
Блок с карта на местоположението на компанията („Как да стигнем до там“);
Блок с информация за контакт;
Таблица за сравняване на блокове;
Идентификация на блок „За кого?“;
Често задавани въпроси за блокиране.
* Номерирането на блокове е приблизително - редът на блоковете в целевата страница зависи от нишата. Можете да определите реда на блоковете, като използвате същите инструменти на Yandex Metrics (превъртаща се карта, топлинна карта), тази статия ще ви помогне.
Съдържа ключова информация за посетителя на целевата страница, USP на вашата компания. Желателно е и тази информация да бъде конкурентна. В зависимост от нишата такава информация може да бъде: цена на продукта (от 488 рубли за 1 брой), срок на доставка (доставка за 2 дни), място на производство (директно от Германия). можете да научите повече от предишната статия.
Подходящ за:теми на едро; ниши, където купувачът не е достатъчно наясно с предимствата на продукта (главно продукта).
Блокът може да бъде отговорът на въпроса на купувача „Защо е толкова скъп?“ Ако съдържа подробни описания на характеристиките на продукта. Това е необходимо, за да се създаде по -ясна картина на обекта на желание в главата на потенциалния клиент.
3. Блоково-компонентни части на продукта, пълен комплект
Подходящ за:описания на сложни услуги; ниши за организиране на свободното време; описания на пакета стоки.
Ако блокът за характеристиките на продукта демонстрира изцяло продукта, тогава блокът за съставните части разлага продукта (продукта или услугата) на термини.
4. Гаранции за блокиране (тройни)
Подходящ за:всяка целева страница.
Най -често се намира след блока с цената на продукта. Той е изграден въз основа на възраженията на целевата аудитория и ги затваря, демонстрирайки ползите от услугата във вашата компания.
5. Блок за постижения / ползи
Подходящ за:всяка целева страница; марков продукт от добре позната компания; особено важно в силно конкурентна ниша.
Особено важно за бизнеса в силно конкурентна ниша. Например, ако няколко компании предлагат един и същ продукт, тогава този, който осигурява най -удобните условия за сделката и показва компетентността на работата на своята компания (от коя година съществува компанията, броят на изпълнените проекти, отстъпките и подаръци за редовни клиенти, броят на точките за продажба и др.).
6. Блок за служителите на компанията
Подходящ за:ниши в предоставянето на услуги
Употребата е препоръчителна в ситуация, в която е важно не КАКВОкупувачът ще получи и КАКрезултатът ще бъде постигнат.
7. Блок за услуги / отдели на компанията
Подходящ за:сложни теми за услуги; целеви страници с множество продукти в една област на приложение.
8. Блокирайте партньорите
Подходящ за: всяка целева страница.
Блокът увеличава доверието на посетителя, ако използвате лога на известни клиенти.
Подходящ за:инфо-бизнес; сектора на услугите; ниши, където процесът има значение (КАК)получаване на резултата.
Страхотно допълнение към калъфите - визуална демонстрация БЯЛ / БЯЛ Е, както и инфографика и екрани за печат със статистика.
Ниши, където демонстрацията има значение:
Следва продължение…
Днес обсъдихме първите 10 блока за целевата страница, ще публикуваме повече в близко бъдеще - следете ни!
Новата година донесе много свежи технологии и тенденции, но най -вероятно тенденциите, които се показаха до края на 2015 г., ще доминират. Още видеоклипове, решения с вертикални модели, вдъхновени от материали идеи и стилни слайдове. Трябва да се очаква нарастването на популярността на тези техники. Повечето от новите концепции не са толкова трудни за изпълнение. По -долу са 11 тенденции в уеб дизайна (и много страхотни примерни сайтове), с които ще се сблъскаме през 2016 г. Пробите от тези дизайни наистина ще ви помогнат да усетите тенденцията.
Сайтът е атрактивен с анимирани фонове, интерактивни ефекти
По -красива типография
Опростените интерфейси проправят пътя към идеята за красива типография (както и лесни за използване уеб инструменти като Google Fonts и Adobe Typekit-разширяване на възможностите ви за разработка с огромни онлайн библиотеки). Простотата на надписите (четими и лесни за разбиране) в концепцията за „калиграфия“ освобождава място за други елементи. Това, което трябва да опитате да свържете, е четимият шрифт и забавната новост на опциите.
уебсайт на ресторант в селски стил: премерен и без забързване, без шум (закачливи контрасти) с добре подбрани цветове и шрифтове. Кънтри стил (селски стил) създава усещане за близост с природата. Марката, свързана с птиците, е отразена графично (илюстрации, фонови рисунки). По принцип това е част от идентичността - „Ястреб и кокошка“, като символ на успешен лов
Илюстрации и рисунки
Илюстрациите с рисунки внасят творческо въображение и весело настроение в дизайна. Работи за всички видове сайтове (не само за деца). Популярността на „илюстрирания“ стил също нараства, когато става въпрос за проектиране на малки елементи (икони и т.н.) в дизайна на сайта.
Това, което е особено приятно в тази тенденция, е, че илюстрациите придават индивидуалност на сайта. Тъй като илюстрациите или „иконите на скици“ най-вероятно са нарисувани ръчно, визуално и по общо усещане, такъв сайт за потребителите изглежда по-личен. От гледна точка на развитието на тенденцията за повишаване на ефективността на комуникацията с потребителя, има още много да се направи по този път.
Сайтът има хубави микро литератури и илюстрации. и „Baby-style“ на целия сайт превръщат дизайна в игра
Преди това в Интернет беше разпространен табличният тип оформление, на който е посветен. С течение на времето обаче този подход за създаване на структура на сайта е остарял и е заменен с блоково оформление.
Разлики между блоково и таблично оформление
Ако оформлението на таблицата предполага, че съдържанието на страницата е вътре в маркера
, тогава концепцията за оформление на блок се основава на активното използване на универсални тагове
вътре в което е поставено съдържание, включително други тагове.
Оформлението на блока е лишено от недостатъците на оформлението на таблицата - индексира се по -добре от търсачките, кодът му не е толкова разтегнат, а блоковете
, които толкова обичат да се наричат „слоеве“, първоначално са били замислени като универсални, тоест „за всичко“, докато
е таблица, която трябва да използвате за показване на таблични данни и нищо повече.
Единственият забележим недостатък на оформлението на блока е, че сайтовете, направени върху него, могат да се показват по различни начини в браузърите. За да избегнете това, трябва да направите оформлението „крос-браузър“, тоест да се показва еднакво от всеки браузър.
Същността на оформлението на блока
Оформление на уебсайт се създава в графичен редактор: отбелязва се къде коя област на страницата (заглавка, дъно, странична лента, основно съдържание) ще бъде разположена и колко място за заемане, снимки и фонове са подготвени.
Всяка част от страницата е поставена в собствен блок
: горната част на сайта - в първия, менюто - във втория, съдържанието - в третия и т.н. Всеки блок е изпълнен със съдържание, използващо HTML, както и позициониран и оформен с помощта на CSS маркировка.
Крайният HTML документ е колекция от блокове
със съдържание вътре. Дизайнът често се намира в отделен CSS файл, свързан към страницата с маркер. или поне в контейнер
