Skocz do zawartości

Nie masz jeszcze konta?

Zarejestruj nowe konto, aby mieć pełny dostęp do forum. To zajmie Ci 1 minutę!

Przejdź do rejestracji

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


FuruArt
 Udostępnij

Rekomendowane odpowiedzi

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! 

 

Odnośnik do komentarza
Udostępnij na innych stronach

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ę


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

Odnośnik do komentarza
Udostępnij na innych stronach

@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ć :>
Odnośnik do komentarza
Udostępnij na innych stronach

  • 1 rok później...
  • 1 miesiąc temu...
  • 3 tygodnie później...
  • 1 miesiąc temu...
Ten temat jest przestarzały, ponieważ ostatni post był napisany ponad dwa miesiące temu. Czy na pewno chcesz go skomentować? Jeśli tak, to możesz kontynuować pisanie posta.

Dołącz do dyskusji

Możesz dodać zawartość już teraz a zarejestrować się później. Jeśli posiadasz już konto, zaloguj się aby dodać zawartość za jego pomocą.

Gość
Dodaj odpowiedź do tematu...

×   Wklejono zawartość z formatowaniem.   Przywróć formatowanie

  Dozwolonych jest tylko 75 emoji.

×   Odnośnik został automatycznie osadzony.   Przywróć wyświetlanie jako odnośnik

×   Przywrócono poprzednią zawartość.   Wyczyść edytor

×   Nie możesz bezpośrednio wkleić grafiki. Dodaj lub załącz grafiki z adresu URL.

 Udostępnij



Wypoczywam.com Wypoczywam.com - Domki Wypoczywam.com - Pokoje Wypoczywam.com - Apartamenty Wypoczywam.com - Pensjonaty Wypoczywam.com - Hotele
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.