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

Podzielę sie z wami teo­rią pro­jek­to­wą, któ­rą od kil­ku lat sta­ram się wyko­rzy­stać w mojej pra­cy: Pikselowa per­fek­cja pro­jek­tów począt­ko­wych. Dla nie­któ­rych może to być oczy­wi­ste, lecz meto­da ta sta­ła się tak waż­ną czę­ścią mojej pra­cy, ż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­ce­su pro­jek­to­wa­nia - to nowa, umy­sło­wa rewo­lu­cja, któ­ra zmie­ni nasze spoj­rze­nie i wzmoc­ni jakość każ­de­go pro­jek­tu, 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­wa­ją z kon­ku­ren­cją.

7 Wzorów stron, któ­ry­mi zachwy­ca się cały świat.
Zamieszczone wzo­ry są lau­re­ata­mi zeszło­rocz­nej edy­cji kon­kur­su Awwards.

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

Świetny projekt szkodzi?

Z teo­rią “per­fek­cyj­nych pik­se­lo­wo” pro­jek­tów począt­ko­wych zetkną­łem się po raz pierw­szy kil­ka lat temu, w 2010 roku. Michael Lopp (autor kil­ku świet­nych ksią­żek o pro­jek­to­wa­niu i mana­ger fir­my Apple) uczest­ni­czył w pod­ka­ście pod­czas sesji nazwa­nej „Świetny pro­jek szko­dzi”. Jego prze­mo­wa była napraw­dę zabaw­na i prze­peł­nio­na tak dużą licz­bą nie­po­praw­nych poli­tycz­nie żar­tów, jak wystę­py Billa Mahera. Pośród wie­lu cen­nych rad, któ­rych wte­dy udzie­lił, zna­lazł się praw­dzi­wy dia­ment, któ­ry udo­wad­niał, jak każ­dy z pro­jek­tan­tów fir­my Apple odda­ny jest idei pik­se­lo­wo per­fek­cyj­nych kom­po­zy­cji. Każdy z zatwier­dzo­nych pro­jek­tów jest tak dokład­ny, szcze­gó­ło­wy i nie­ska­zi­tel­ny, że zwy­czaj­ny użyt­kow­nik nie jest w sta­nie odróż­nić świet­nej kom­po­zy­cji od kodo­wa­ne­go zrzu­tu ekra­nu.

przyklady-stron-www

„To jest to!”, pomy­śla­łem, „pomysł, któ­ry zre­wo­lu­cjo­ni­zu­je mój pro­ces pro­jek­to­wy.” I tak się rze­czy­wi­ście sta­ło. Rozpoczęcie pro­jek­tu z inten­cją pra­cy nad jego każ­dym pik­se­lem zmie­nia prak­tycz­nie wszyst­kie aspek­ty pro­ce­su pro­jek­to­wa­nia. Nawet, jeśli nie trzy­masz się tej zasa­dy za każ­dym razem, sam fakt roz­po­czę­cia pro­jek­tu z tym nasta­wie­niem będzie miał istot­ny wpływ na final­ny efekt.

Po jed­nym lub dwóch mie­sią­cach testów tej teo­rii, moje doku­men­ty pho­to­sho­pa 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 cza­su na roz­mo­wach z klien­ta­mi, sta­ra­jąc się im wytłu­ma­czyć róż­ni­cę 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ły­wa na per­fek­cyj­ną pik­se­lo­wo 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­ne­sy
2. Perfekcyjne dopeł­nie­nia
3. Perfekcyjne i kon­se­kwent­ne uży­cie fon­tu
4. Perfekcyjne ram­ki i tło
5. Konsekwentne uży­cie kolo­ru
6. Inteligentne i uza­sad­nio­ne odstęp­stwa od pierw­szych 5 reguł.


Kiedy więk­szość pro­jek­tan­tów zaczy­na pro­jekt przy­kła­do­wej stro­ny www, począt­ko­wo 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ę testa­mi jako­ścio­wy­mi, po jakimś cza­sie zacznie popra­wiać kolej­ne ele­men­ty pro­jek­tu, ogra­ni­cza czas i wysi­łek, jaki mógł­byś wło­żyć w jego dosko­na­le­nie. To, co nastę­pu­je póź­niej, jest dla więk­szo­ści pro­jek­tan­tów natu­ral­ne: klien­tom mówi się, że gra­fi­ka i iko­ny są „jedy­nie tym­cza­so­we”. Zamiast praw­dzi­wej tre­ści, wkle­ja się tekst Lorem Ipsum. Żeby tego było mało, ele­men­ty nawi­ga­cyj­ne i inne istot­ne funk­cje inter­fej­su są zastę­po­wa­ne czymś innym, do cza­su praw­dzi­we­go star­tu stro­ny.

Perfekcyjne wzory stron www. Ale co to znaczy?

przyklad-strony-internetowej-1

