Веб дизайн тренди

0
1

Shares

Між дизайном і розробкою існує тонка грань, яка, з переходом у нове десятиріччя, стає все більш розмитою. Чи достатньо просто намалювати красивий макет в Фотошопі? Може бути п’ять років тому цього і було досить. В наші дні середньостатистичний користувач інтернету вимагає більшого. Весь лоск сайту з часом набридає, якщо в ньому немає ніякої суті. Якщо ваша єдина мета вразити дизайнерське співтовариство вашими яскравими роботами довго на плаву ви не протримаєтеся. 2011 рік характеризується не красою, а функціональністю. А тепер, власне, тренди нового року і найближчої декади: віртуальна реальність, постійний зв’язок та інтерактивний дизайн.

Як залишитися релевантним дизайнером в 2011? Головна мета дизайнера не засліпити, а заманити. Будь-який дизайнер може отримати «охи» й «ахи», які легко забуваються. Найкращий дизайнер здатний створити середовище, яке вабить і зачаровує користувача так, що він навіть і не думає про те, щоб шукати кнопку «назад». Кілька елементів зібрані воєдино, щоб створити прекрасний світ, в якому є все: гармонія кольору, інтуїтивний дизайн, легко доступна інформація і швидкий відгук. Крім того, ніколи не можна недооцінювати силу простоти. Звичайно це завжди було так, але в 2011 ви не тільки під всепрощаючої егідою десктопів і лептов. Зараз ваш дизайн повинен справляючись з нетбуками, смартфонами і таблетками. Ви готові?

Поглянемо на 11 ТОП трендів в 2011 році.

1. Більше CSS3 і HTML5

Нарешті можна зітхнути з полегшенням! CSS3 і HTML5 були на горизонті веб-дизайну останні пару років, але зараз, в 2011, ми бачимо вибух цих технологій. Дизайнери починають йти від технології Flash. Ви і так знаєте, що вона не завжди працює добре, нові технології тепер доступні вашим постійним і потенційним відвідувачам. У 2011 ви відійдете від Flash і пізнаєте всю магію HTML5. Просто погляньте на приклади:

Тепер коли ви поглянули на приклади, зрозумійте, що Flash і HTML не рівні суперники. Є достатньо місця для обох в 2011 році. Проблема в тому що дизайнери 2010 (і раніше) не правильно використовували Flash. HTML5 знімає частину тієї відповідальності, яку ми поклали на плечі Flash, однак, HTML5 ще не може замінити окремі елементи дизайну, які ми можемо отримати тільки за допомогою Flash.

Можливо, ще більш захоплюючим є той факт, що CSS3 повною мірою доступна нам в цьому році. Заміняє Photoshop (не-не-не, Adobe ще не пішов на спочинок), адже за допомогою CSS3 можна легко створити тінь для тексту або прозорості картинки. Якщо ви ще не почали, то саме час зануритися у вивчення CSS3 і HTML5.

2. Прості кольорові гами

Простота. Немає нічого настільки ж дієвого як просте повідомлення на спокійному тлі. Спокій може бути досягнута декількома способами. Забудьте про чорному і білому, і навіть про відтінках сірого. Подумайте про зеленому жовтому або навіть червоному в якості основних. Втім, обмежте свою палітру двома або трьома кольорами. Працюйте з відтінками вибраних вами кольорів для різноманітності. Адже ж чудово, коли всього кілька кольорів доносять ваше заспокійливо послання. Дивіться:


З допомогою відтінків зеленого була створена ця примочка для твіттера. Примітка: Цей сайт був створений з допомогою XHTML/CSS і Javascript.


Червоний може бути досить дратівливим, якщо використаний неправильно.

[adsense]

3. Mobile Ready

Смартфони, планшети, нетбуки, о Боже! Запаморочливе кількість мобільних гаджетів доступні покупцеві в 2011 році. Це означає, що веб-дизайн повинен бути кросплатформним.

Щоб створити сайт, підготовлений для мобільних платформ не досить прибрати «прикраси» з дизайну. З-за цього дизайн може вийти порожнім і безликим. Хоча не виключено те, що якщо ви приберете частину фішок з дизайну ваш бренд не піддасться видимих змін. На щастя технології все більше допомагають нам, позбавляючи від цього тягаря.

Веб-дизайн для мобільних пристроїв зробив крок далеко вперед з допомогою CSS3. Одним з найбільш важливих досягнень є те, що ви можете спроектувати дизайн всього сайту і з допомогою засобів розробки підігнати його під пристрій користувача.

Дуже заманливо створити версію сайту для мобільної платформи, проте це більше не задовольняє сучасну аудиторію. Все частіше у мобільних версій є можливість відвідати оригінальний сайт. Якщо у вас немає такої опції або оригінальний сайт не оптимізований під мобільні пристрої ви не готові до 2011 року. «Синоптики» прогнозують, що продажі смартфонів у цьому році перевищать продажі персональних комп’ютерів. Підготуйте ваш дизайн для задоволення потенційного попиту.

4. Паралакс скролінг

Паралакс скролінг призначений не тільки для олдсульних відеоігор. Як зазначалося раніше, один із трендів на 2011 рік — створення відчуття глибини. Що може бути зручніше для створення цього відчуття ніж паралакс скролінг? Він використовує шари для створення ілюзії тривимірного простору. Ефекту можна домогтися за допомогою простих CSS трюків або jQuery плагін Spritely. Найефективніший варіант використання багаторівневого скролінгу в якості вторинного елемента дизайну. Наприклад, шапка, футер або фон. Зробивши його невід’ємною частиною навігації ви вкрай розчаруєте користувача.

5. Проектуйте для тач скрін, не для миші

