Projektowanie na kartce? Z czym to się je? - Podstawy

[FuruArt]

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? 

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)

• 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.
• 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!)
• 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: 
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ąć. 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.

 

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): 

 

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): 

 

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): 

 

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: 

 

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! 

 

[jeffreys]

Ten poradnik, jest bardzo dobry, graty dla Ciebie za kawał dobrej roboty, jest po prostu kompletny.

[fantovsky]

Bardzo dobry post, na pewno wielu osobom się on przyda. Lecz co do jednego zdania się nie zgadzam.

Cytat

..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 

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

• Zaloguj się
• lub
• Zarejestruj się

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

[FuruArt]

@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ć :>

[Damian]

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ą. 

[tlen]

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

[parsley]

możliwe odświeżenie linków?

[Damian]

Pisałem do autora i niestety nie posiada on już tych zdjęć.

[Gunia]

Ja też odruchowo pierwsze co, to łapię kartkę i ołówek, długopis, cokolwiek, zawsze sobie rozrysowywałam najpierw to co chcę, a potem z tego powstawał projekt.