馃帹 uxowy.dev #3
6 min czytania

馃帹 uxowy.dev #3

Witaj w trzecim wydaniu uxowy.dev.

Na wst臋pie zach臋camy Was do obserwowania #uxowydev w social mediach. Dopiero startujemy, ale... ka偶dy przecie偶 kiedy艣 startowa艂. B臋dzie tam du偶o mi臋cha o UI/UI dla developera.

Na Facebooku b臋dziemy wrzuca膰 g艂贸wnie tipy UI/UX i r贸偶ne wiadomo艣ci dla Was. Znajdziesz nas pod: facebook.com/uxowy.dev.

Na Instagramie, opr贸cz tre艣ci dot. UI/UX, skupimy si臋 na pokazywaniu procesu powstawania naszego projektu, jak to wygl膮da od kuchni. Znajdziesz nas pod: instagram.com/uxowydev.

OK, tyle z wewn臋trznej promocji.
Co dzisiaj?

  1. Design Thinking - metoda na kreowanie i wdra偶anie innowacyjnych produkt贸w
  2. Zagadka 馃
  3. UX dla formularzy - MUSISZ TO PRZECZYTA膯!
  4. Kogo warto obserwowa膰 馃憖
  5. 8 darmowych zestaw贸w UI dla Figmy - wybierz lub zainspiruj si臋 przy starcie nast臋pnego projektu

Nie ma na co czeka膰, startujemy!


Design Thinking - metoda na kreowanie i wdra偶anie innowacyjnych produkt贸w

UX, Biznes | 藕r贸d艂o
殴r贸d艂o
Design Thinking to podej艣cie do tworzenia nowych produkt贸w i us艂ug w oparciu o g艂臋bokie zrozumienie problem贸w i potrzeb u偶ytkownik贸w. Miejscem narodzin i rozwoju Design Thinking jest Uniwersytet Stanforda w Kalifornii.

Pewnie zastanawiasz si臋, czy developerowi warto wg艂臋bia膰 si臋 w ten temat?
Je艣li tworzysz jakie艣 produkty (a na 99% tworzysz), to...

TAK - bardzo zach臋camy do tego typu "skoku w bok"!

Na warsztatach online wzi膮艂em udzia艂 w procesie Design Thinking. Jako zesp贸艂 interdyscyplinarny utworzyli艣my rozwi膮zanie gotowe do wdro偶enia i przetestowania na u偶ytkownikach w par臋 godzin. 

Dlaczego?

Design Thinking 艣wietnie poszerza nasze horyzonty i rozwija nasz m贸zg z "technicznie my艣l膮cego", kt贸ry pracuje w trybach "if-then", na bardziej kreatywny i wychodz膮cy poza przyj臋te regu艂y.

Jest to kierunek, kt贸ry wielu programistom jest bardzo potrzebny.

Cz臋sto idzie zauwa偶y膰 tak膮 zasad臋: im wi臋cej siedzisz w kodzie i technicznych aspektach, tym bardziej cierpi膮 na tym Twoje umiej臋tno艣ci mi臋kkie. Stajemy si臋 co raz wi臋kszym "odludkiem".

Pierwszym krokiem w technice Design Thinking jest zbudowanie zespo艂u interdyscyplinarnego, np. in偶ynierowie, specjali艣ci od marketingu, projektanci, socjolodzy itd. Wyj艣cie poza sw贸j 艣wiat kodu i serwer贸w jest bardzo cennym do艣wiadczeniem.

Zesp贸艂 realizuje wszystkie etapy metody, pos艂uguj膮c si臋 zestawem narz臋dzi i technik, aby w rezultacie wypracowa膰 optymalne do wdro偶enia rozwi膮zanie:

  1. Po偶膮dane przez u偶ytkownik贸w
  2. Technologicznie wykonalne
  3. Ekonomicznie op艂acalne

Etapy Design Thinking

Schemat: Stanford Design Thinking Model. 殴r贸d艂o

W skr贸cie:

  1. Empatyzacja - jest to g艂臋bokie zrozumienie potrzeb i problem贸w u偶ytkownika
  2. Definiowanie problemu - polega na odnalezieniu prawdziwego problemu, kt贸ry b臋dziemy naprawia膰. Najgorzej, jak pracujemy X godzin nad niew艂a艣ciwym rozwi膮zaniem problemu.
  3. Generowanie pomys艂贸w - spisujemy jak najwi臋cej pomys艂贸w na rozwi膮zanie powy偶szego problemu. Odwagi, sky is the limit. Czasami z najbardziej absurdalnych pomys艂贸w rodzi si臋 co艣 fajnego.
  4. Budowanie prototyp贸w - wizualne zaprezentowanie pomys艂u u偶ytkownikom i szybkie zebranie opinii na temat rozwi膮zania. U nas, to nawet mniej ni偶 MVP, to raczej klikalne makiety w Figmie.
  5. Testowanie - testujemy rozwi膮zanie w realnym 艣rodowisku - to mo偶e by膰 MVP.

Je艣li zainteresowa艂 Ci臋 ten temat, musisz wej艣膰 na t臋 stron臋 i przeczyta膰 pe艂ny tekst o Design Thinking, kt贸rego tutaj nie by艂o miejsca zmie艣ci膰.

Dla pewno艣ci, link: https://designthinking.pl/co-to-jest-design-thinking/

