10 прафесійных парад па абнаўленні вэб-дызайну

Задаволены

• 1. Прататыпаванне вельмі важна
• 2. Магчымыя прататыпаванне шнурка
• 3. Інструменты, якія палягчаюць вашу працу
• 4. Пабудуйце яго на каркасе
• 5. Праверце свае здагадкі
• 6. Атрымайце водгук альбо паедзеце дадому
• 7. Пераход да інтэрактыўнага і мабільнага: ведайце ўмовы ўдзелу
• 8. Ведайце свой інструмент
• 9. Ні адзін прадукт не скончаны
• 10. Вы не з кручка

Доўгі час вэб-дызайн сапраўды быў падобны на макеты друку. Сайт можа быць запоўнены дынамічным зместам, запоўненым з базы дадзеных, але асноўныя тыпаграфскія сістэмы сеткі вызначалі спосаб распрацоўкі сайтаў. Большая частка нашай навігацыі была заснавана на эмуляцыі фізічных сістэм, такіх як укладкі тэчак або старонкі. Гэтыя канвенцыі дазволілі нам хутка рабіць сайты, і мы, здаецца, думалі, што ўсё працуе выдатна - і, верагодна, гэта было ў большасці.

За апошнія некалькі гадоў усё стала больш цікавым, складаным і інтэрактыўным. Ад адносна невялікіх дызайнаў сайтаў да шматслаёвых прыкладанняў, любы інтэрактыўны дызайн зараз патрабуе новага ўзроўню хуткага тэсціравання, стварэння прататыпаў і перапрацоўкі перад стварэннем і выпускам цвёрдага канчатковага прадукту. Патрэба ў тым, каб дызайнер добра ведаў абмежаванні і сілы платформы, для якой яны распрацоўваюць, ніколі не была больш важнай. Гэта новыя задачы для любога дызайнера, якія пагружаюцца ў воды ўзаемадзеяння, але тут якраз усё атрымліваецца весела.

1. Прататыпаванне вельмі важна

Прататыпаванне - гэта не варыянт. Як праславіўся Хемінгуэй, кажучы: "Першы чарнавік - гэта дзярмо". Калі тэставанне альбо стварэнне макетаў не з'яўляецца фармальнай часткай вашага працэсу, то па сутнасці ваш канчатковы прадукт з'яўляецца прататыпам - і, напэўна, гэта дзярмо. Тэрміны і бюджэты могуць выціснуць капірайтынг, унутраны кантроль і стварэнне прататыпаў з супярэчлівых элементаў, якія трэба мець. У гэтым выпадку знайдзіце спосаб маштабавання ўсяго, каб вы маглі захаваць пэўную колькасць тэсціравання і прататыпавання ў сваім праекце. Ваш кліент, ваша каманда або інвестары будуць удзячныя вам, калі рэнтабельнасць інвестыцый узрасце.

Магчымасць атрымаць вялікую прыбытак - гэта вынік унутранага тэсціравання, ітэрацыі і ўнясення неабходных і разумных змен у сайт альбо прадукт перад адпраўкай для грамадскасці. Калі вы не робіце прататыпы, вы дэманструеце, што гатовыя дазволіць сваёй аўдыторыі выкарыстоўваць ваш прадукт, як бы прататып - вопыт, які можа нанесці шкоду вашаму брэнду і доўгатэрміновым мэтам.

2. Магчымыя прататыпаванне шнурка

Бюджэт і час - гэта заўсёды абмежаванне, але калі вы працуеце на шнурках, у вас усё яшчэ ёсць варыянты. Просты прататып эскіза ручкай і паперай, за якім ідзе добры перыяд пытанняў і адказаў, далёка дапаможа вам зразумець, як інструмент павінен быць распрацаваны для вашай аўдыторыі.

3. Інструменты, якія палягчаюць вашу працу

Магутны універсальны і эфектыўны інструмент для стварэння прататыпаў - гэта хуткае прататыпаванне - тое, што я ўзяў ад Дэна Рубіна. Стварыце набор плоскіх візуальных кампазіцый (JPG або PNG) выглядаў, якія вы хочаце праверыць. Змесціце гэтыя віды як фон цела> элемент. Затым вы размяшчаеце анкерныя злучэння з фіксаванай вышынёй і шырынёй па абласцях дзеяння канструкцыі, выкарыстоўваючы абсалютнае пазіцыянаванне.

Папытаеце карыстальніка выканаць пэўную задачу, напрыклад, "Знайдзіце кнігу, дадайце яе ў кошык, а потым зарэгіструйцеся", а потым паглядзіце, ці будзе ён рабіць тое, што вы чакаеце ад іх. Адзінае паводзіны любых абласцей спасылак будзе паказана па змаўчанні курсор: паказальнік далей : навядзіце курсор, але гэтага дастаткова, каб дапамагчы карыстальніку пераходзіць ад старонкі да старонкі.

