show menu
+ Menu

Inspirujące wzory stron www. Przykłady pikselowej perfekcji w projektach stron internetowych.

Podzielę sie z wami teo­rią pro­jek­tową, którą od kilku lat sta­ram się wyko­rzy­stać w mojej pracy: Pikselowa per­fek­cja pro­jek­tów począt­ko­wych. Dla nie­któ­rych może to być oczy­wi­ste, lecz metoda ta stała się tak ważną czę­ścią mojej pracy, że jest naj­lep­szym ze wszyst­kich moich pomy­słów, opra­co­wa­nych w ciągu ostat­nich 10 lat pro­jek­to­wa­nia wzo­ro­wych stron inter­ne­to­wych.

Teoria ta nie jest jedy­nie kolej­nym kro­kiem pro­cesu pro­jek­to­wa­nia - to nowa, umy­słowa rewo­lu­cja, która zmieni nasze spoj­rze­nie i wzmocni jakość każ­dego pro­jektu, nad któ­rym będziesz pra­co­wał. Chcesz stać się lep­szym pro­jek­tan­tem stron inter­ne­to­wych i zdo­by­wać więk­sze zle­ce­nia? Czytaj dalej, ale naj­pierw poznaj 10 wzo­rów stron, które wygry­wają z konkurencją.

7 Wzorów stron, któ­rymi zachwyca się cały świat.
Zamieszczone wzory są lau­re­atami zeszło­rocz­nej edy­cji kon­kursu Awwards.

strona-www-2
 
strona-www-3
 
strona-www-4
 
strona-www-5
 
strona-www-6
 
strona-www-7
 
strona-www-8
 

Świetny pro­jekt szkodzi?

Z teo­rią “per­fek­cyj­nych pik­se­lowo” pro­jek­tów począt­ko­wych zetkną­łem się po raz pierw­szy kilka lat temu, w 2010 roku. Michael Lopp (autor kilku świet­nych ksią­żek o pro­jek­to­wa­niu i mana­ger firmy Apple) uczest­ni­czył w pod­ka­ście pod­czas sesji nazwa­nej „Świetny pro­jek szko­dzi”. Jego prze­mowa była naprawdę zabawna i prze­peł­niona tak dużą liczbą nie­po­praw­nych poli­tycz­nie żar­tów, jak występy Billa Mahera. Pośród wielu cen­nych rad, któ­rych wtedy udzie­lił, zna­lazł się praw­dziwy dia­ment, który udo­wad­niał, jak każdy z pro­jek­tan­tów firmy Apple oddany jest idei pik­se­lowo per­fek­cyj­nych kom­po­zy­cji. Każdy z zatwier­dzo­nych pro­jek­tów jest tak dokładny, szcze­gó­łowy i nie­ska­zi­telny, że zwy­czajny użyt­kow­nik nie jest w sta­nie odróż­nić świet­nej kom­po­zy­cji od kodo­wa­nego zrzutu ekranu.

przyklady-stron-www

„To jest to!”, pomy­śla­łem, „pomysł, który zre­wo­lu­cjo­ni­zuje mój pro­ces pro­jek­towy.” I tak się rze­czy­wi­ście stało. Rozpoczęcie pro­jektu z inten­cją pracy nad jego każ­dym pik­se­lem zmie­nia prak­tycz­nie wszyst­kie aspekty pro­cesu pro­jek­to­wa­nia. Nawet, jeśli nie trzy­masz się tej zasady za każ­dym razem, sam fakt roz­po­czę­cia pro­jektu z tym nasta­wie­niem będzie miał istotny wpływ na finalny efekt.

Po jed­nym lub dwóch mie­sią­cach testów tej teo­rii, moje doku­menty pho­to­shopa były bar­dziej przej­rzy­ste, prze­no­sze­nie pli­ków dzia­łało szyb­ciej, koń­cze­nie pro­jek­tów nie „prze­cią­gało się” w nie­skoń­czo­ność, a ja spę­dza­łem mniej czasu na roz­mo­wach z klien­tami, sta­ra­jąc się im wytłu­ma­czyć róż­nicę pomię­dzy wer­sją robo­czą, a pro­duk­tem koń­co­wym. Warto też dodać, że czę­ściej otrzy­my­wa­li­śmy zle­ce­nia, co samo w sobie jest wystar­cza­ją­cym powo­dem, by przyj­rzeć się tej zasa­dzie bliżej.

