Wstępnie przyjrzymy się kreacji z lotu ptaka, następnie omówimy poszczególne elementy dotyczące projektowania:

Każdy projektant, ilustrator, webdesigner realizując kolejne projekty i poświęcając następne setki godzin i nieprzespane noce na udane kreacje szlifuje umiejętności i charakterystyczny styl.Tak samo jak naprzykład załóżmy pizze można utworzyć na wiele sposobów, tak identycznie zaplanowanie struktury i nadanie jej użytecznych i estetycznych aspektów można zrealizować na milion sposobów, nie ma idealnej recepty. Aby stworzyć natywną, interaktywną, wydajną i estetyczną stronę wystarczy połączyć moduły dostępne w internecie na darmowej licencji. Jeśli systemy tworzenia efektywnych, efektownych i szybkich rozwiązań istnieją to w jakim celu generować coś od A do Z ?Kompleksowe podejście projektowe rozwija Twoje zdolności, dodatkowo rozszerzając możliwości stosowania najświeższych najlepszych rozwiązań. W profesjonalnym środowisku, najpierw przygotowywujemy się do biegu (lista, zadania), a następnie sprintujemy (każdy ekspert w swojej dziedzinie wykonuje zadanie w tym rzeczywistym czasie).
Szczerze powiedziawszy, każdy etap nie jest konieczny, i aby powstała strona
(mówimy tutaj o jakimś levelu) wystarczą kompetencje projektowe i programistyczne.

Konkurencyjność na rynku rośnie, więc „jakiś level” nie wystarczy.
Potrzeba specjalistów z wielu dziedzin.

2.Idea i cel

Strona powinna realizować zamierzony cel w wizjonerską zaplanowaną metodą.Cel wizerunkowy, reklamowy, użytkowy lub sprzedażowy Powinna mieć też określoną intuicyjną stylistykę.

Kilka przykładów:

3.Struktura

Podstawowym standardem w dzisiejszych czasach
Responsive Web Design(RWD).

Strona powinna być przystosowana na wiele rozdzielczości.
Oczywiście rozdzielczości jest wiele :

  • HVGA 480×320 (3:2)
  • VGA 640×480 (4:3)
  • WVGA 800×480 (5:3)
  • SVGA 800×600 (4:3)
  • XGA 1024×768 (4:3)
  • HDTV 720p 1280×720 (16:9)
  • HDTV 1366×768 (16:9)
  • WXGA 1280×800 (16:10)
  • WXGA+ 1440×900 (16:10)
  • SXGA 1280×1024 (5:4)
  • WSXGA 1600×1024 (16:10)
  • SXGA+ 1400×1050 (4:3)
  • WSVGA 1024×600 (16:9)
  • WSXGA+ 1680×1050 (16:10)
  • UXGA 1600×1200 (4:3)
  • HD+ 1600×900 (16:9)
  • HDTV 1080p 1920×1080 (16:9)
  • WUXGA 1920×1200 (16:10)
  • QWXGA 2048×1152 (16:9)
  • QXGA 2048×1536 (4:3)
  • Cinema TV 2560×1080 (21:9)
  • WQHD 2560×1440 (16:9)
  • WQXGA 2560×1600 (16:10)
  • QSXGA 2560×2048 (5:4)
  • 2K 2048×1152 (16:9)
  • 2K 2048×1024 (2:1)
  • 3K 3072×1728 (16:9)
  • 3K 3072×1536 (2:1)
  • 4K 4096×2304 (16:9)
  • 4K 4096×2048 (2:1)
  • 8K 8192×4608 (16:9)
  • 8K 8192×4096 (2:1)

Projektowanie i kodowanie ~50 wersji strony jest niepraktyczne.

Stosujemy Brzytwę Ockhama
Najbardziej uniwersalną jest zasada:

Desktop – Tablet – Telefon.

Robimy 3 wersje, biorąc pod uwagę proporcje 16:9, używając danych szerokości.

Strona składa się z elementów, można nawiązać ich układ do klocków lego.

Występuje nieskończona ilość kombinacji i tylko nasza kreatywność jest ograniczeniem.

Pamiętajcie, że strona nie jest statyczna, ma mieć zachowanie, animacje,ruchy elementów.