Каштоўнасць гэтага метаду ў тым, што вы можаце ўносіць надзвычай хуткія змены ў дакумент Photoshop і экспартаваць яго зноў у выглядзе JPG, а таксама аднолькава хутка змяняць абсалютна размешчаныя спасылкі ў HTML. Гэта даволі дзіўна хутка.

Падобна прыкладу спадара Рубіна, прыкладанне Invision дае вам магчымасць выкарыстоўваць дызайн любой дакладнасці з асноўных скрынак і стрэлак аж да максімальна дасканалых піксельных макетаў. Дадатак дае вам чысты і зразумелы інтэрфейс для загрузкі гэтых праглядаў, прысваення ім імёнаў, іх упарадкавання, а затым малявання і супастаўлення спасылак на любы з загружаных вамі праглядаў. Па сутнасці, InVision здымае інтэрактыўнае кадаванне з вашых рук і дае вам арганізаваную прастору для адсочвання версій прататыпаў.

Прастата сістэмы стала вялікай перамогай для нас у Zaarly, і мы выкарыстоўваем яе рэгулярна, асабліва пры стварэнні прататыпаў для нашага прыкладання iPhone. Для нас асабліва важна зрабіць прататып для мабільных платформаў. Узаемадзеянне, уласцівае новаму віду рынкавага попыту, мы вывучаем, што даступна ў рамках канвенцый пра iOS, і ў некаторых выпадках ствараем новыя ўзаемадзеяння. Мы можам на самой справе праверыць і змадэляваць гэты досвед, перш чым адправіць прадукт паўмільёну карыстальнікаў - што дазваляе нам працягваць дастаўку часта, але з вялікай асцярогай.

У InVision ёсць бясплатныя і платныя рахункі, якія адпавядаюць вашым патрэбам, і яны не адзінокія.

4. Пабудуйце яго на каркасе

Калі ваш інструмент або выраб складаны і можа быць пабудаваны больш шырока, вы сапраўды можаце нанесці шмат шкоды з дапамогай Sencha Touch, jQuery Mobile для ручных прылад альбо Twitter Bootstrap у Інтэрнэце. На самай справе гэта могуць быць цудоўныя інструменты для стварэння прыкладання, каб убачыць, ці мае ён сілу і сілу ў супольнасці, перш чым вы звар'яцееце, ствараючы свой уласны HTML і стыль. Выдатны прыклад таму - 52Network @ howell, які выдатна выкарыстоўвае ўзламаны Bootstrap.

5. Праверце свае здагадкі

Атрымаць аналітыку і слухачы падзей, далучаныя да вашага прыкладання. Гэта дазваляе вам назіраць і правяраць свае здагадкі і паглядзець, ці дзейнічаюць карыстальнікі так, як вы падазравалі, ці патрэбна наладка вашага UX. Google Analytics выдатна падыходзіць, але лепш было б адсочваць выпадкі выкарыстання на карыстальніка. KISSmetrics - выдатная варонка інструмента і адсочванне пераўтварэнняў у гэтай галіне.

Яшчэ адзін здаровы варыянт - проста паставіць дызайн перад людзьмі з простымі пытаннямі. Мой любімы інструмент - VerifyApp ад Zurb.

6. Атрымайце водгук альбо паедзеце дадому

Прататыпаванне на любым узроўні - гэта магутнае дапаўненне да вашага набору інструментаў і часта неабходнае ў распрацоўцы інтэрактыўнага Інтэрнэту і мабільных прастор. Але прататыпаванне не з'яўляецца самамэтай. Мы прататып для тэставання. Правільнае тэставанне юзабіліці - гэта мастацтва і навука, але яго можна зрабіць і з невялікім сэнсам.

• Выбірайце людзей, якія нагадваюць вашу аўдыторыю.
• Кіруйце людзьмі свабодна, даючы ім агульныя задачы, а не канкрэтныя дзеянні на сайце.
• Рабіце шырокія і карысныя нататкі.
• Перагледзьце і праверце яшчэ раз.

7. Пераход да інтэрактыўнага і мабільнага: ведайце ўмовы ўдзелу

Як доўгі час вэб-дызайнерам заўсёды было звычайнай практыкай пісаць свой уласны інтэрфейсны код, і тады, калі памеры праекта павялічваліся альбо кадаванне было больш строгім, чым магло змясціць мой набор навыкаў, я спадзяваўся на свае веды па кадаванні, каб падтрымліваць стабільную сувязь з распрацоўшчыкамі праект. Гэта заўсёды аказалася карысным, каб захаваць бачанне дызайну да канца.

