W branży internetowej, aby usprawnić proces projektowania, projektowanie jest zakończone, a przed przedstawieniem ostatecznego projektu do dalszego opracowania lub przetestowania, konieczne są inne etapy pośrednie:
Krok 1: Zdobywanie inspiracji:
Jeśli będziesz stale obserwować, co robią inni projektanci lub witryny dla ich modeli szkieletowych, powoli pojawi się w głowie obraz tego, w jaki sposób model szkieletowy pomaga uporządkować informacje na ekranie.
i do tego możesz użyć narzędzia „Wirify” Wireframing, po prostu dodaj duży link do zakładki i wejdź na dowolną żądaną stronę internetową, kliknij zakładkę, zobaczysz, że strona zmienia się w szkielet.
Krok 2: Projektowanie procesu:
Różni projektanci na różne sposoby podchodzą do szkieletowania i jego tłumaczenia na elementy wizualne lub kod,
Tutaj nie tylko projektant wybiera ścieżkę, którą należy podążać, czasami klienci wolą bezpośrednio tworzyć makiety, a niektórzy wolą bardziej systematyczne,
Szkic => Model szkieletowy => Makieta => Kod
Krok 3: Szkicowanie:
Teraz, gdy jesteś zainspirowany, masz jakieś ogólne pomysły i planowanie podejścia, zawsze warto zacząć od szkicowania, bez względu na to, jak dobrze kontrolujesz mysz / rysik lub cokolwiek używasz, nie mogą pobić papieru, ołówka prostota.
Szkicowanie ręczne na papierze jest zawsze dobrym punktem wyjścia dla każdego projektanta. Zapewnia szybki i łatwy sposób skupienia i uporządkowania. Jeśli jesteś bardzo precyzyjny w szkicowaniu, możesz nawet użyć tego jako ostatecznego szkieletu.
Krok 4: Szkieletowanie:
Tworzenie szkieletu jest jednym z pierwszych kroków, które należy wykonać przed zaprojektowaniem.
Model szkieletowy pomaga organizować i upraszczać elementy i treści w witrynie internetowej i jest niezbędnym narzędziem w procesie programowania.
Model szkieletowy jest w zasadzie wizualną reprezentacją układu treści w projekcie .
Podobnie jak fundament budynku, musi on być zasadniczo wytrzymały, zanim zdecydujesz się na nadanie mu drogiej powłoki lakierniczej.
Rzeczy do rozważenia przy tworzeniu szkieletu to:
Wybierz swoje narzędzia
Oto lista 10 darmowych narzędzi do szkieletowania dla projektantów Mashable
Ustawianie siatki
Siatki są bardzo niezbędne do uzyskania symetrycznego i równoległego projektu.
za każdym razem, gdy spojrzysz na dobrze zaprojektowaną stronę internetową, przekonasz się, że jej treść zaczyna się od określonego punktu ciała, a kończy na jednym, są one zarządzane za pomocą siatek.
Określ układ za pomocą pól
Zdefiniuj hierarchię informacji za pomocą typografii
Czego należy unikać podczas szkieletowania:
- Za dużo dzieje się na stronie.
- Nacisk na kolor i design
- Za dużo szczegółów
Zalety szkieletowania:
Utworzenie modelu szkieletowego daje klientowi, deweloperowi i projektantowi możliwość krytycznego spojrzenia na strukturę witryny i pozwala na łatwe dokonywanie zmian na wczesnym etapie procesu.
Wireframing zapewnia następujące kluczowe korzyści:
Daje klientowi wczesny, zbliżony widok projektu witryny (lub przeprojektowania).
Może zainspirować projektanta, co prowadzi do bardziej płynnego procesu twórczego.
Daje to deweloperowi jasny obraz elementów, które będą musieli kodować.
Czyni to wezwanie do działania na każdej stronie.
Jest łatwy do dostosowania i może pokazywać układ wielu sekcji witryny.
Krok 5: Makiety / elementy wizualne:
Teraz ostateczny model szkieletowy można przekształcić w ostateczne makiety lub elementy wizualne:
Niektóre typowe narzędzia dla Mockuos to Adobe Photoshop, Corel Draw i bardzo nowe, ale już popularne Sketch, itp.
Podczas konwersji na makietę należy rozważyć:
Hierarchia informacji
Konieczne może być zastanowienie się, co należy wyróżnić, a jakie informacje dodatkowe, a schemat kolorów, zmiana położenia i typografia są tak ustalone.
Typografia
Wybierz atrakcyjną wizualnie i czytelną typografię dla witryny z odpowiednią kombinacją alternatyw. Rozmiar czcionki, gramatura i kolory odgrywają kluczową rolę w czytelności.
Schematy kolorów
Schemat kolorów przedstawiający tożsamość marki i kolory psychologiczne jako czerwony dla niebezpieczeństwa, zielony dla sukcesu itp.
Krok 6: Prototypy :
Prototyp to wczesna próba, model, lub uwalnianie produktu zbudowany do testowania koncepcji lub procesu lub działać jako rzecz być replikowane lub uczyć.
Modele szkieletowe obsługują strukturę, makiety obsługują wizualizacje, a prototypy obsługują użyteczność (w produktach internetowych / aplikacyjnych).
Powstaje prototypowy produkt, a następnie jest on testowany i wykonuje się POC (Prof of concept). Teraz możemy przejść do produktu Real (oczywiście, jeśli nie trzeba wprowadzać żadnych zmian)
Link do oryginalnego artykułu ze zdjęciami i innymi linkami