“Perfekcyjny” ozna­cza, że każ­dy ele­ment two­je­go pro­jek­tu jest dokład­nie taki, jaki chcia­łeś żeby był, gdy zaczy­na­łeś nad nim pra­cę. W aspek­cie mar­gi­ne­sów i dopeł­nień ozna­cza to, że są kon­se­kwent­nie sto­so­wa­ne na całej stro­nie. Jeśli każ­dy bocz­ny 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­pad­ku, gdy masz do czy­nie­nia z pane­lem bocz­nym przy­kła­do­wej stro­ny www.

strona-www-1

W aspek­cie fon­tów i kolo­ru ozna­cza to ich kon­se­kwent­ne uży­wa­nie na całej stro­nie. Zaprojektuj każ­dy ele­ment fon­tu, jak­by był połą­czo­ny z ele­men­tem HTML (np. Wszystkie tagi H1 mają zawsze 18px, wytłusz­czo­ny druk, font Georgia, kolor czar­ny). 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 powin­no być wię­cej, niż 3,4 fon­ty, chy­ba że masz cho­ler­nie dobry powo­dów, żeby zro­bić ina­czej.” Jeśli uży­wasz kon­kret­ne­go odcie­nia czer­wie­ni dla zazna­czo­nych ele­men­tów stro­ny, upew­nij się, że w każ­dym miej­scu na stro­nie znaj­du­je się ten sam odcień (chy­ba, że masz dobry powód, żeby zro­bić ina­czej).

Ramki, zasa­dy sto­so­wa­nia tagów HR i tła powin­ny być sto­so­wa­ne kon­se­kwent­nie – widzia­łem takie kom­po­zy­cje, gdzie każ­da ram­ka i HR są róż­ny­mi odcie­nia­mi tego same­go kolo­ru. Sprawia to, że stro­na wyglą­da nie­chluj­nie i nie­pro­fe­sjo­nal­nie. Nawet dla nie­wy­szko­lo­ne­go oka łatwo jest dostrzec, że z pro­jek­tem jest coś nie tak... nawet, jeśli ta oso­ba nie jest w sta­nie kon­kret­nie powie­dzieć, co się nie zga­dza.

strona-internetowa

Jeśli pro­jek­tu­jesz wzo­ry 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­żo­ne do praw­dzi­wych ele­men­tów, któ­re będą póź­niej wyko­rzy­sta­ne na stro­nie. Jeśli prze­pro­jek­to­wu­jesz stro­nę, 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 iko­ny i gra­fi­kę, któ­re chce wyko­rzy­stać w nowym pro­jek­cie, poproś go, by ci je prze­słał, zanim roz­pocz­niesz.

Zalety pikselowej perfekcji w przykładowych stronach www.

Zmuszają cię do bycia bar­dziej zor­ga­ni­zo­wa­nym.
Większa orga­ni­za­cja ozna­cza mniej cza­su spę­dzo­ne­go na wal­ce z two­imi pro­jek­ta­mi pho­to­sho­pa i wię­cej cza­su na two­rze­nie „odje­cha­nych” pro­jek­tó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­cyj­ny, to zna­czy, jeśli wszyst­ko jest na swo­im miej­scu zupeł­nie jak chcia­łeś, to nie musisz tłu­ma­czyć klien­tom, że to, co widzą, nie jest final­nym pro­duk­tem.

Koniec z tłu­ma­cze­niem wszyst­kie­go dewe­lo­pe­rom.
Przydaje się to w szcze­gól­no­ści wte­dy, gdy klient wysy­ła pro­jek­ty dla zespo­łu dewe­lo­pe­rów w Indiach, a tłu­ma­cze­nie dłu­gich maili oka­zu­je 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­kie­go, co widzą, zmniej­sza to szan­se, że źle zin­ter­pre­tu­ją okre­ślo­ne deta­le pro­jek­tu. Tak napraw­dę jest to nawet jesz­cze prost­sze w przy­pad­ku doświad­czo­nych pro­gra­mi­stów, z któ­ry­mi zwy­kle pra­cu­ję. Skupiają się na pro­gra­mo­wa­niu, a nie domy­śla­niu się, czy chce mar­gi­ne­sy o war­to­ści 10px czy 15px.

Mniej cza­su spę­dzo­ne­go na ana­li­zie jako­ści.
Analiza jako­ści, jeśli nie masz z nią duże­go doświad­cze­nia, jest jak skro­ba­nie paznok­ciem po szkol­nej tabli­cy. Jest koń­co­wą for­mą pro­jek­tu, gdy powra­casz do suro­wej zapro­po­no­wa­nej począt­ko­wo for­my 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­ne­go eta­pu „przed-star­tu” gdzie popra­wia się każ­dy detal, błąd funk­cjo­nal­ny 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­li­zy jako­ści, lecz przy więk­szych uwzględ­nia­ją­cych okre­ślo­ny budżet, nie zosta­wiasz pro­jek­tu aż do momen­tu, gdy ana­li­za dobie­gnie koń­ca, a plik jest zop­ty­ma­li­zo­wa­ny.