Технології стали набагато більш відчутні. Юзабіліті перетворюється з абстрактної у щось відчутне. Тачскрін використовується планшетами, більшістю смартфонів і деякими десктопами. Пристосований ваш дизайн до управління пальцями?

Скільки з ваших робіт орієнтовані на мишу? Як дизайнери, ми використовуємо безпосередньо миша. Коли ми наводимо на посилання підсвічуються (Примітка перекладача: «Якщо дизайнер не повний «дивак», то підсвічуються»). Як не дивно у тачскріна немає наведення як такого. Як ваш дизайн покаже користувачу що це посилання? Що на рахунок випадаючих меню? Це так само не злетить при користуванні тачскріном.

Як відвідувачу ознайомитись з вашим сайтом? Досить спірний момент, однак для тачскрін-орієнтованого сайту горизонтальна прокрутка може виявитися куди більш зручною, ніж вертикальна. Ідеально вписується в цю нішу концепція журналу, де відвідувач фактично гортає сторінки вашого сайту.

І, нарешті, розглянемо можливість використання плаваючого макету, як частини вашого інтерактивного дизайну. У 2011 ви вже не будете мати справу з дозволом екрану. Користувачі легко можуть змінити вид перегляду з вертикального на горизонтальний. Ваш дизайн повинен бути гнучким, щоб задовольнити будь-які примхи, інакше він стане копалин.


Дитина дивиться на iPad. Фотографія Стіва Пейна, Flickr

6. Сприйняття глибини

Ні, я не кажу зараз про ефемерне «Я бачу твою чашку кави і клавіатуру». Суть глибини сприйняття — обсяг, та такий, що деякі елементи вашого сайту здаються ближче, ніж інші. Це створює відмінний 3D-ефект, коли зроблено вміло. Згадайте як це дивитися 3D блокбастер «Аватар»? Предмети буквально вистрибують з екрану.

Хоча 3D технології ще толком і не дісталися до веб-дизайну, ви можете відтворити цей обсяг.

7. Великі фотобекграунди

Кількість великих фонів-тягучок зросте в 2011. Ці зображення високого дозволу і будуть покривати сайт цілком. Великі фото — легкий спосіб захопити аудиторію. Природно фонове фото повинно бути пов’язане з контентом. Розмістивши милу картинку, яка буде випадати з контексту, ви нашкодите юзабіліті. Тренди говорять нам про те, що кращим виходом буде злегка прозорі образи, не кидають тіні на контент, гармонійно вписуючись в нього.


8. Цікаві доменні імена та їх використання

Це звичайно не найгостріше питання в веб-дизайн, однак дуже хочеться побачити більше оригінальних доменів. Коли-то бажане .com втратило свою привабливість, в першу чергу, тому, щоб знайти вільний домен потрібно придумати ще й свою мову, начебто клингонского(пустощі перекладача, в оригіналі — мова na’vi). У 2011 році ми помітимо більш рідкісне використання домену .com і прискорене використання таких химерних доменів .me і .us. Задумайтеся про можливості і хапайте їх до того, як вони зникнуть.

9. QR: Quick Response

Якщо ви бачили ці квадратні штрих-коди з’явилися журналів, візитних картка і ще багато де, ви знаєте що вони — гарячий тренд 2011 року. Як це перейде в веб-дизайн? Дивно добре, насправді.

Ці штрих-коди називаються QR, коротко від Quick Response. Просто сфотографуйте унікальний штрих-код вашим телефоном, і як за помахом чарівної палички відкриється сайт, до якого цей штрих-код відноситься. Зручність QR-кодів в тому, що є мільярди способів їх використання. Додайте його на сайті для того, щоб у відвідувачів було посилання на мобільну версію. Так само ви можете відстежувати ваших відвідувачів через QR-коди, розміщуючи спеціальний рефералльний код в URL. Коли ви коментуєте статті на сайті, подібному цього, використовуйте QR-код в якості аватара.

2011 рік дуже «мобільний» і буде корисно використовувати цю відносно нову технічну фішку.

10. Превью (мініатюри)

Заповзятливі люди з Google представили звичайному користувачеві можливість перегляду пошукової видачі за допомогою превью. Пройшли ті дні, коли треба кликати по посиланню щоб побачити вміст сайту. Зараз потрібно просто натиснути на «лупу» або навести на посилання (це в тому випадку, якщо у вас не тачскрін). Перед вами магічним чином постає те, що знаходиться по ту сторону кліка.

Якщо ваш сайт використовує флеш, з превью виникнуть проблеми. Прев’ю не буде відображати флешевих елементи дизайну.

Так як середньостатистичний користувач стає все більш і більш підкованим в серфінгу чекайте, що в 2011 більше людей будуть використовувати мініатюри як засіб навігації. Адже так велика спокуса оцінити сайт за його мініатюрі.

11. Постійний зв’язок / Лайфстрімінг

Останнє, але не менш важливе, це постійний зв’язок. Інтернет по своїй суті абсолютно стерильна середовище. Ми робимо його людяним, розповідаючи про наших життях у відкритій бесіді, чекаючи більше особистих подробиць. Характерною особливістю блогів і портфоліо в 2011 стане повна інтеграція з twitter’ом (більше це не буде просто посиланням на сторінку в ньому), а люди все частіше будуть говорити вам де вони зараз за допомогою Foursquare.

І в ув’язненні

Згодні ви чи ні? Є що-небудь додати? Ми будемо раді вас почути!

автор: nsamoylov

джерело: http://habrahabr.ru/blogs/web_design/111890/

Схоже

Share on Facebook Share
2
Share on TwitterTweet
0
Share on Google Plus Share
Share on Pinterest Share
0
Share on LinkedIn Share
Share on Digg Share
2
Total Shares
comments powered by HyperComments!

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here