Co zatem wpływa na per­fek­cyjną pik­se­lowo kom­po­zy­cję? W skró­cie, jest to pro­jek­to­wa­nie wzo­rów stron www (ale mogą to być także inne rze­czy) tak, jak­byś opra­co­wy­wał je linia po linii kodu. Jeśli pra­co­wa­łeś nad CSS/HTML, zro­zu­miesz, o czym mowa. Wpływają na nią:

1. Perfekcyjne mar­gi­nesy
2. Perfekcyjne dopeł­nie­nia
3. Perfekcyjne i kon­se­kwentne uży­cie fontu
4. Perfekcyjne ramki i tło
5. Konsekwentne uży­cie koloru
6. Inteligentne i uza­sad­nione odstęp­stwa od pierw­szych 5 reguł.


Kiedy więk­szość pro­jek­tan­tów zaczyna pro­jekt przy­kła­do­wej strony www, począt­kowo robi to z nasta­wie­niem, że jest to jedy­nie „pro­to­typ”. Sama świa­do­mość tego, że klient, lub inny spe­cja­li­sta zaj­mu­jący się testami jako­ścio­wymi, po jakimś cza­sie zacznie popra­wiać kolejne ele­menty pro­jektu, ogra­ni­cza czas i wysi­łek, jaki mógł­byś wło­żyć w jego dosko­na­le­nie. To, co nastę­puje póź­niej, jest dla więk­szo­ści pro­jek­tan­tów natu­ralne: klien­tom mówi się, że gra­fika i ikony są „jedy­nie tym­cza­sowe”. Zamiast praw­dzi­wej tre­ści, wkleja się tekst Lorem Ipsum. Żeby tego było mało, ele­menty nawi­ga­cyjne i inne istotne funk­cje inter­fejsu są zastę­po­wane czymś innym, do czasu praw­dzi­wego startu strony.

Perfekcyjne wzory stron www. Ale co to znaczy?

przyklad-strony-internetowej-1

“Perfekcyjny” ozna­cza, że każdy ele­ment two­jego pro­jektu jest dokład­nie taki, jaki chcia­łeś żeby był, gdy zaczy­na­łeś nad nim pracę. W aspek­cie mar­gi­ne­sów i dopeł­nień ozna­cza to, że są kon­se­kwent­nie sto­so­wane na całej stro­nie. Jeśli każdy boczny panel (side­bar) w pro­jek­cie ma mieć mar­gi­nes o war­to­ści 10px, to sto­suj ją w każ­dym poje­dyn­czym przy­padku, gdy masz do czy­nie­nia z pane­lem bocz­nym przy­kła­do­wej strony www.

strona-www-1

W aspek­cie fon­tów i koloru ozna­cza to ich kon­se­kwentne uży­wa­nie na całej stro­nie. Zaprojektuj każdy ele­ment fontu, jakby był połą­czony z ele­men­tem HTML (np. Wszystkie tagi H1 mają zawsze 18px, wytłusz­czony druk, font Georgia, kolor czarny). Nie odbie­gaj od swo­ich stan­dar­dów – jak mówił jeden z moich ulu­bio­nych pro­ject mana­ge­rów, „na poje­dyn­czej stro­nie nie powinno być wię­cej, niż 3,4 fonty, chyba że masz cho­ler­nie dobry powo­dów, żeby zro­bić ina­czej.” Jeśli uży­wasz kon­kret­nego odcie­nia czer­wieni dla zazna­czo­nych ele­men­tów strony, upew­nij się, że w każ­dym miej­scu na stro­nie znaj­duje się ten sam odcień (chyba, że masz dobry powód, żeby zro­bić inaczej).

