Wireframes, czyli jak i po co przygotować makietę strony?

Chciałbym Wam dziś przedstawić bardzo fajne narzędzie do tworzenia makiet stron internetowych czy jakichkolwiek aplikacji. Zdaję sobię sprawę, że obecnie mamy nowsze narzędzia tego typu jednak niewiele jest darmowych. Nie twierdzę też, że nie ma lepszych narzędzi, ale to u mnie sprawdza się bardzo fajnie.

Dodatkowo jakiś czas temu wyszedł zestaw elementu Bootstrapa, dzięki czemu cały program mocno zyskał na aktyalności.

Zestaw elementów Boostrapowych jest dostępny tutaj: https://github.com/nathanielw/Bootstrap-Pencil-Stencils
Natomiast sam program tutaj: pencil.evolus.vn

Po co stosować makiety?

  • można przemyśleć projekt pod względem nie wyglądu ale użyteczności
  • można zaplanować wcześniej całą logikę aplikacji i ją przetestować
  • tworzymy projekt bardziej etapowo co zabezpiecza nas przed powtarzaniem pracy

Wyobraź sobie, że przygotowałeś cały layout w Photoshopie i klient powie „wie pan co… ale ja to myślałem, że tutaj będize więcej zdjęć i mniej treści… i w ogóle wszystko troche inaczej”, co wtedy? Cała praca do kosza?

Można się przed czymś takim zabezpieczyć. Tworzyć sam schemat strony i pokazujesz go klientowi, jeśli zaakceptuje to już nie martwisz się o ogólny układ ale o samą grafikę. Dzięki temu projekt tworzy się bardziej etapowo, można go lepiej przemyśleć i łatwiej wdrażać. Przy większych projektach jest to standard, jednak nie widzę przeszkód aby korzystać z nich nawet przy mniejszych.

Wireframes w Pencil Project [wideo]: