Posty: 6
Strona 1 z 1
AUTOR TEMATU
Awatar użytkownika
Nie wybrano

FuruArt
Użytkownik
22 maja 2016, 14:03
Większość stron dobrze przemyślanych pod względem wizualnym, które widzimy w internecie zostały pierwotnie skonstruowane na kartce, white-board'zie, tablicy kredowej lub nawet za pomocą żółtych karteczek samoprzylepnych. No dobrze, fajnie, tylko co z tego? A no dokładnie tyle, że każdy dobry projekt zaczyna się z dala od komputera! A sam proces Design'u wygląda mniej więcej jak zabawa klockami Lego, o czym za chwilę się przekonacie. 

Moje porównanie do zabawy klockami nie jest bez powodu, ponieważ aby tworzyć przemyślane strony WWW musimy układać odpowiednie sekcje (tak jak w Lego klocki) na kartce. Dzięki czemu wykreujemy coś co slang Designerów nazywa Wireframe'em, który jest niczym innym jak tylko szkieletem naszej strony, taka trochę mąka w chlebie czy mleko w serze (jeśli mówimy o prawdziwym serze, a nie produktach seropodobnych). A teraz jak wygląda przykładowy Wireframe? 
Obrazek Jak widać jest to najzwyczajniej w świecie szkic, w którym pomijamy jakiekolwiek detale. Istotą jest wiedzieć co chce się otrzymać i tak jak u mnie, można sobie rozpisać co dana sekcja będzie robić, ale to już bardziej ze względów developerskich. Dobrze, to co musimy zrobić aby zostać Szkieleciarzem? (Wireframe'owiec brzmi jakoś średnio)
  1. Kartka, najlepiej kropkowana lecz jeśli nie mamy kropkowanej może być jakakolwiek w kratkę, kropkowana jest dla czystej wygody tworzenia, jest to bardziej precyzyjne i odzwierciedla mniej więcej piksele, a jeśli nie kartka to np. white-board.
  2. Ołówek/Długopis/Mazak/Pióro/Kreda lub jakiekolwiek inne narzędzie do kreślenia, jak ktoś ma duże aspiracje może nawet cyrklem to robić, Gumka do ścierania (nie do mazania, ważne!)
  3. Pomysł, chęci no i rzecz jasna minimalną umiejętność rysowania linii, kółek lub prostokątów.
Skoro już wiadomo co będzie nam potrzebne do naszego pierwszego Szkieletu strony WWW, przystępujemy do pracy! Ale zaraz, zaraz, żeby budować coś z klocków, wymagane są jeszcze ów klocki. Zacznijmy od podstawy klockowej rodziny, czyli tak zwanego Kontenera (Container), będzie on głównym blokiem gromadzącym dane sekcje w sobie, oznaczamy go w ten sposób: 
Obrazek Oprócz kontenera zawarłem element o szerokości całego dokumentu, czyli np. pasek z menu na górze strony lub stopka. Wewnątrz naszego 'Tatuśka' będziemy umieszczać Pudełka (Box'y), rzadziej Tabelki lecz nie miałem gdzie indziej ich wcisnąć: 
Obrazek Do naszego Pudełka będziemy pakować chociażby różne obrazki, grafiki, infografiki, które w 'języku' designer'a prezentują się w następujący sposób (im bardziej koślawo tym lepiej!), rzecz jasna jeśli obrazek jest na całą szerokość strony, rysujemy tak jak dowolny element na całość strony z symbolem obrazka: 
Obrazek Oprócz grafik przydałby się jakiś tekst, nagłówki, wpisy, odnośniki, listy i inne tego typu, występują pod postacią szlaczków i gryzmołów, nagłówek w celu odróżnienia zaczyna się wysokim maźnięciem do góry i dalej szlaczki, nawigacją mogą być np. listy wysuwane, wielopoziomowe (Dropdown-menu): 
Obrazek Mamy obrazki, mamy teksty, no to może na dokładkę jakieś przyciski akcji? Proszę bardzo! Przyciski są zaokrąglonymi prostokątami z 'btn' w środku, zamiast 'btn' można wpisać nazwę akcji jaką ma wykonywać np. 'send'. A te strzałeczki, służą do wskazania treści przewijanej gestami, np. Guziki galerii interaktywnej, pokazu slajdów (Slider'y): 
Obrazek W sumie można by powiedzieć, że mamy już wszystko, jednakże dorzuciłbym do tej listy wszelakie ikonki utarte w internecie w celu określenia funkcji danego elementu, zegarek - pokazywanie daty publikacji posta, kalendarz - archiwum postów, ludzik - możliwość logowania, myszka - należy przewijać, aby coś się stało, kratka (hash) - tagi w poście, chmurka - komentarze, strzałka góra-dół - element będzie przesuwał się wraz z przesuwaniem strony (fixed): 
Obrazek Skoro poznaliśmy klocki, to jesteśmy w stanie stworzyć już jakiś szkielet! Budujemy dokładnie tak jak w przypadku klocków Lego. Granicą może być tylko i wyłącznie wasza wyobraźnia oraz sposób widzenia. Z ów składników można otrzymać np. coś takiego: 
Obrazek Jak widzicie nic trudnego stworzyć Szkielet strony, a później problemem nie będzie przerzucenie tego do Photoshop'a i stworzenie normalnego Layout'u! Co również będę starał się wam pokazać. Mam nadzieję, że spróbujecie wykonać własny Szkielet strony i ta lekcja wam się przyda, do czego zachęcam! Do zobaczenia w Pełni!

Materiały zawarte w artykule oraz treści są moją własnością - Furu.ART, zakaz kopiowania treści lub grafik na własne fan-page, strony czy blogi - Bo nogi z **** powyrywam! 
Zapraszam na mojego bloga, gdzie znajdują się codzienne publikacje: Blog w Pełni

22 maja 2016, 14:31
Ten poradnik, jest bardzo dobry, graty dla Ciebie za kawał dobrej roboty, jest po prostu kompletny.

Awatar użytkownika
Mężczyzna

fantovsky
Webdesigner
11807317
Webdesign
22 maja 2016, 14:33
Bardzo dobry post, na pewno wielu osobom się on przyda. Lecz co do jednego zdania się nie zgadzam.
...każdy dobry projekt zaczyna się z dala od komputera!
To już zaczyna się zmieniać, bo wielu osobom wygodniej jest korzystać z narzędzi przeznaczonych właśnie do tworzenia makiet, takich jak np. uxpin.com, wireframe.cc, mockflow, gliffy itp. Dla zapoznania się z tymi popularniejszymi platformami do tworzenia makiet polecam TEN ARTYKUŁ

No ale to już sprawa indywidualna, osobiście również preferuję kartkę, ołówek i gumkę.

AUTOR TEMATU
Awatar użytkownika
Nie wybrano

FuruArt
Użytkownik
22 maja 2016, 14:42
@fantovsky Zgadzam się z Tobą w zupełności, że są ludzie którzy wolą projektować z użyciem makiet online, jest to rzecz jasna sprawa indywidualna ponieważ mi wygodniej jest w notesie, ołówkiem i gumką bo po prostu tak się przyzwyczaiłem i uważam to za najszybsze, dla każdego będzie to coś innego. Aczkolwiek, dzięki za uwagę, faktycznie mogłem o tym wspomnieć :>

Awatar użytkownika
Mężczyzna

Damian
Administrator
Łódź
Webdesign
22 maja 2016, 14:52
Widocznie ja robię złe projekty bo od kilku miesięcy wszystko na spontanie projektuję  No, ale to też jest jakiś sposób. Zawsze kilka min burzy mózgu przed rozpoczęciem i już pomysły świtają. 

Ten temat został przeniesiony z Photoshop do Teoria przez Damian (20 cze 2016, 18:48)

18 wrz 2017, 1:36
Apeluję o zaktualizowanie wszystkich linków. Chciałem przestudiować swój pierwszy tutorial nt. webdesignu, a tu taka niemiła niespodzianka ;(

Posty: 6
Strona 1 z 1




Aby w pełni korzystać z naszego forum zaloguj się lub zarejestruj.

Tylko zarejestrowani użytkownicy posiadają dostęp do wszystkich funkcji na forum.

  • Utwórz konto

    Zarejestruj nowe konto, to zajmie Ci kilkanaście sekund

    Rejestracja

  • Zaloguj się

    Posiadasz już konto? Użyj go

    Zaloguj się