Распрацоўка для мабільных сетак, платформаў iOS і Android стала значна больш складанай. Перашкода для моў праграмавання, неабходных для напісання для гэтых платформаў, магчыма, значна больш складаная, чым HTML / CSS і JavaScript. Больш разумна чакаць, каб дызайнер быў універсальным як у візуальным дызайне, так і ў кодзе на гэтым узроўні.

Існуе вялікая патрэба ў дызайнеры перакладаць свае працы на агульную мову дызайнера і распрацоўшчыка. Напрыклад, для iOS гэта азначае разуменне наменклатуры, якую Apple выклала ў сваіх Кіраўніцтвах па чалавечым інтэрфейсе. Гэта таксама цягне за сабой веданне абмежаванняў і паўнамоцтваў, даступных для платформы, і пра тое, як распрацоўшчык, магчыма, захоча выпрацаваць рашэнне для ўзаемадзеяння, якое добра ўпісваецца ў платформу.

Камунікацыя становіцца самым важным інструментам у адносінах дызайнера і распрацоўшчыка. Якія рэчы лёгка рэалізаваць на мабільным тэлефоне? Якія рэчы значна больш складаныя (напрыклад, вышыня лініі / вядучая ў родных праглядах iOS)? Галоўнае тут тое, што сістэмы распрацоўкі для iOS або android значна адрозніваюцца ад сістэм сучаснага вэб-дызайну.

У рэшце рэшт, абодва гэтыя майстры павінны быць арыентаваны на распрацоўку візуальна альбо ў кодзе. Гэта стварае сувязь, якая стварае выдатныя каманды і прадукты, якія вартыя іх солі.

8. Ведайце свой інструмент

Поўнамаштабны Інтэрнэт, мабільны Інтэрнэт, Android, iPhone, iPad і іншыя прылады маюць сваё ўласнае асяроддзе і культуру, якія ўплываюць на тое, як трэба разглядаць дызайн узаемадзеяння. Існуюць правілы, паводле якіх кожная платформа або прылада ўбудоўвала праграмна і культурна, што залежыць ад хуткасці Інтэрнэту, партатыўнасці, сэнсарнай здольнасці, карыснасці і гульні.

Калі вы імкнецеся заняцца дызайнам узаемадзеяння, капіраванне стыляў працы іншых дызайнераў не з'яўляецца годным спосабам увайсці. Выдаткуйце неабходны час на даследаванні і даведайцеся, як карыстальнікі задзейнічаюць інструмент, для якога вы распрацоўваеце, і, як я ўжо згадваў вышэй, не варта спадзявацца толькі на даследаванні альбо інтуіцыю - тэст і прататып!

9. Ні адзін прадукт не скончаны

Зусім нядаўна я вёў невялікі вэб-магазін, які вырабляў працу для кліентаў, якія мелі бюджэт і прадбачлівасць плаціць нам за адзін праект. Самае лепшае, што мы маглі зрабіць для гэтых кліентаў, альбо я лічыў у той час, - прыцягнуць іх да лепшых даследаванняў і перадтэставых выпрабаванняў, на якія мы маглі б атрымаць бюджэт, выкарыстоўваць выдатную дызайнерскую інтуіцыю, а потым запусціць і памаліцца аб вялікай рэнтабельнасці. .

Калі я пачынаю займацца распрацоўкай прадуктаў, з кожным днём усё больш разумею, што прадукт ніколі не бывае поўным. Заўсёды трэба правесці тэставанне, атрымаць зваротную сувязь з людзьмі, а таксама новыя і лепшыя спосабы прататыпа і дызайну.

Калі вы не ўваходзіце ў склад прадукту, ёсць спосабы прыцягнуць кліентаў з дапамогай гэтых інструментаў. Падумайце над тым, каб звярнуцца да кліента з графікам тэсціравання кожныя тры месяцы на працягу года пасля запуску. Усталюйце перад кліентамі канкрэтныя мэты, а потым дапамажыце наладзіць сайт альбо прадукт для дасягнення гэтых мэтаў і павышэння іх рэнтабельнасці. Улічваючы магчымасць павялічыць свой даход, я не магу прыдумаць кліента, які б не разглядаў гэта.

10. Вы не з кручка

Калі вы сыходзіце ад такога мыслення, што вашы сайты не патрабуюць прататыпавання альбо больш строгага разумення платформаў, для якіх вы распрацоўваеце, то вы дрэнна памыляецеся. Свет кантэнту ў Інтэрнэце становіцца рознабаковым. Гэта будзе мабільны, планшэтны і дынамічна бясплатны і інтэрактыўны кантэнт, які выйграе над статычным сайтам.