Някои много примери и съвети за това какво прави качествен уеб дизайн или блог
Качеството е думата, че много хора искали да използвате, когато се описват техните уеб дизайн услуги. Но какво е качеството, как искаш да знаеш, ако дизайнът е качество или не. Ами, аз мисля, че има много начини за качество на място в рамките на уеб дизайна. Щом можете да видите само какво става във вземане на качествен уеб дизайн, можете да използвате техники за перфектно вашия собствен стил.
Аз бях взети заедно няколко насоки, както и събраните някои примери да обясни точно как изглеждам за качество в рамките на една интернет страница дизайн.
01. Интервали
Едно от основните неща, които търсите в добър сайт дизайн е умно използване на разстояние с проектиране елементи. Разплащателната внимание на това как някои неща са на разстояние, както и облицовани нагоре наистина може да прави разлика за цялостния външен вид и усещане за качество на вашия проект.
Мисля, че ключът към вашия Getting разстояние право е да търсите във всеки от елементите, в рамките на своя дизайн. С поглед към по-голяма снимка наистина може да ви помогне да получите добра представа за това как най-добре да ви пространство елементи. Понякога намалите мащаба и като различен поглед към вашия дизайни може да се окаже голяма помощ.
Примери за Отличен Интервали
Велик Интервали на Good.is Website
Както можете да видите тук, е много чисто и открито се чувстват в съдържанието тук. Това е напълно до дизайнер позволяваща добра сума на пространството около текста & изображения.
а
Много добре разстояние изложени Digital Маш Website
Като добре разстояние посочени елементи може да ги направи много по-атрактивен, и много повече за кликване. Цифрови Маш е страхотен пример за много приветстващо уебсайт.
Creatica Ежедневни има купчини на космоса
Отново голяма употреба на разстояние тук наистина помага нека съдържанието говори сама за себе си. Там не е много на съдържанието във всеки пост, но те не са се страхува да даде на съдържание много пространство. Просто, защото имате само няколко реда от текста, не означава, че тя не може да се използва много пространство.
Много пространство на Postbox сайта
Като близък поглед върху Postbox сайт, можете да видите наистина колко пространство има около ръбовете. Има всъщност 60px капитониране тук. Това звучи като доста, но когато го видя в действие, това изглежда чудесно.
Първи Интервали Грешен
Основната грешка правят хората, когато става въпрос за разстояние като съдържанието им е твърде близо до ръбовете. Без значение колко добре сте оформена твоето съдържание, ако сте угоявам прекалено много, той губи много от неговия стил и качество.
Пример за не използват достатъчно разстояние
Ние показа в предишния раздел колко добър на разстояние е по PostBox сайт, но сме направили макет горе-долу, за да покажат как ще изглежда с по-малко разстояние. И вие може да видите точно колко лош разстояние ефект може да Ви дизайн. Отнема много далеч от дизайна и разбира се премахва качеството чувствам от него.
Съвети за Ефективна Интервали
Вземане на решение за това как да се използва много по разстояние е нещо, което ще се различава от време на време, ти наистина трябва да се обучават окото ти да се даде възможност за правилното количество от разстояние за всеки елемент, както и да я използват ефективно да се монтира дизайн. Това е връзка, но нещо, което може да вдигнеш с практиката.
• Дизайн с помощта на системата на преносната мрежа
Използването на мрежата със сигурност ви помага да се разбере значението на разстояние
• Опитайте & Опитайте отново
Винаги може да се използва методът за изпитване и грешка, докато не намерите това, което изглежда наред.
• Бял Space не губи пространство
Просто защото си има празно място, това не значи, че трябва да го попълните.
• По-малко наистина е по -
Вместо да се опитва да се поберат повече в дадена зона, годни по-малко, я дам пространство и поддържа само от жизненоважно значение важна информация.
02. Pixel Перфект Елементи
Ти наистина може да се каже кога някой е задал реални усилия във финала на уеб дизайна. Понякога това е фините неща, които наистина имат значение, и много хора, дори и да не забележите. Какво имам предвид, когато говорим за Pixel Перфект Елементи е метод на плащане внимание на реда, ръбове и граници. Вместо просто да има проста линия, понякога се добавят някои малки подробности, дали тя е коварен градиентите, или нещо като прост 1px сянка или подчертае наистина може да направи работата ви да изпъкват. Някои дизайнери на бележка, че са наистина добри в това са: Collis Ta'eed, Дейвид Leggett и Волфганг Bartelme.
Примери за Pixel Перфект Подробности
А близо изглежда най-детайлно в Envato
Ако погледнете в примера съм кроя, вие може да видите в Пример 1, как зеленият бар е с 1 пиксел запалка зелена линия на границата. Пример 2 употреби мека наклон сянка върху вътрешната страна на кутията и оставя 1px ясна бяла граница в горния край. Умно, използвайки сянка да даде усещането на подчертае над нея. В зелената площ зад има много меки фините сянка, която помага за привличане на вниманието към чист и свеж подробно в рамките на бяло поле по-долу. Въпреки, че той не изглежда като нещо много по тези наистина помагат да се направи всичко изглежда, че малко по-лъскава, те дават смисъл на 3D и реализъм, почти като елементи са разположени върху страницата, а не само на плоски и статични оформление .
Подробностите относно Tutorial9.net
Дейвид Leggett има голямо разбиране на това как да извлечете наистина пиксел на изскачащи прозорци. Неговата нова редизайн на tutorial9 е страхотен микс на толкова много пиксел пръкват техники. В Пример 1 може да видите как той се разделите, изглежда, че малко по-хитрец като добави проста 1px подчертае към върха. Пример 2 видите на различни техники. Капка сянка върху камерата икона, сянка подчертае върху бялата зона, както и 1px подчертае върху горната част на лентата за навигация.
Pixel Перфект бутони & Сепаратори на RedBrick Здравеопазване
Тази красива навигация, създаден от Райън Scherf е друг голям пример за използване на пиксел перфектни детайли, за да се чувстват, че качеството на вашия проект. Розовата бутон има 1px подчертае, и отделяне на линиите между връзките са на същото ниво на качество и подробно, както виждате, а не само със сивата линия раздяла, Райън е включена и 1 пиксел подчертае, че по-долу, за да се предотврати това гледам плоски и 2 математически.
Pixel Усъвършенстване Отнася се до гръндж прекалено: AvalonStar
Тук имаме красива AvalonStar: нарушаване на блога, която използва много гръндж стил. Но дори и с мръсна & grungy дизайн използвайки 1px изтъкне все още може да направи голяма разлика. Ако търсите най Пример 1 може да видите как една сянка наклон е било използвано на кафявата нагоре област, зеленото поле, което се крие под него има 1px изтъкне най-отгоре. Комбинацията от сянката горе и 1 пиксел подчертае наистина правят кутиите изглежда, че малко по-лъскава.
Бързи съвети за перфектна Подробности
Практика прави перфектни в този случай, както се вижда от примерите нещо толкова просто като 1px подчертае линията да добавиш някои наистина готино дълбочината на вашия дизайн, не е необходимо да се разчита на много над горната bevels и градиентите да даде на впечатлението за нещо с малко дълбочина.
• Пазете я фините
Малки детайли комплимент, че съдържанието е от ключово значение.
• Мислите, че в пиксели
Граници, градиентите, линии, сенки и т.н. не трябва да бъдат огромни да бъдат ефективни.
• Преди & След
Сравнете резултатите си за това как изглеждаше преди да прилагат ефекти. Тогава можете да видите точно колко ефективни са те.
03. Добре, че се книгопечатане
Въпреки, че действителното съдържание на сайта, няма да бъде написана от автора, те играят също толкова важна роля за цялостното качество на съдържанието им. Тяхната роля е да се увери, че съдържанието се показва по начин, който е лесен за следване и прочетете. Има много начини, които можете да гарантирате, че вашето устройство е разбираем и използваем, и докато аз съм няма да списъка набор от правила и регламенти за какво, и какво да не правя, аз ще ви дам някои примери за това къде наистина умно книгопечатане няма да промени нещата.
Примери за добре обмислен изложени книгопечатане
Големия & Красива относно Netsetter
Заглавията са от значение в рамките на уеб дизайн, особено когато са проектиране за блога. Едно неотдавнашно тенденция в уеб дизайна е да се използват големи & получер шрифтове за заглавия. Това работи в редица положителни начини, а не само да го маркирайте всички права кутии от използваемост гледна точка, но то помага да се създаде пространство и определи структурата в рамките на проект. Този пример от Netsetter е голяма илюстрация на тези точки, можете да видите как заглавието създава много бяло пространство около нея, и естествено тя е много лесно за четене.
Водещи & Интервали с Текст
В Viget сайта наистина е прекрасен пример за това колко важно е книгопечатане в уеб дизайна. Примерът ще видите по-долу (взети от тяхното портфолио покажете) показва още веднъж колко използвайки по-голям размер на шрифта помага да създавате и отворено пространство. Дори и с тънък, кристален шрифта те са използвали можете да видите точно колко пространство е създаден в тази област. Действителната шрифт е много хлъзгав и е голям избор на шрифт. Другите нещо, което стои тук е тяхното внимание към детайла с линията височина (водещо), на разстояние между всеки ред от текста е увеличил от стойността по подразбиране, за да създадете много повече пространство и да направи много по-четлив текст. А трик, който бихте могли да опитате в следващата си дизайн.
Уеб дизайн Ledger, шрифтове да Fit вашето настроение
Намирането на добра шрифта може да се осъществява чрез проучване и грешка, или можете да направите своя избор въз основа на различни настроения на някои шрифтове, ще ви помогнат да привлечете към дизайна. Примерът тук, Уеб дизайн Ledger, има ретро и носен поглед към него, докато все още има много открити и модерни чувствам към нея, за да избирате шрифтовете, които помагат извиквам подобни настроения към тях е от съществено значение за това е успех. Хенри Джоунс (авторът) е избран популярна преходни сериф шрифт: Грузия за заглавията, които комплимент на ретро & носен аспекти на дизайна, много добре. Модерният чувстват в сайта идва от използването на много различни шрифтове за заглавия, основното съдържание на тялото е писано в Helvetica, A-без сериф шрифт с много заоблени, отворете чувстваш към него. Двете избор на шрифт в този пример са много умни и наистина спомагат за комплимента и настроението на дизайна.
Бързо проверете списъка за книгопечатане в уеб дизайн
Опетняване добра книгопечатане в уеб дизайна се превръща в малка-лесно, когато сте виждали някои много примери за книгопечатане (горе), но кога точно е това, което прави тези примери, толкова добро, и какво трябва да се гледа в случаите, когато дойдеш да проектират следващата си уебсайт?
• Трябва ли чете?
Не се плаши от вземане на заглавията си голям и удебелен шрифт.
• Имате ли мислил за разстояние?
Интервали може значително подобряване на разбираемостта.
• Да ви шрифтове монтира настроение?
Уверете се, че ви шрифтове комплимент дизайна.
Има вероятно хиляда повече съвети там, но аз не считат себе си на експерт в тази област, аз мисля, че сте научили да оценяват влиянието на добрите книгопечатане. Ако искате да научите повече за неща, за да се грижа за по-добро и да видите някои примери Аз силно препоръчваме да проверите на този пост от Smashing списание.
04. Организация на елементи
Като дизайнер на жалби до много, защото от неговия творчески характер, и че тя може да бъде доста забавно. Сега знам, че не Организиране звук на всички творчески или забавно, но след като получи в навик на добрата организация, тя не трябва да бъде като глупави, колкото изглежда. Начинът, по който да организирате елементите в сайта е винаги ще е различно, то зависи от това какъв тип сайт да е, и как някои важни функции на съдържанието на този уебсайт.
Въпреки това винаги има различия в начина и мястото, където нещата, има някои неща, които можете да направите, за да организира вашето съдържание много лесно. Първото нещо, което трябва да направите, е да решат какво искат да постигнат своя дизайн. За пример, нали проектиране за продажба на продукта, се проектират за съдържание, или са ви проектиране за регистрации & референции др
Проектиране на Продава: 37Signals
Като погледнем в масово популярни 37 сигнали уебсайт е лесно да се види, че това не е случайно те се продават продуктите си така добре. Те сте направили, че толкова лесно, колкото е възможно, за да видите какво се продава и да ви помогне да направят окончателното решение за покупка. Всичко, което искам от даден сайт, предназначени за продажба.
По примера на изображението можете да видите, че сайтът има 4 основни характеристики, които я правят идеален да насърчаваме да купуват. Внимание е първото нещо, че сте направили много тъмна кутия с бърз резюме & големите смели заглавия. Следваща те генерират своя интерес от регистрационните някои ползи от всеки продукт, с прекрасна илюстрация. Желание е следващата точка, а това е архивиран от пускането кавички & признания, както и в този момент няколко клипа на "Какво ни Клиентите трябва да кажа." Крайната особеност да се има предвид действие е: върху 37Signals съществуват различни действия точки цялата страница, също така хубаво да се види, че на страницата е доста дълго те дори имат някои действия точки в долното поле.
Проектиране за съдържание (блог): Ами Медикаментозни
Когато сте проектирането за блог това е съвсем различна история. Не е нужно да прекарват времето си и го убеди гарантират на потребителите си за вашия продукт, вашият "продукт" е вече на дисплея, вашето съдържание е вашият продукт. Улеснете на потребителите си да видите публикациите си, ги проучи и да се свързвате с теб & вашия блог.
Съдържанието следва да бъде (един от) Първото нещо (а), които виждате на блога. В този пример Приятен удебелен шрифт розови заглавие наистина обръща очите ти направо към съдържанието. Има добра големина предварителен преглед на изображението и добра 2 / 3 точки от текста, последвано от "Продължи Четене" връзка. Има също така и стандартни дата & автор информация. За мен това е една от най-добрия пример за това какво бих клас като качество "Съдържание Дизайн." Внимание може да бъде насочена към нещо на интерес, тук хубав голям абонирате иконите са в центъра и ще помогне на потребителите да останат свързани с вашето съдържание . Плюс това, без съмнение ще увеличи размера на абонатите, така че работи на две нива. Насърчаване на потребителите си да опознаем е доста проста, можете да използвате нещо от tabbed последните или популярно съдържание в страничната лента, за да падащото меню или просто & ефективни списъци. Това е лесно да се направи, но много ефективни, особено по отношение на блог. Блоговете са склонни да бъдат много лични неща, за да позволи на посетителите да се свържат с Вас в най-различни начини, може да бъде голям плюс, и може да помогне, за да насърчи хората да знаят те, и посетете
Съвети за да помогнем с Организационния вашето съдържание.
Разбира се винаги има време, когато ще трябва да направя нещата по различен начин и почивка в норма. Но има някои прости съвети можете да се следват за водене на добре структурирани и добре подредени дизайн.
• Какви са ви за проектиране?
Тъй като ние сме показани по-горе, да вземе решение за целта на Вашето дизайн
• Дизайн с помощта на мрежа
Мрежи позволяват да извлечете максимума от вашата пространство.
• Тест на разположение на елементите
Бъдете посетител, щеше ли да е в състояние да го използвам.
• Отстранете всички ненужни елементи
Нещо, което не е от съществено значение трябва да бъдат отстранени, или от начина, по който
• Баланс на внимание
Някои неща трябва да останат просто да се позволи на други да изгрее
05. Ограничения & финес
Дизайнерите са винаги търси начини да се направи въздействие с уникален дизайн или специален ефект в дизайна. Но понякога може да ви направи по-голямо влияние от ограничаване на себе си. Идва, когато нещо кръстоски от добре да са твърде много. Един добър дизайнер на място, може, когато линията е била премината и да се избегне въвеждането на твърде много в проектирането или специален ефект.
Примери за фините Ефекти в Уеб дизайн
Софт градиентите на "Нещата" Website
Аз съм винаги на грижа за фините въздействия върху всички уебсайтове да посетя. Сортирай тъжна може би, но не мога да помогна, но разчитам на всички малки детайли за бъдещето вдъхновение. Градиентите са често използвани и над наистина в лицето ти, а да бъдат използвани правилно градиентите да добавите елемент на реалността и дълбочина до дизайна. Повечето хора дори не могат да Роднинските наклон, а тези за мен са най-добрите такива.
Капка Сенки върху Икона Dock
Икона Dock е smorgasbord на нежност. Pixel изтъква, градиенти и капка сенки. Но за целите на този пример ще се съсредоточи върху падащия сянката, тя не е много голям, и то на непрозрачност е била намалена до само сложи подчертават от съдържанието клетка и да я предаде много леко. Той е прекрасен пример.
Качество в Уеб дизайн - изисканост, Софт градиентите: Икона Dock
Фините Фонов текстури; скаутите за момичета
Наличието на текстурирани фона да направите пауза или вашия дизайн. Много пъти, става на фона на твърде много на разсейване, че тя действително се далеч от качеството на дизайна. Така че това е често е добра идея да си фонови текстури фините и меки. В скаутите за момичета уебсайт прави страхотна работа за използване на текстура за комплимент цялостния стил & качество на дизайна.
А намек за носене & Драма: Viget Адванс
Аз не мисля, че някога може да бъде твърде тънък, каквато и да е сума на подробност без значение колко коварен ще бъде видима, и дали хората са запознати с нея, или не го прави да има ефект. Този пример от Viget Адванс блог показва някои напътствия за носене & сълза, само много малка сума за носене, но без да я хартията ще изглежда плоска и скучна. Той е малък несъвършенства, които я правят по-правдоподобен и истинско.
Акварели на WebDesignerWall
Когато използвате акварели е хубаво винаги да бъдете сигурни, че комбинация от цветове и пази много меки цветове, поизбелял и добре ... мокър. Използването акварели могат да се възползват вашите дизайн в много отношения, тя ви позволява да се инжектират някои фините цветове и въвеждат в някои текстура, която е защо това е стане доста популярен избор за много дизайнери да се включат.
Фините Флорални елементи; ДАРА градина
Това е брилянтен пример за цветя фините детайли в дизайна. Има някои по-ярки цветя илюстрации, които също са доста зашеметяващ, но в този пример ще се съсредоточи върху леките & softer информация във фонов режим. Това наистина показва значението на нежност, на меките цветове и носен поглед към модела означава, че окото е запознат с подробности, но това не е основният фокус.
Съвети за финес във вашия Дизайн
За мен, фините детайли в дизайна наистина може да тласък на дизайн да бъде добър, да бъде невероятно. Ако търсите начин да инжектира нещо специално в проектирането, фините детайли наистина е начин да отида. Ето някои съвети, които да имате предвид, когато това число фините детайли във вашия дизайн.
• Направете си слоеве
Никога не просто използва един четка или текстура, построена до вашата информация.
• Експериментирайте с непрозрачността & Цвят
Понякога дори 3% непрозрачност може да има положително въздействие.
• Не се притеснявайте, Бъди Brave
Съставено се страхувайте да бъде твърде тънък, или прекалено избледнял.
06. Използване на цвета да е пълния потенциал
Хората често се съди цветове на личните им вкус, което е огромна грешка. Ако сте някога в ситуация, където трябва да се вземе решение какви цветове изглеждат добре в дизайн мнението си винаги трябва да бъде на марката, както и изграждането на тема и настроение с помощта на цвят схема.
Брилянтно употреби на цвят в уеб дизайн
Недвижими имоти могат да бъдат недвижими колоритен: Oypro
Работата ми харесва за Oypro сайт е, че това доказва, че "скучна" тема не трябва да имат скучно дизайн. Всички твърде често корпоративни сайтове имат нежеланието да се позволи на дизайнерите наистина изхитрям някои творчески усет в техните проекти. Изглежда, че е необходимо да се пазят нещата прости, плоски и сиви. Но този проект се окаже, че все още можете да имате корпоративни търси сайт, без да е необходимо да държи гърба.
Поддържане на вашата Цветове Съответните: Тенеси Summertime
Summertime в Тенеси е жива, ярка и много топли уебсайт. Всичко, което искате да асоциирате с даден сайт, който е насърчаване на лятото дейности. Има много различни цвята в играе тук, но всички те са от значение. Добро качество на дизайна има различен цвят, схемата, която е от значение за услугата или продукта, които са за проектиране. Понякога това е очевидно, цветни решения, които правят за по-добър дизайн, добър пример на моя въпрос е Ад Дизайн - то няма да има смисъл като всеки цвят от firey червено.
Разнообразие във вашия опит: Saturized Студио
Тя не е достатъчно просто да имат цвят във вашата подготовка и се очаква, че, за да го интересно. Някои от най-добрите произход са тези, които са доста различни, в този пример виждаме, че красивите оранжев / червен цвят, е обект на всички видове на светлинни ефекти и градиентите. Тя дава допълнително нещо за фон, и не позволява то от търсят остаряла и плоски. Важно е да се отбележи също, че контраста между тъмните & дълбоко оранжеви работи наистина добре е зад много по-лек съдържание област.
Съвети за използването на цвета в дизайна
Цвят винаги е добра площ за проучване и опитват различни възможности и варианти, но това е важно винаги да водят няколко неща има предвид при избора на цветове и цвят схема.
• Експеримент
А скучна тема не трябва да имат скучно цвят схема.
• Разнообразие
Опитайте се да използвате градиентите, модели, четки за вашите цветни произход. Цвят сам не направи нещо, изглежда добре.
• Придържай се към тема
Уверете се, че вашите цветове са подходящи за вашия продукт / услуга.
07. Ако направите нещо, никой друг е направено
Някои от най-добрите сайтове около са тези, които са далеч от обикновеното, странни и донякъде bizzare. Но тези, които предизвикателство в норма може да завърши до промяна на това, което е в норма. Но е наистина оригинален и създаване на нещо, никой друг не е сторил, преди да е най-тежките нещо да се направи в дизайна.
Можеш да свършиш нещо, вземане на удивителен блясък, или бихте могли да постигнете с дизайн, който е достоен за нищо друго освен критика. Тя е много тънка линия между успеха и провала; Тоест има причини нещо никога не е правено и преди, и това е, защото обикновено това е лайно идея. Вие трябва да е смело да се оттегли далеч от онова, което хората знаят и любов, и тук са няколко примера за това:
Уникални за навигация MB Драган
Не точно средната Ви сайт навигация, но би в сайта изглежда толкова добре, ако той просто имаше стандарт навигация. Бих казал, че е малко на риск като за навигация в такъв необичаен начин, но тя не се вписват в сайта, че е необходимо, и това е направено за такъв стандарт, че е трудно да не оценявам колко добре работи с цялостния дизайн.
Visualbox & самото им Visual Навигация
Visualbox има един гол през ума, показва ли си брилянтен работа. Така те се погрижили за много малко текст, за първи поглед всичко, което виждаме, е тяхното име и селекция на тяхната работа. В полето за предварителен преглед промени, когато мишката върху него да се разкриват подробности за този проект, така че действително е много ефективен и функционално решение, както и много по-привлекателни тогава просто като списък от връзки.
Прави до точката с Никола Mircic
Значи сте интерфейс дизайнер, които искате хората да видят вашата работа, и на изплащане вас. Никола Mircic ни показва как се прави да го прави за една наистина впечатляваща сайт. Вие сте посрещнати с голямо разнообразие на неговата работа, неговото име & какво той прави в началото, и се свържете с линк. Там 'никакъв маса от текста или популярното думи, за да ви убеди да ползвате услугите му, той буквално се позволява работата му говори сама за себе си. Разбира се можете да кликнете върху изображенията, за да видите повече & получи някакъв текст, но ако е много уникално оформление и аз обичам начина, по който работи.
Съвети за опитва нещо ново
Примерите по-горе не са предназначени да бъдат "вдъхновение" за уникални идеи, просто просто няколко сайтове, които аз намерих, че аз искам да се считат за доста уникален. Факт е, вие не можете да търсите наистина около вдъхновение за нови идеи, както и наем на плячка точката на нея. Значи наистина може просто да се игнорира това цялата точка, ако се опитвате да измислям нещо ново!
• Пазете я Подходящи
Ако не смяташ да правиш нещо ново и уникално, запитайте се "не го прави чувство" и "е в рамките на търговска марка?" Ако това е така след това да се прави!
• Пропускане на всичко, което знаеш!
Добре може би не всичко, основни принципи, могат да останат същите, но за това не е точката търси вдъхновение за нови идеи, ти просто ще се насочи в грешна посока.
• Пазете равнище на качество
Мисля, че по принцип, ако новата ви идея изглежда добре, работи добре и е много по-лесно за вас да се обоснове.
Какво ще търсите по-качествен дизайн?
Има толкова много неща, които могат да направят дизайна изпъква като качество, бих казал, че съм просто сте обхванати някои от базовите точки. Така че искали да видите вашите идеи и мисли за това, което търсите, когато решава дали даден дизайн е добро или не.