Dobrym 藕r贸d艂em jest te偶 storna polskiego Design Thinking Institute.


Chwila na zagadk臋 馃

Co tutaj jest nie tak?

Odpowied藕 znajdziesz na ko艅cu maila.


UX dla formularzy - MUSISZ TO PRZECZYTA膯!

UX | 藕r贸d艂o
Testerzy pr贸buj膮cy ogarn膮膰 formularze 馃槀 

Formularze w UI/UX s膮 bardzo wa偶ne. Warto zadba膰 o ich 艂atwo艣膰 wype艂niania i zminimalizowa膰 ryzyko pope艂nienia b艂臋du. 聽

Poni偶ej zestaw dobrych praktyk dla tworzenia formularzy. Nie s膮 to oczywi艣cie jedyne mo偶liwe i ZAWSZE najlepsze rozwi膮zania ("to zale偶y"), ale dobrze je zna膰.

Autorem jest Geri Reid, UI/UX senior designerka z Londynu, z ponad 15 letnim do艣wiadczeniem.

(wybacz, 偶e s膮 w j臋zyku angielskim, ale woleli艣my nie t艂umaczy膰 tekst贸w 1:1, skoro wi臋kszo艣膰 developer贸w i tak zna angielski, cho膰by na podstawowym poziomie 馃檪)

Text input

殴r贸d艂o

Przyciski

殴r贸d艂o

Radio

殴r贸d艂o

Checkboxy

殴r贸d艂o

Powiadomienia

殴r贸d艂o

Komunikaty o b艂臋dzie

殴r贸d艂o

Okre艣lanie daty

A mo偶e lepszym rozwi膮zaniem jest datepicker? 馃槈. 殴r贸d艂o

Select

殴r贸d艂o

To wszystkie rady Geri na temat formularzy.

Co o nich my艣lisz? Zgadzasz si臋 ze wszystkimi podpowiedziami?
Odpisz na tego maila ze swoj膮 opini膮 na ten temat :)


Kogo warto obserwowa膰?

Profil na LinkedIn

Luke Wroblewski
Twitter: @lukew
LinkedIn: lukew

Kolejny s艂ynny Polak w 艣wiecie UI/UX/Product Design 馃槏 .
Dla przypomnienia, w pierwszym wydaniu uxowy.dev by艂 Micha艂 Malewicz.

Aktualnie Product Director w Google. Wcze艣niej CEO + wsp贸艂za艂o偶yciel projektu Polar (kupiony przez Google w 2014) i Dyrektor Produktu + wsp贸艂za艂o偶yciel Bagcheck (kupiony przez Twitter w 2011). Pomaga艂 te偶 w Yahoo!, eBay, NCSA... du偶o by pisa膰. Po prostu zobacz jego materia艂y 馃憖

Polecamy jego filmy z konferencji Conversions@Google:

Link do film贸w

8 startowych projekt贸w UI dla Figmy - wybierz i u偶yj przy starcie nast臋pnego projektu

UI | 藕r贸d艂o

Zobacz projekty ekran贸w (mobile/web) aplikacji wykonanych przez profesjonalnych designer贸w. Mo偶esz si臋 nimi zainspirowa膰 / pos艂u偶y膰 podczas tworzenia UI do nowego projektu.

Wystarczy wej艣膰 na podane linki, klikn膮膰 "Duplicate" i mamy je w swojej Figmie.

1. Food delivery app UI kit

Ekrany aplikacji s膮 z kategorii "food", ale design kart i innych element贸w jest do艣膰 uniwersalny. Link

2. Zestaw do robienia makiet (wireframes)

Z jego pomoc膮 zrobisz w Figmie szybkie makiety UI. Link

3. Pegasus Design System

Zobacz jak wygl膮da przyk艂adowy Design System w Figmie. Link

4. Marvie鉁 IOS UI Kit Dark theme

Ekrany mobilne w Dark Mode. Link

5. Expenio - Personal Finance UI Kit

Ekrany z kategori "finanse". Link

6. SINAU - Online Learning UI Kit

Ekrany z kategorii "online learning". Link

7. Facebook.Design: 100 urz膮dze艅 do zaprezentowania ekran贸w Twojej aplikacji

Niesamowicie wielka kolekcja urz膮dze艅 od zespo艂u Facebook.Design, na kt贸rych mo偶esz umie艣ci膰 ekrany swojej aplikacji, aby zaprezentowa膰 j膮 艣wiatu. Link

8. 聽Kolekcja najlepszych Google Fonts

Znajdziesz tutaj zestawienie najlepszych font贸w z Google Fonts -dla Twojego nast臋pnego projektu. Link

Zagadka - odpowied藕 馃憞

Co tutaj jest nie tak?

Z艂y UX
Dobry UX. 殴r贸d艂o 1, 殴r贸d艂o 2

To wszystko na dzi艣, dobrego weekendu 馃嵒

PS. Daj zna膰 o uxowy.dev znajomym, kt贸rzy mog膮 by膰 zainteresowani naszym contentem 馃憤

殴r贸d艂o

Je艣li masz jakiekolwiek pytania - odpisz na tego maila. Odpowiadamy na wszystkie otrzymane od cz艂onk贸w newslettera wiadomo艣ci :)

Pozdrawiam i mi艂ego dnia!

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.