Całość to spójna i klarowna konstrukcja
Teoretycznie występują wzorce UX/UI działające w większości przypadków. Jeżeli wyszukiwarka na 80% znajduje się w prawym górnym rogu to, aby intuicyjnie korzystało się ze strony, toteż powinniśmy ją tam umieścić.

4.Barwy

Autor: Tundra Studies

„Kolor nie dodaje wartości projektowaniu, wzmacnia ją”
Pierre Bonnard

60-30-10
Używamy zazwyczaj trzy kolory w danej proporcji, aby nadać balansu, stonowania i ogólnej harmonii.

Psychologia Koloru
Istotnym elementem jest oddziałowywanie koloru na psychikę człowieka i ich symbolika.
Oczywiście należy pamiętać, że odbiór koloru jest inny w zależności od szerokości geograficznej i kultury.

Czerwony – pasja, miłość, niebezpieczeństwo.
Pomarańczowy – kreatywność, spontaniczność, przedsiębiorczość.
Żółty – radość, szczęście, lato.
Zielony – wzrost, harmonia, spokój.
Niebieski – inteligencja, twórczość, bezpieczeństwo.
Granatowy – zarządzanie, struktury, wiedza.
Różowy – delikatność, uczuciowość, życzliwość.
Fioletowy – eksluzywność, ekstrawagancja.
Czarny – klasa elegancja smutek.
Biały – elegancja, wolność, zima.

Łączenie koloru to sztuka
Warto szukać inspiracji w naturze. Sprawne estetyczne dobieranie kolorów to kwestia wprawy i znajomości zasad (Triady, kolory przeciwstawne, odcienie).

 

4.Typografia

W dzisiejszym świecie minimalizmu, typografia pełni jedną z decydujących ról w postrzeganiu danego projektu
(opakowania apple, zawierają magiczny napis „Designed in California”, Małe litery i przestrzeń)

Bardzo dobrze zaprojektowane fonty przez mistrzów typografii to koszt około 200-500$, gdy wybitny designer pisze za granicą, że wydał +10k na fonty, to norma.

Polecam zaprojektować własne litery, aby wiedzieć z czym to się je i poznać elementarną wiedzę na temat budowy liter. Pozwala to na dobieranie fontów w jasny hierarchiczny i estetyczny układ.

Podczas projektowania warto używać punktów typograficznych :
12pt, 18pt, 24pt, 36pt, 48,pt 60pt, 72pt.

Wielokrotności + połówki.
Natomiast w programowaniu, jednostek – „em” – firetów.
Jednostki w CSS

Z czasem dostrzega się pojedyńcze walory znaku, nachylenie ich szeryfów pod odpowiednim kątem, światło pomiędzy nimi.
Wysokość x, zwiększająca czytelność.
Aby połączyć ze sobą 2 fonty, można kierować się intuicją lub zasadami

5.Mikrointerakcje

„The difference between a product you love and one you tolerate
are often microinteractions you have with it.”
Dan Saffer

O mikrointerakcjach można napisać cały artykuł. W dzisiejszym czasie statyczna strona www, owszem jest czytelna, prosta. Jednak smaczku dodają przemyślane mikrointerakcje, które wyróżniają stronę na tle tysiąca identycznych.

 

Taki mikromoment trwa średnio od kilku do kilkunastu sekund, nie przeszkadza w użytkowych działaniach, natomiast nadaje atrakcyjności, gratyfikuje, wysyła feedback, pomaga w zrozumieniu i oszczędzaniu przestrzenii, umila nieprzyjemne.
Animacje i Motion design, zaczynają mieć coraz większe znaczenie

Polecam ten artykuł, Autor napisał go na najwyższym poziomie.

6.Przydatne Materiały

Minimalistycznie – jeden link, encyklopedia materiałów 🙂
Kliknij mnie

7.Podziękowania:

Lee Campbell, Stephanie Walter, Josh Clark, Creative Stall,Wojciech Zieliński,Agnieszka Kozłowska
źródła:
www.webusability.pl/
www.behance.net/
uxdesign.pl/
www.smashingmagazine.com/
blog.marvelapp.com/