Ramki, zasady sto­so­wa­nia tagów HR i tła powinny być sto­so­wane kon­se­kwent­nie – widzia­łem takie kom­po­zy­cje, gdzie każda ramka i HR są róż­nymi odcie­niami tego samego koloru. Sprawia to, że strona wygląda nie­chluj­nie i nie­pro­fe­sjo­nal­nie. Nawet dla nie­wy­szko­lo­nego oka łatwo jest dostrzec, że z pro­jek­tem jest coś nie tak... nawet, jeśli ta osoba nie jest w sta­nie kon­kret­nie powie­dzieć, co się nie zgadza.

strona-internetowa

Jeśli pro­jek­tu­jesz wzory stron inter­ne­to­wych, uży­waj takich ikon, gra­fik, nagłów­ków i tek­stu, które są jak naj­bar­dziej zbli­żone do praw­dzi­wych ele­men­tów, które będą póź­niej wyko­rzy­stane na stro­nie. Jeśli prze­pro­jek­to­wu­jesz stronę, użyj real­nie ist­nie­ją­cych arty­ku­łów, zamiast wkle­py­wać Lorem Ipsum. Jeśli klient twier­dzi, że ma nowe ikony i gra­fikę, które chce wyko­rzy­stać w nowym pro­jek­cie, poproś go, by ci je prze­słał, zanim rozpoczniesz.

Zalety pik­se­lo­wej per­fek­cji w przy­kła­do­wych stro­nach www.

Zmuszają cię do bycia bar­dziej zor­ga­ni­zo­wa­nym.
Większa orga­ni­za­cja ozna­cza mniej czasu spę­dzo­nego na walce z two­imi pro­jek­tami pho­to­shopa i wię­cej czasu na two­rze­nie „odje­cha­nych” projektów.

Koniec z tłu­ma­cze­niem się klien­tom.
Jeśli zapro­jek­to­wa­łeś daną kom­po­zy­cję w spo­sób per­fek­cyjny, to zna­czy, jeśli wszystko jest na swoim miej­scu zupeł­nie jak chcia­łeś, to nie musisz tłu­ma­czyć klien­tom, że to, co widzą, nie jest final­nym produktem.

Koniec z tłu­ma­cze­niem wszyst­kiego dewe­lo­pe­rom.
Przydaje się to w szcze­gól­no­ści wtedy, gdy klient wysyła pro­jekty dla zespołu dewe­lo­pe­rów w Indiach, a tłu­ma­cze­nie dłu­gich maili oka­zuje się dość skom­pli­ko­wa­nym wyzy­wa­niem. Jeżeli ich jedy­nym zada­niem jest stwo­rze­nie kodu dla DOKŁADNIE tego wszyst­kiego, co widzą, zmniej­sza to szanse, że źle zin­ter­pre­tują okre­ślone detale pro­jektu. Tak naprawdę jest to nawet jesz­cze prost­sze w przy­padku doświad­czo­nych pro­gra­mi­stów, z któ­rymi zwy­kle pra­cuję. Skupiają się na pro­gra­mo­wa­niu, a nie domy­śla­niu się, czy chce mar­gi­nesy o war­to­ści 10px czy 15px.

Mniej czasu spę­dzo­nego na ana­li­zie jako­ści.
Analiza jako­ści, jeśli nie masz z nią dużego doświad­cze­nia, jest jak skro­ba­nie paznok­ciem po szkol­nej tablicy. Jest koń­cową formą pro­jektu, gdy powra­casz do suro­wej zapro­po­no­wa­nej począt­kowo formy i przy­go­to­wu­jesz ją do osta­tecz­nej pre­zen­ta­cji. Dla dewe­lo­pe­rów jest to także nazwa final­nego etapu „przed-startu” gdzie popra­wia się każdy detal, błąd funk­cjo­nalny i nie­wy­raźny pik­sel. Oczywiście, przy małych pro­jek­tach praw­do­po­dob­nie nigdy nie przej­dziesz przez cykl ana­lizy jako­ści, lecz przy więk­szych uwzględ­nia­ją­cych okre­ślony budżet, nie zosta­wiasz pro­jektu aż do momentu, gdy ana­liza dobie­gnie końca, a plik jest zoptymalizowany.

