Проектиране Killer Web UI оформления с Freebies - Ultimate Guide
Полето на уеб дизайна е поело своя дъх само за няколко кратки години. Понастоящем в света има по-активни дизайнери от всякога, всички си сътрудничат по иновативни идеи за проекти. И много от тези тенденции са разработени чрез професионални графични дизайнери.
Може да отнеме месеци или дори години, преди да разберете напълно техническите начини за изграждане на потребителски интерфейс. Трябва да вземете под внимание размерите и разположението на елементите на страницата, както и четливостта на текста и етикетите. С малко свободно време можете да се докоснете до минималистичен подход за изграждане на уеб сайтове с по-малко и намаляване на объркването. И дори тогава има десетки други дизайнерски техники, които също трябва да се вземат под внимание.
За това ръководство съм свършил някои модерни техники за дизайн на потребителския интерфейс с freebies можете да изтеглите и играйте с. Надявам се, че това ще предложи някаква мотивация на тези, които се интересуват от кариера в изграждането на графичен / уеб дизайн. Дори професионалните уеб дизайнери могат да намерят някои от тези тенденции, полезни за следващия ви проект.
Практика с пълни шаблони
Когато имате уменията да проектирате собствено оформление от нулата, няма нужда да започнете с шаблони. Начинаещите, от друга страна, могат да се чувстват по-удобно, започвайки от пълен дизайн и работа в по-фини детайли.
Има някои отлични безплатни изтегляния на пълни PSD шаблони за уебсайтове за портфейли, начални страници, блогове и много други категории. Това са идеалните дизайни, за да започнете да се запознаете с a “общ” уеб оформление. Всеки уебсайт ще има различни нужди от елементи на страницата и ще трябва да определите кои елементи са важни.
Ето един пример за PSD, наречен "AppCivilization", проектиран от Мартин Фабрисиус. Оформлението е за творческо студио, което проектира мобилни приложения и евентуално уебсайтове. Към дъното ще намерите малък панел от икони на приложения, показани в портфолио. Също така ще забележите, че целият дизайн е разделен хоризонтално на заглавие, най-горно слайдшоу, основно съдържание и затъмнен долен колонтитул.
Оригинален източник - Изтегляне
Проектиране на целеви страници
Нека да разгледаме още една безплатна игра, също проектирана от Мартин. Следващият пример е целевата страница, която можете да използвате, за да продавате всякакъв вид продукти. Обикновено това са цифрови стоки, които могат да бъдат изтеглени от потребителя, т.е. приложения, снимки, икони, шаблони и т.н..
Оригинален източник - Изтегляне
Но най-добрата част от неговия дизайн е, че е много гъвкава за начинаещи, за да се справят. Заглавката все още използва малка горна навигация с голямо изображение, но по-специално очакваните действия на потребителите са различни. Той има голям “Купи го!” бутон, който се откроява точно над сгъваемото. На целевата страница на продукта това ще привлече повече внимание, отколкото слайдшоуто jQuery.
Друга велика UI техника е малкият дисплей на iPhone в средата на страницата. Мартин включва снимка за преглед на iPhone, бутон App Store и малък списък от ключови функции. Когато посетителите търсят информация за продукта, не можете да направите нещата по-лесни, отколкото чрез форматиран списък.
Още шаблони:
Ето няколко безплатни PSD шаблона, които пуснахме в прохода:
- "BiZ" Бизнес сайт PSD шаблони
- Продуктов сайт на "ThinkJuice" Шаблон за PSD
- PSD Шаблон за професионален бизнес сайт
- Портфолио "Polo360" PSD Шаблон
Може да се интересувате и от следните неща:
- Шаблони за бизнес уебсайтове
- "Очаквайте скоро" ръководства за страници + шаблони
Навигация в главния сайт
Менютата и бутоните са само инструменти за изграждане на много по-големи елементи на страницата. Няма съмнение, че основната навигация на уебсайта ви има много важна цел. Нуждаете се от това, за да е лесно достъпният на сайта Ви с възможни резервни методи за мобилни потребители.
По-долу е нагласена лента за навигация с ефект на текстура. Стилът на подчертаване може да бъде представен като затъмнена кутия или като низ, насочен към съдържанието на страницата. Този стил е забележителен през годините и изглежда страхотно в правилната обстановка.
Оригинален източник - Изтегляне
Друг подобен freebie е тази текстурирана заглавна навигация, проектирана от Еди Гил. Много харесвам как този втори навигационен панел включва както списък с връзки, така и някои допълнителни бутони на страници. Вие ще искате да предложите вторични връзки към посетителите, където те могат да намерят профилите ви в мрежата.
Оригинален източник - Изтегляне
Алтернативни стилове на менюто
Освен типичната хоризонтална навигационна лента има и други стилове на дизайн, които трябва да се вземат под внимание. Вертикалните връзки могат да бъдат разделени на различни подзаглавия, което оставя повече място за съдържанието на страницата.
Вземете например менюто freebie по-долу, проектирано от сайта Icojam.
Всяко заглавие се изгражда, за да се разширява и свива въз основа на избрания обект. Освен това дизайнът позволява на малък брояч да седне от дясната страна на всяка категория. Това най-добре ще запълни като блог навигация, за да разчита колко публикации са подадени по всяка тема.
Оригинален източник - Изтегляне
Съвети за навигация / уроци:
- 50+ чисти скриптове за навигация на базата на CSS
- Най-добри практики и примери за навигация в мрежата
- Изграждане на мобилна навигация с jQuery
- Кодиране на навигационната лента в CSS3
- Проектиране на навигация с по-малко CSS
По-чисти уеб формуляри
Модерната епоха на Интернет е далеч от статична среща. Потребителите непрекъснато споделят информация и си взаимодействат ежедневно. Повечето от споделянето на текст и медии се управлява чрез уеб формуляри.
Трябва да разгледаме само няколко примера за това как можете да проектирате чисти форми на входа и бутоните. Дизайнът на елементите ви може да направи дълъг път към поканата на посетителите си да ги използват. А това от своя страна изгражда надеждността на Вашия сайт и увеличава броя показвания на страници.
Поле за влизане
Има няколко велики примера за вход в PSDs, за да проверите. Това freebie за вход чрез WP Scientist има всички стандартни елементи. Две полета за въвеждане за вход / парола, бутон за изпращане и квадратчета за отметка за управление на бисквитките в сесията.
Този модел на дизайн е перфектен, ако можете да реализирате ефектите чрез jQuery. Главата на горната дясна стрелка ви кара да мислите за настройка на прозореца в изскачащ стил. Това е чудесна техника, която спестява място на уебсайта Ви, като запазва формата скрита, докато потребителят не кликне върху линка за регистрация.
Оригинален източник - Изтегляне
Формулярът по-долу е свободен за изтегляне благодарение на дизайнера Gil Huybrecht. Той използва подобен образец със зърнест фон и текстура на хартия. Това, което ми харесва най-вече при дизайна на Джил е "извънгабаритни" елементи. Това е много по-приятелско кацане на формуляр за влизане, който изпълва цялата страница. Потребителите могат лесно да видят какво пишат и има по-малко елементарно.
Оригинален източник - Изтегляне
Ако имате опит като frontend разработчик, използващ CSS3, то е супер лесно да преведете тази графика в код. Можете дори да реализирате избрания външен ефект на сияние и заоблени ъгли за бутоните и полетата за въвеждане.
Контакти
Друга форма, която ще намерите на практически всеки уебсайт, е формата за контакт. Това обикновено включва полета за името на изпращача, електронната поща и съдържанието на съобщението.
Свободното по-долу е страхотен пример за използване на персонализирани текстури и икони.
Дизайнът също използва текст на контейнера вместо етикети. Това означава, че когато формата за първи път зарежда всяко поле, се задава стойност по подразбиране (напр .: вашето име). Но след като започнете да пишете, контейнерът се изчиства и съдържанието ви се показва вместо това. Всички съвместими със стандартите браузъри ще поддържат този ефект и може да ви спести малко място на страницата.
Оригинален източник - Изтегляне
Друг чудесен freebie да вземете е тази табла контакт форма, проектирана от талантливи Jonno Riekwel. Този дизайн е много по-прост и съдържа етикети над всеки вход. Това е чудесно решение за по-големи предприятия или стартиращи фирми, които трябва да изпращат съобщения през различни отдели в компанията.
Оригинален източник - Изтегляне
Ръководства за формуляри за връзка:
- Формуляр за вход / регистрация: Идеи и красиви примери
- Създаване на формуляр за влизане в хартиен формат
- Създайте Ajax-базиран HTML5 / CSS3 формуляр за контакт
Ленти и банери
Само преди 6 или 7 години закръглените ъгли започнаха да се покачват в популярните тенденции в дизайна. Сега сме стигнали още по-далеч с сенки и ъглови ленти.
Оригинален източник - Изтегляне
Някои от тези елементи могат да се използват като акценти в дизайна, като брояч на коментари или като дата за публикуване на блог. Завършената лента по-горе е идеална за портфейли или страници на проекти, където искате да привлечете вниманието на посетителите ви. Можете също да опитате подобна вертикална лента, където дизайнът пада от върха.
Тези малки странични ефекти са много полезни за подобряване на оформлението ви. Посетителите забелязват и ще обичат тези естетически любезности. Но имайте предвид, че малките ъглови ленти са само част от тази тенденция в дизайна.
Оригинален източник - Изтегляне
Освен това пълен дизайн на банери са станали необичайно популярни за изграждане на разпознаване на марката. Можете да ги използвате в логото, навигацията, началната страница или дори на публикувани публикации в блога. Последствията са практически неограничени с добри дизайнерски възможности.
Огъване на ъгъла
Друг много специфичен банер ефект се извършва чрез опаковане на дизайна около ъгъла на страницата. Това изгражда илюзията, че вашата страница е 3-D и лентата е обвита около горната част на вашия сайт.
Дизайнът по-долу е 100% безплатен за изтегляне и може да се използва за вашите собствени идеи за проекти. Можете да видите как това ще привлече вниманието на посетителите и защо тази тенденция се е превърнала в такава ярост. Внимавайте да не прекалявате с банерите. В насипно състояние, те могат да получат много досадно много като по-старите "web 2.0" лъскави / огледални ефекти.
Оригинален източник - Изтегляне
Проектиране с бутони
Освен хипервръзките ще получите най-много взаимодействие от посетителите с бутони. Тези елементи от страницата могат да изпълняват всичко с помощта на jQuery и Ajax повиквания, с изключение на това, че можете да използвате бутони за свързване със статично съдържание, като например безплатни изтегляния.!
Комплектът UI по-долу, проектиран от Мат Джентиле има много повече от просто бутони. Неговият PSD комплект е фантастичен за начинаещи, които искат да вземат градиенти и текстури за изграждане на подобни форми. Често пъти ще намерите много по-качествени бутони в комплектите на потребителския интерфейс, отколкото с отделни PSD-та.
Оригинален източник - Изтегляне
Как се създават варианти
Тъй като прекарвате време практикувайки тези техники, ще искате да създадете много различни стилове във времето. Това може да доведе до превключване на подобни бутони между различни проекти и оформления. Добър пример са млечните бутони, предлагани от дизайнера Робърт ван Клинкен.
Оригинален източник - Изтегляне
Всеки от първоначалните три бутона има различен стил на градиента, с изключение на състоянията, които са сходни. Когато работите в Photoshop, ще трябва да съпоставите цветовете между градиентите или да преместите цветовете върху слой с ефекти. С това разбиране можете дори да изградите собствени бутони за безплатно изтегляне!
Оригинален източник - Изтегляне
Дърво + хартиени текстури
Когато трябва да подправите основните си оформления, тогава ще трябва да преминете към по-хитри методи. Текстурите са винаги добре дошли, ако можете да ги приложите правилно чрез CSS фонове или съдържание на зададена ширина. Две от най-популярните текстури, които съм виждал, са дърво и празни документи.
Идеята за бележника е много проста, но може да се превърне в страхотен дизайн на марката или като част от елемент на потребителския интерфейс или вграден в цялостното оформление. Но хартията не винаги изглежда сама по себе си, а друга текстура може да помогне на стиловете да се смесват..
Оригинален източник - Изтегляне
Изображенията ще се открояват и изглеждат прекрасно обвити в външна обвивка. Цялата концепция за текстура е да даде на вашия сайт специфично чувство или емоция. Дървените теми могат да предизвикат усещане за дом и природа. Има дори един страхотен дървен комплект за потребителски интерфейс за изтегляне от Jeremiah Wingett. Ако се чувствате креативни, опитайте се да съберете някои от собствените си текстури и да видите как те се представят в уеб базирана среда.
28 Дървени текстури с висока резолюция
заключение
Най-добрите уеб дизайнери са тези, които практикуват ежедневно и никога не позволяват техните неуспехи да се въздържат от крайните си цели. Трябва да сте отзивчиви и да се върнете бързо обратно както от успешни, така и от неуспешни опити. Съветите и безплатните в това ръководство трябва да бъдат добра отправна точка за започване на обучение как да се изградят различни концепции за уеб проект. И ние бихме искали да прочетем вашите мисли по въпроса в областта на дискусиите.
