Мазмұны
- 1. Эблтон
- 2. Adobe & HTML
- 3. Бөлек оқиға
- 4. BBC News
- 5. 2012 ж. Салу
- 6. Мазмұны
- 7. CSS-трюктер
- 8. Карри
- 9. dConstruct 2012 ж
- 10. Disney.com
- 11. Фрай, 3-шығарылым
- 12. Гов.ук
- 13. Heroku мәртебесі
- 14. Lotta Nieminen
- 15. Microsoft
- 16. Көпбұрыш
- 17. бүлік
- 18. Жіңішке байланыстар
- 19. Старбакс
- 20. Таза
- 21. Келесі веб
- 22. Дизайн нысаны
- 23. Уақыт
- 24. Біріккен Pixelworkers
- 25. Нотр-Дам университеті
2012 жылы нақты веб-дизайн шынымен де кең таралды. Этан Маркоттаның A List Apart туралы мақаласынан екі жыл өткен соң, бұл тек түсінік емес еді. Ірі брендтер оны қабылдай бастады, және олардың көпшілігі біздің айналымда ұсынылған.
Жауапты веб-дизайндағы кейбір жетекші шамдардан сұрадық - мақаланың соңында тізімді таба аласыз - соңғы 12 айда іске қосылған сүйікті жауап беретін сайттарын таңдауды сұрадық, міне, олар не ойлап тапты. Бұл клиенттің мойнынан дем алмай еркін жүре алатын жеке жобалардан бастап, Microsoft, Disney, Currys және Starbucks сияқты инновациялық клиенттік жұмыстарға дейін және ВВС, The болашақта қол жетімді үй ішіндегі жұмыстарға дейін әсерлі аралас. Келесі веб және уақыт.
Міне, олар алфавиттік тәртіпте:
1. Эблтон
«Мен ешқашан Футураны мұндай батыл пайдаланғанын көрген емеспін!» Берлиндік Ableton музыкалық бағдарламалық жасақтамасын әзірлеушіге арналған Edenspiekermann шығармашылығының дизайнері, спикері және авторы Эллиот Джей Стокс. «Дегенмен, ол батыл кескінмен және жарқын түстер палитрасымен үйлеседі».
Стефани Ригер, дизайнер және Эдинбургте орналасқан Wei ұялы дизайн бойынша кеңес берушінің иесі, келіседі: «Бұл керемет, көңілді және брендтік сайт. Сайттың бөліктері сәл ауыр, бірақ аудиторияны ескере отырып , брендтің табиғаты және музыка мен бейнені қосу қажеттілігі, менің ойымша, олар керемет жұмыс жасады. Көптеген кішкентай шығармашылық (және практикалық) дизайнерлер үшін аң аулауды ұмытпаңыз - бағдарламалық жасақтаманы салыстыру кестесіндегі айналмалы бағандар белгілері сияқты. кішірек экрандарды жақсырақ орналастыру үшін. «
2. Adobe & HTML
«Adobe-дің веб-өнімдерін көрсететін бұл сайт шынымен де көп адаптивті орналасу дизайнер және әзірлеуші Стивен Хэй түсіндіреді: «нақты жауап беретін дизайннан гөрі.» өнімділігі едәуір жақсаруы мүмкін, мен ұялы телефон арқылы парақтың жоғарғы жағындағы навигацияның көп бөлігін алғанды ұнатпаймын. Бұл сайтты атап өтуімнің себебі - Adobe баспа дизайны бағдарламалық қамтамасыздандырудың заманауи желісі мен оның дизайнерлерінің қажеттіліктерін мойындай бастайтындығы туралы бейімделген орналасуы да, мазмұны да. Adobe өзінің дизайнерлік тамырымен осы сайтты графикалық тартымды, толыққанды жауап беретін дизайнға айналдыруға мүмкіндігі бар ».
3. Бөлек оқиға
«Жаңадан жасалған An Event Apart тек қана керемет емес, сонымен қатар өте керемет жасалған», - дейді Тим Кадлец, веб-әзірлеуші және оның авторы Жауапты дизайнды жүзеге асыру. «[Әзірлеушілер] мүмкін болған кезде SVG белгішелерін пайдаланады, егер қажет болса, PNG-ге қайта оралады. Суреттер көрінген кезде жалқау жүктеледі. Мысалы, оқиғалар парағында төмен жылжу кезінде сіз динамиктің суреттерін жіңішке түрде көре аласыз «Мұның бәрі тартымды және таза дизайн!»
4. BBC News
«2012 жылдың ең жақсы жауап беретін сайты BBC News мобильді сайты болды», - дейді Полл Роберт Ллойд, Clearleft дизайнері және .net сайтының ай сайынғы Responsive бағанының авторы. «Әзірге ол орналасуы жағынан жұмыс үстелі браузерлеріне дейін жетпесе де, бұл сөздің шын мағынасында жауап береді.
«Мобильді-бірінші менталитетпен жасалған, ол әр түрлі құрылғылардың сипаттамаларын керемет түрде қанағаттандыру үшін масштабтайды. Бұл прогрессивті жетілдірудің керемет мысалы. Резиментальды суреттердің айналасында көптеген пікірталастар бар, бірақ ВВС-дің көзқарасы өте прагматикалық. Белгілеу тек бір суретке сілтеме жасайды» , тақырыптық әңгіме үшін және шартты жүктеу тек басқа құрылғылар үшін жоғары деңгейге бейімделген суреттерді тек анағұрлым қабілетті құрылғылар алады дегенді білдіреді.Сайтқа кез-келген құрылғыдан кіріп қана қоймай, сонымен қатар өте жылдам жұмыс істейді.
«Келесі жылы мен көрнекі дизайн мен макетке қарағанда өнімділікке көп көңіл бөлгім келеді. Осыған байланысты BBC News мобильді сайты басқаларға үлгі болуы керек».
5. 2012 ж. Салу
«Жылдың ең сүйікті бөліктерінің бірі - Энди МакМиллан мен Кайл Мейердің жаңа Build конференция алаңында не ойлап тапқанын көру», - дейді жетекші дизайнер Рейган Рэй және Паравелдің үштен бірі. «Олар 2012 жылғы нұсқаға жауап берді және менің ойымша, бұл олардың бүгінгі күнге дейінгі күш-жігері. 2013 жылды күтуге болмайды».
Өкінішке орай, 2013 жылғы конференция соңғы құрылыс болады. Энди Макмилланмен болған сұхбатымызды оқыңыз.
6. Мазмұны
«Мазмұн журналы Этан Маркотпен өзінің шығармашылық директоры ретінде әділетсіз артықшылыққа ие болуы мүмкін - бірақ ешкім менің таңдауым әділ болуы керек деп айтқан жоқ», - дейді Мат Маркиз, Бостондағы Filament Group компаниясында жұмыс істейтін дизайнер / әзірлеуші және Responsive Images қауымдастығының негізін қалаушы және төрағасы. W3C үшін топ.
«Мазмұны әдемі типографиямен және оның мазмұнын сақтайтын жалпы дизайнмен мақтана алады - кез-келген мөлшерде алдыңғы және орталық. Дизайн әр шығарылымға негізделген, суреттің үзілуіне байланысты әр түрлі жолдармен оралады. Суреттер дизайнды жетілдіріңіз, бірақ ешқашан назарыңызды аудармаңыз. Бұл оқудың шынайы ләззаты, және бұл шынымен де осы «веб-дизайн» туралы ».
7. CSS-трюктер
«Тағы да: Крис Койердің аты жазылған сайтты таңдау аздап алдау сияқты сезіледі, бірақ әділеттілік - бұл жігіт - хайуан, және ол осы дизайнмен жұмысты өте жақсы жасады», - деп күледі Мат Маркис. «Крис өз сайтында ақылға қонымсыз пайдалы ақпаратты басқарады және ол мұны әр экран өлшемінде логикалық және қолдануға болатын ғана емес, сонымен қатар жеке тұлғаға ие дизайнмен жасайды.
«Бұл жерде Кремнің codepen.io сілтемесіне сілтеме жасалады (редакциялау кезінде әлі толық жауап бермейді), бұл жылдам демо мен тестілік жағдайларды жасаудың керемет құралы. Онда бірнеше керемет жұмыс бар.»
8. Карри
«Карриде бізде көптеген агенттіктер мен жеке сайттардың дизайны деп есептелетін деңгей болмауы мүмкін, бірақ мен оны дизайнерлік техниканы кеңірек игерудегі маңызы үшін таңдаймын. Бұл бірінші шынымен ауқымды электронды сауда сайты Мен оның жауап беретін дизайнды қабылдағанын көрдім », - деп түсіндіреді Джеймс Янг, Offroadcode креативті директоры және« Веб-дизайндағы ең жақсы жауап беретін мәселелер ... және оларды болдырмауға! »Авторы.
«Бұл мазмұнның көптеген түрлерімен және барлық формалар мен өлшемдермен жұмыс істеу кезінде бірқатар құрылғыларда жақсы тәжірибе ұсынады және сатып алуға қарапайым сатып алу процесін қамтиды - барлығы бір код базасында анықталған, оларды Currys веб-командасы ».
9. dConstruct 2012 ж
«Керемет спикерлер құрамынан басқа, dConstruct сайтының өзі өте жақсы дайындалған тәжірибе», - дейді Огайода орналасқан Sparkbox шағын агенттігінің президенті Бен Каллахан. «Сайттың сүйікті бөлшегі - бұл навигация. Көрудің кішігірім көрінісі үшін қосымша иконографияны ескеріңіз. Бұл сенсорлық мақсатты аймаққа шынайы күтім жасалғанын және кішігірім құрылғыларда сайтты қарайтын пайдаланушылардың айқын емес мәнін білдіретіндігін көрсетеді» - мобильді-бірінші менталитет.Жарайсың @clearleft! «
10. Disney.com
«Диснейдің медиа күрделілігі бар сайт жауап бергенде, ол мультимедиялық мазмұнды интернетте жеткізу тәсілінің шынайылығын көрсетті», - деп есіне алады Filament Group веб-дизайнері / әзірлеушісі Скотт Джел. «Сайттың таза емес дизайны сайтта кіруге болатын Дисней фильмдері мен теледидарларындағы бай бейнелерді және Ajax пен history.pushState парақтың жұқа, ауыспалы емес өтуін жасайды. Сондай-ақ сайт жақсы контекстік интерактивтілікті, мысалы, сенсорлық құрылғыларға арналған ыммен басқарылатын карусельдер және кішігірім экрандардағы парақтан тыс бағыттағы навигация тәрізді. «
11. Фрай, 3-шығарылым
«Fray-дің 3-шығарылымы, 'веб-сайттың түпнұсқалық журналы', менің сүйікті жауап беру дизайны болды, мен оны осы жылы көрдім, мүмкін менің сүйікті дизайным болды«, - деп еске алады Скотт Джел. «Мұқабаның көркем туындыларындағы дизайн элементтері бүкіл орналасу кезінде қайта пайдаланылатын әдемі жауап беретін мұқабаның дизайнынан басқа, басылымдағы мақалалардың әрқайсысы жеке баспаға арналған журналдарда кездесетіндей, өзіндік көркемдік бағыттағы дизайнымен ерекшеленеді, бірақ сирек кездеседі Интернетте. Көптеген макеттер әдемі әсерге келтірілген CSS-ті қосады, мысалы, 'брекет' мақаласының бұрмаланған тақырыбы мен сызықтары, сонымен қатар, тырнақшалар бойынша офсеттік. Тек ескерту: сайттың тақырыбы ересектерге арналған. «
12. Гов.ук
Стивен Хэй: «Gov.uk дизайны визуалды түрде қарапайым (іс жүзінде ешқандай сурет жоқ), бірақ оның мақсаты қандай екені түсінікті: сізге ақпаратты жылдам табуға көмектесу. Мемлекеттік веб-сайттар үшін бұл оңай мәселе емес. Мен бұл сайтты жақсы көремін тек жауап беруші ғана емес, сонымен қатар қолданылған құрылғыға қарамастан, ойластырылған мазмұн мен құрылымның пайдаланушының тәжірибесін жақсартуға болатындығының тамаша мысалы.Мемлекеттік органдардың өз ақпаратын қол жетімді етіп ұсынуы өте маңызды; осы сайттың қарапайымдылығына сенімдімін басқа мемлекеттік ұйымдар үлгі алатын болады ».
13. Heroku мәртебесі
«Heroku - бұл веб-қосымшаларды орналастыру қызметі, сондықтан бұл сайт техникалық аудиторияға қарай ауытқиды», - дейді екінші таңдау бойынша Скотт Джел. «Heroku-дің мәртебесі сайт - бұл қызметтің жұмыс уақытын бақылауға арналған орын, онда орын алған оқиғалар туралы хабарламалар және есептер уақыты көрсетіледі. Шағын экрандағы презентация консервативті, бірақ өте функционалды және мағыналық жағынан бай, тізімі таза жасалған презентациямен. Алайда. , кең көріністерде уақыт шкаласы инциденттер қорапқа салынған және қисық HTML5 кенеп сызылған сызықтары арқылы уақыт нүктелерімен байланыстырылатын, деректерді тік көрнекілікке айналдырады, бұл мазмұнды тартымды етеді. «
14. Lotta Nieminen
«Лоттаның ақылды сайты барлауды ынталандырады, өйткені экранның сол және оң жақтары көршілес бөліктердегі мазмұнды мазақ етеді», - дейді Эллиот Джей Стокс. «Мен мұның әр түрлі енде бұзылатынын күттім, бірақ мінез-құлық әрдайым тұрақты болып қалады және жеке бағандарды жинақтау және өлшемін өзгерту үшін медиа сұрауларды JavaScript-пен біріктіреді.»
15. Microsoft
«Майкрософттың жаңа сайты мені көптеген себептер бойынша қызықтырады», - дейді Бен Каллахан. «Майкрософт сияқты алыптың жауап беретін веб-дизайнның артында тұрғанын көру үшін бұл біздің соңғы екі жылда қаншалықты жеткенімізді көрсетеді. Дизайн Метро стилін анық қамтиды және бізге көп жағдайда жетіспейтін тазалық пен кеңістіктің деңгейін береді. корпоративті сайттар.Сондай-ақ, көптеген навигациялар бар, бұл көптеген көріністер мен өзара әрекеттесу модельдерін қолдануға жарамды болуы мүмкін, мен ашылатындардың артта қалғанын жақсы көремін басыңыз немесе түрту [оқиғалар] қарсы : hover. Жақын арада мұны, тіпті үлкенірек шешімдерде де көреміз деп ойлаймын. Жарайсың @paravelinc! «
Сайтта жұмыс істеген Рейган Рэй: «Трент пен Дэйв паравел мүйізін қарау үшін өте қарапайым, сондықтан мен солай етемін. Біз Microsoft корпорациясы үшін осындай қызықты уақытта кішкене рөл ойнағанымызға қуаныштымыз. Бұл керемет үлгі деп ойлаймын. жауап беретін дизайнды қабылдайтын ірі корпорация туралы ».
16. Көпбұрыш
«Полигон - бұл үлкен ағаларын (IGN, Gamespot және басқаларын) ұятқа қалдыратын, ақылға қонымсыз бай ойын сайты», - дейді Дара Руперт, Paravel-дің жетекші әзірлеушісі және ShopTalk-тің Крис Койермен бірге жүргізушісі. «Үлкен графика менің ойыншылардың сезіміне әсер етеді. Интерьер посттары - бұл көркемдік бағыт пен сезімтал архитектураның керемет қоспасы».
17. бүлік
Elliot Jay Stocks: «Қарапайым, орталықтандырылған, бір парақтан тұратын сайттар оңай жауап беретін дизайнға ауысатын сияқты көрінуі мүмкін, бірақ бәрін біркелкі қалпына келтіруге шеберлік, мұқият қарау және мұқият көзқарас қажет. Riot-тің сайты мұны жасайды».
18. Жіңішке байланыстар
«Менде арық галстуктар болмаса да, 80-ші жылдардағы қалдықтардан басқа жерде сақтауға арналған қоқыс жәшігіне тығылғаннан басқа, менің ойымша, бұл сайт өте жақсы орындалған», - дейді Бен Каллахан. «Сондай-ақ, күрделі сайттарда жауап беретін техниканың қолданылуы көңілге қуаныш ұялатады: бұл жағдайда электронды сауда тәжірибесі бар. Бұл сайттағы навигация барлық қарау нүктелерінің ажыратымдылықтарында ерекше, бірақ спектрдің кішігірім шегінде өте жақсы жұмыс істейді. Оның визуалды табиғаты осындай көлемдегі дүкен үшін өте қолайлы және ол қолданылғанына қарамастан жарамды болып қалады : hover сенсорлық құрылғыларда. Жарайсың @falkowski! «
19. Старбакс
«Жауапты Starbucks.com керемет, бірақ бізді одан да жігерлендіретін нәрсе - онымен бірге жеткізілетін веб-стиль нұсқаулығы», - деп атап өтті Paravel негізін қалаушы Трент Уолтон. «Бұл сұйықтықтың қуатын / сезімтал орналасуын .psd немесе .pdf мүмкіндігіне қарағанда әлдеқайда жақсы жеткізеді.»
20. Таза
«Мен бұл тізімге жаңа ғана қауіпті уақытты енгіздім, - деп ескертті Мат Маркиз осы уақытша татуировкалық сайт туралы, - сондықтан сізден және / немесе сіздің бастығыңыздан алдын-ала кешірім сұраймын. Мен уақытты қарап отырып, ұятты уақытты өткіздім. Tattly-де әр түрлі құрылғыларда дизайн жасайды және мен тек белгілі бір үзіліс нүктесінде бола алатын тәжірибе алғым келеді, олар өз сайттарының құрылғының / терезенің өлшемдерінің кең ауқымына сәйкес келетіндігіне көз жеткізіп, өте жақсы жұмыс жасады. Мүмкін, одан да маңыздысы, олар маған өзімді жаман адамдай етіп көрсетудің сенімді әдісін ұсынады. Білесің бе, қалай болғанда да бірнеше күн «.
21. Келесі веб
«Мен әлі де жабысқақ бүйірлік тақтаның жанкүйері болмасам да, бұл сайт өте керемет», - деп мойындайды Дэйв Руперт. «Бос кеңістік пен типография шынымен де жайбарақат жағдай жасайды. Мен TNW планшетіне кіргенде жағымды сезінемін: оның сезімі мен оқуы жақсы».
22. Дизайн нысаны
«Фрэнк Чимероның оқуға ден қою тәжірибесі барлық деңгейде шабыттандырады», - дейді Трент Уолтон. «Оның» Дизайн формасының «онлайн нұсқасы оқуға қуанышты. Тартымсыз тарау навигациясы жақсы жұмыс істейді және медиа-сұрау қаріп өлшемі масштабтау бәрін керемет пропорционалды ұстайды ».
23. Уақыт
«The Boston Globe жетекшілігімен уақыт өзінің іске асырылуымен жауап беретін жаңалықтар веб-сайттары әлемінде өз орнын тапты» деп Стивен Хэй қошемет көрсетеді. «Әлемде бізде» толық веб-сайтқа «сілтеме ұсынатын бір ғана веб-сайттың ұялы байланыста болуы фактісі қазірдің өзінде жеткілікті, бірақ сайт мобильді телефонда жақсы көрінеді: бұл уақыттың сәйкестігі. мәтін кейбір құрылғыларда сәл кішкентай болуы мүмкін, бірақ әзірлеушілер масштабтауды қалдырды: әрқашан жақсы идея. Өнімділікті жақсарту үшін кейбір қадамдар жасауға болады, мысалы, масштабталған кескіндерге қызмет көрсету [бірақ], дегенмен бұл дұрыс бағыттағы қадам. «
24. Біріккен Pixelworkers
«Мен United Pixelworkers батыл қарапайымдылығының жанкүйерімін және қатты экранның орналасуы мен шағын экрандарға арналған навигацияны өңдеу жақсы жұмыс істейді», - дейді Джеймс Янг. «Currys сайты сияқты, бұл кез-келген құрылғыда менің негізгі міндетім - тәттілерді сатып алуды жеңілдететін электронды сауда сайты.
«Сатып алуды аяқтау үшін Shopify-ке секіргеніңіз ұят және мен жақын арада кем дегенде фирмалық төлемді аяқтайтын бетті көргім келеді, бірақ футболкаларыңызды сатып алу өте оңай».
«Жауапты электронды коммерция қиын, бірақ оны Pixelworkers анықтаған сияқты», - деп толықтырады Дейв Руперт. «Керемет үй парағы, өнімнің керемет беттері, төлемнің керемет ағыны. Егер сіз керемет электронды коммерциялық сайт жасағыңыз келсе, бұл сіздің барыңыз.»
25. Нотр-Дам университеті
«Мен Нотр-Дам Университетінің капюшон астындағы кейбір нәрселерін жақсы көремін», - дейді Тим Кадлес. «Ол шағын экрандардағы парақтың салмағын азайту үшін RESS-ті пайдаланады. Сонымен қатар Campus Tour мүмкіндігін жақсарту үшін геолокацияны қолданады. Егер сайт сіздің кампуста екеніңізді анықтаса, қай жерлер жақын екенін анықтап, сізге жаяу жүру бағыттарын ұсынады. Бұл пайдалы әдіс Тәжірибені жақсарту үшін пайдаланушының контекстін және құрылғының мүмкіндіктерін пайдалану. «
Осы мақала үшін 2012 жылдың ең сүйікті жауап беретін сайттарын таңдағаны үшін біздің барлық салымшыларымызға мың алғыс: Бен Каллахан, Эллиот Джей Акциялар, Тим Кадлэк, Пол Роберт Ллойд, Мат Маркиз, Скотт Джел, Стефани Ригер, Стефан Хэй, Джеймс Янг және басқалары. Паравелден: Трент Уолтон, Дейв Руперт және Рейган Рэй.
Сізді кейбір сайттарды тексеруге шабыттандырды деп үміттенеміз. Түсініктемелерде біздің таңдауымыз туралы ойыңызды және осы жылы қай сайттар сіздің таңдаулыларыңыз болғанын хабарлаңыз.