Bardziej szczę­śliwi dyrek­to­rzy artystyczni/klienci.
Jeśli twój dyrek­tor arty­styczny (lub jaki­kol­wiek jest jego tytuł) poświęci mniej czasu cze­pia­jąc się róż­nych detali kom­po­zy­cji, a wię­cej wska­zu­jąc kon­kretne kie­runki ewo­lu­cji pro­jektu, zmniej­szy się jego ciśnie­nie krwi (a także twoje) w cza­sie kon­sul­ta­cji doty­czą­cych pracy nad stroną.

Bardziej pro­fe­sjo­nal­nie wyglą­da­jący efekt koń­cowy.
Tak, twoje kom­po­zy­cje będą wyglą­dać bar­dziej pro­fe­sjo­nal­nie. Skoro spę­dzasz już mniej czasu na wyja­śnie­niach lub robie­niu wymó­wek z powodu sła­bych pro­jek­tów począt­ko­wych, możesz poświę­cić wię­cej czasu na szli­fo­wa­niu szczegółów.

Kontruderzenie

Jako odpo­wiedź na głosy prze­ciwko pik­se­lo­wej per­fek­cji kom­po­zy­cji, zamiesz­czam nastę­pu­jące uwagi finalne.

Twoje kom­po­zy­cje i tak powinny być per­fek­cyjne.
To osta­teczny cel każ­dego pro­jektu i jeśli nie osią­gną­łeś tego, co zamie­rza­łeś, powo­dem mogło być to, że nie sta­ra­łeś się wystar­cza­jąco mocno.

Zabiera MNIEJ czasu, niż alter­na­tywa.
Wybierz jedno: spę­dza­nie 6 godzin na dokład­nym pro­jek­to­wa­niu i zdo­by­ciu apro­baty klienta ALBO spę­dza­nie 4 godzin na pro­jek­to­wa­niu i kolej­nych 4 na popra­wia­niu głu­pich błę­dów, zanim klient zatwier­dzi twoją pracę.

Edycja i poprawki zaj­mują mniej czasu, a nie wię­cej.
Jeśli pro­jek­tu­jesz z tą myślą, a orga­ni­za­cja two­jego pro­jektu pho­to­shopa odzwier­cie­dla ten zamysł, każda por­cja popra­wek, o którą poprosi twój klient, zosta­nie zre­ali­zo­wana z bły­ska­wiczną prędkością.

Znakomite pro­jekty począt­kowe ozna­czają krót­szy czas pracy nad całym pro­jek­tem.
Oszczędza to zarówno pie­nią­dze twoje, jak i klienta. To pod­sta­wowa zasada bły­ska­wicz­nego pro­to­typu – zrób to dobrze, zanim wej­dzie w cykl kosz­tow­nego finan­so­wa­nia projektu.

Największa róż­nica pomię­dzy małymi, a dużymi przy­kła­dami stron www.
Rekruter szu­ka­jący wol­nych strzel­ców do pracy nad pro­jek­tem używa tech­niki „zwra­ca­nia uwagi na szcze­gół” jako naj­waż­niej­szej i naj­bar­dziej efek­tyw­nej miary tego, czy wolny strze­lec jest w sta­nie spro­stać wyzwa­niom dużego pro­jektu. Jeśli twoje port­fo­lio pełne jest nie­tra­fio­nych kom­po­zy­cji, dużo trud­niej będzie tobie dowieść, że jesteś solid­nym i god­nym zaufa­nia specjalistą.

5 Przykładów stron www, choł­du­ją­cych pik­se­lo­wej perfekcji.

-5-

przyklady-strony-hotelu

-4-

przyklady-strony-restauracji

-3-

przyklady-stron-radiowej

-2-

przyklady-strony-gastronomicznej

-1-

przyklad-ladnej-strony

Szukasz ludzi, któ­rzy przy­go­tują wyjąt­kowy wzór strony
dla Twojego biz­nesu? Jesteś we wła­ści­wym miejscu...