Bardziej szczę­śli­wi dyrek­to­rzy artystyczni/klienci.
Jeśli twój dyrek­tor arty­stycz­ny (lub jaki­kol­wiek jest jego tytuł) poświę­ci mniej cza­su cze­pia­jąc się róż­nych deta­li kom­po­zy­cji, a wię­cej wska­zu­jąc kon­kret­ne kie­run­ki ewo­lu­cji pro­jek­tu, zmniej­szy się jego ciśnie­nie krwi (a tak­że two­je) w cza­sie kon­sul­ta­cji doty­czą­cych pra­cy nad stro­ną.

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

Kontruderzenie

Jako odpo­wiedź na gło­sy prze­ciw­ko pik­se­lo­wej per­fek­cji kom­po­zy­cji, zamiesz­czam nastę­pu­ją­ce uwa­gi final­ne.

Twoje kom­po­zy­cje i tak powin­ny być per­fek­cyj­ne.
To osta­tecz­ny cel każ­de­go pro­jek­tu 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 moc­no.

Zabiera MNIEJ cza­su, niż alter­na­ty­wa.
Wybierz jed­no: spę­dza­nie 6 godzin na dokład­nym pro­jek­to­wa­niu i zdo­by­ciu apro­ba­ty klien­ta 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 two­ją pra­cę.

Edycja i popraw­ki zaj­mu­ją mniej cza­su, a nie wię­cej.
Jeśli pro­jek­tu­jesz z tą myślą, a orga­ni­za­cja two­je­go pro­jek­tu pho­to­sho­pa odzwier­cie­dla ten zamysł, każ­da por­cja popra­wek, o któ­rą popro­si twój klient, zosta­nie zre­ali­zo­wa­na z bły­ska­wicz­ną pręd­ko­ścią.

Znakomite pro­jek­ty począt­ko­we ozna­cza­ją krót­szy czas pra­cy nad całym pro­jek­tem.
Oszczędza to zarów­no pie­nią­dze two­je, jak i klien­ta. To pod­sta­wo­wa zasa­da bły­ska­wicz­ne­go pro­to­ty­pu – zrób to dobrze, zanim wej­dzie w cykl kosz­tow­ne­go finan­so­wa­nia pro­jek­tu.

Największa róż­ni­ca pomię­dzy mały­mi, a duży­mi przy­kła­da­mi stron www.
Rekruter szu­ka­ją­cy wol­nych strzel­ców do pra­cy nad pro­jek­tem uży­wa tech­ni­ki „zwra­ca­nia uwa­gi na szcze­gół” jako naj­waż­niej­szej i naj­bar­dziej efek­tyw­nej mia­ry tego, czy wol­ny strze­lec jest w sta­nie spro­stać wyzwa­niom duże­go pro­jek­tu. Jeśli two­je 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 spe­cja­li­stą.

5 Przykładów stron www, chołdujących pikselowej 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 przygotują wyjątkowy wzór strony
dla Twojego biznesu? Jesteś we właściwym 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łe­go. Teoria „pik­se­lo­wo per­fek­cyj­nych kom­po­zy­cji, wzo­rów stron www” nie prze­wi­du­je 100% rezul­ta­tów w każ­dym przy­pad­ku, wska­zu­je jedy­nie podej­ście, któ­re powi­nie­neś prze­ja­wiać w pra­cy nad pro­jek­tem. Po latach sto­so­wa­nia się do tej tech­ni­ki, mogę śmia­ło powie­dzieć, że jest war­ta zacho­du.

Jeśli szu­kasz fir­my, któ­ra stwo­rzy dla Ciebie genial­ny 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ą ofer­tę.

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

Kompletowanie zestawu
Im bli­żej jeste­śmy skom­ple­to­wa­nia całej kolek­cji, tym bar­dziej chce­my mieć wszyst­kie jej ele­men­ty.
Ta zasa­da ma zasto­so­wa­nie tak­że w przy­pad­ku nie­do­koń­czo­nych puz­zli i obraz­ków – chce­my zoba­czyć cały, ukoń­czo­ny obra­zek.

Poszukaj logicz­nych zesta­wów (jak rodza­je infor­ma­cji), któ­re mogą suge­ro­wać kom­ple­to­wa­nie kolek­cji. Co ludzie mogą zbie­rać w Twoim sys­te­mie? Jak moż­na pogru­po­wać te ele­men­ty w odręb­ne zesta­wy by stwo­rzyć łatwiej­sze do osią­gnię­cia cele (i moty­wa­cję do dal­sze­go zbie­ra­nia więk­szej kolek­cji)?
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
Otrzymaj ofertę