Mówiłem o tym wcze­śniej, ale powtó­rzę jesz­cze raz. Nie będziesz w sta­nie osią­gnąć pik­se­lo­wej per­fek­cji przy każ­dym pro­jek­cie i nie ma w tym nic złego. Teoria „pik­se­lowo per­fek­cyj­nych kom­po­zy­cji, wzo­rów stron www” nie prze­wi­duje 100% rezul­ta­tów w każ­dym przy­padku, wska­zuje jedy­nie podej­ście, które powi­nie­neś prze­ja­wiać w pracy nad pro­jek­tem. Po latach sto­so­wa­nia się do tej tech­niki, mogę śmiało powie­dzieć, że jest warta zachodu.

Jeśli szu­kasz firmy, która stwo­rzy dla Ciebie genialny pro­jekt, zna­la­złeś się we wła­ści­wym miej­scu. Napisz lub, zadzwoń 660 970 980 po nie­zo­bo­wią­zu­jącą ofertę.

Mądrego zawsze miło posłuchać
Guru reklamy i sprzedaży.
Twórca międzynarodowej
potęgi Leo Burnett, Inc.
Czego uczą nas marki, którym ufamy?
My, zadajemy sobie to pytanie każdego dnia.
W tym miejscu chcielibyśmy dzielić się z Tobą efektami naszych poszukiwań.

Ramowanie
Sposób, w jaki infor­ma­cje są sfor­mu­ło­wane może zmie­nić naszą ocenę i mieć wpływ na nasze decyzje.
Ukryta histo­ria może spra­wić, że naj­bar­dziej pożą­dane przez nas wybory będą naj­bar­dziej oczy­wi­ste.

Na przy­kład sfor­mu­ło­wa­nie, że coś kosz­tuje „mniej niż fili­żanka kawy dzien­nie” zachęca ludzi do innego spoj­rze­nia na koszt jakie­goś abo­na­mentu. Jak przed­sta­wiasz wybory w swoim sys­te­mie? Jakie są dostępne opcje? Szczególnie w przy­padku nowych lub trud­nych pojęć.
Jestem zainteresowany!
Do: studio@owocni.pl
Od:
Twoja wiadomość
Witam, nazywam się , chętnie nawiąże kontakt z Owocnymi w sprawie współpracy nad nowym projektem. Poproszę o kontakt i wstępną ofertę. Mój numer telefonu to:
[Dostosuj tę wiadomość]
  • Częste pytania
    Ważne pytania i odpowiedzi
    1A co jeśli wasz projekt po
    prostu mi się nie spodoba?
    odpowiedź
    2Jak obsługujecie małe
    i początkujące firmy?
    odpowiedź
    3Jak wygląda
    współpraca na odległość?
    odpowiedź
    4Jaką gwarancję
    jakości otrzymam?
    odpowiedź
    5Ile wynosi minimalny
    budżet projektu?
    odpowiedź
    6Jak rozpocząć współpracę?
    odpowiedź
    Zapytaj o swój projekt
  • Broszura
    Jestem zainteresowany!
    Broszura
    firmowa.
    Jest darmowa!Niezbędna na zebraniu
    lub spotkaniu biznesowym.
    Pobierz broszurę - kliknij

Opublikuj treść u siebie

Chcesz zamieścić tą treść na swoim
blogu, za darmo? Nic prostszego!

Wystarczy, że wstawisz link zwrotny.
Zobacz jak publikować nasze treści.

  • Pisz dla nas
    Pisz dla nas, ekspercie

    Szanowny ekspercie.
    Podziel się wiedzą i odbierz zapłatę.

    Za dobrą treść, płacimy dobre pieniądze.
    Sprawdź to - kliknij tutaj.

  • Wesprzyj nas
    IMarketing

    Podoba Ci się to co robimy?
    - Udziel nam wsparcia, to łatwe - sprawdź tu.

Kliknij lubię to na
Obserwuj nas na
x
Będziemy Ci bardzo wdzięczni za
sugestie lub informację o napotkanym
błędzie. Każdego dnia wkładamy wiele
pracy, aby te strony były lepsze.

Pozwól nam Tobie podziękować:
no-spam