www.romver.ru / Полный список статей / Памятка дизайнеру сайтов

K sojaleniu ogromnaa armia daje opitnix, «modnix» i effektnix dizaynerov zabivaut, 4to rezul'tatom ix tvor4estva doljen bit' sayt, a ne tol'ko «super-skrin6ot» godniy tol'ko dla portfolio.
Pervona4al'no eta pamatka pisalas' mnou dla vnutrennego pol'zovania no, obrastaa materialami, virosla v samostoatel'nuu stat'u. Ameriku a ne otkril, a prosto sobral voedino i sformuliroval rad trebovaniy, kotorie doljen u4itivat' dizayner v processe proektirovania i oformlenia sayta.

Vna4ale dumaem, potom delaem

Eto o4en' prostoe i 4asto naru6aemoe pravilo. Osobenno molodimi dizaynerami.
A nastoatel'no rekomenduu vsem i kajdomu: voz'mite karanda6 i bumagu. Podumayte nad zada4ami i ideey sayta. Sdelayte bistrie 4ernovie eskizi, naydite kompoziciu, priblizitel'nuu setku, raspolojenie blokov i elementov, nabroskov trebuemix illustraciy. I tol'ko posle etogo sadites' za komp'uter.
Takoy prostoy xod v razi produktivnee, ekonomit ku4u vremeni i pomogaet naxodit' bolee interesnie re6enia.

Primer bistrogo nabroska i polu4ennogo rezul'tata

Ot bol'6ego k men'6emu, ot ob6ego k 4astnomu

Eto vtoroe prostoe pravilo. I ono takje 4asto naru6aetsa.
Klassi4eskoe prepodavanie risunka i jivopisi u4it: «Dvigaytes' ot bol'6ego k men'6emu, ot ob6ego k 4astnomu. Vna4ale prorabotayte ob6uu kompoziciu, samie bol'6ie massi i ob&emi, samie krupnie patna, a potom dorabativayte, uto4nayte, nasi6ayte detalami.»
Eto pravilo celikom primenimo ko vsem aspektam i janram dizayna.
Produmayte svoy proekt, naydite ideu i kompoziciu, narisuyte seriu eskizov. I potom, planomerno, eti eskizi voplo6ayte, na4inaa s setki, komponovki blokov, elementov, krupnix cvetovix paten. I posledovatel'no nasi6ayte ix detalami.

Primer po6agovogo uto4nenia i dorabotki maketa ot ob6ego k 4astnomu.

Nado priznat', 4to a 4asto videl, kak xudojniki-samou4ki-samorodki na4inali pisat' portret 4eloveka s glaza, ili s pal'ca levoy nogi. I ne raz videl, kak nekotorie dizayneri na4inaut risovat' sayt s kakoy-to odnoy-4astnoy ikonki. I v oboix slu4aax, k moemu udivleniu, polu4alsa interesniy rezul'tat.
No eto dolgiy put', 4asto trebuu6iy bol'6ix korrektirovok i peredelok v processe dizayna. Vozmojno, on primenim dla tvor4estva, no v dizayne-professii, kogda v opredelenniy srok nujno polu4it' xoro6iy rezul'tat, a s4itau, 4to podobniy podxod nedopustim. Nujni garantirovannie texnologii processa, 4tobi polu4at' garantirovannie rezul'tati v 4etkie sroki. A ne prosto «polu4itsa-ne polu4itsa».

Itak, poditojim: «Ot bol'6ego k men'6emu, ot ob6ego k 4astnomu».

Modul'naa setka

Odno iz pervix re6eniy v processe sozdania dizayna — eto modul'naa setka. Ediniy karkas i sxema raspolojenia vsex osnovnix blokov i elementov, proxoda6iy 4erez vse stranici sayta.
Setki bivaut prostie i slojnie, gibkie v ispol'zovanii i ne o4en'. Eto ne stol' vajno. Vajno to, 4to esli vi pri proektirovanii dizayna zadali opredelennuu setku moduley — bud'te dobri ey sledovat'. Ot pervoy do posledney stranici svoego proekta. A esli v processe prorisovki vnutrennix stranic u vas poavilis' elementi, ne loja6iesa v prinatuu setku — zna4it vi nedostato4no vremeni udelili eё proektirovaniu.
Sledovanie edinoy modul'noy setke v ramkax proekta ne tol'ko uveli4it cel'nost' i logi4nost' vospriatia sayta, no i mnogokratno uprostit trud razrabot4ikam.

Primer ispol'zovania modul'noy setki

Primer ispol'zovania modul'noy setki

Mas6tabiruemost'

V na6e vrema, kogda u vsex pol'zovateley samie razli4nie monitori, est' smisl delat' preimu6estvenno «rezinovie» sayti. T.e. sayti, kotorie mas6tabiruutsa pod razre6enie monitora pol'zovatela.

Otobrajenie elasti4nogo sayta na razli4nix monitorax

Itak, delaa «rezinoviy» dizayn ne zabivaem, 4to:

• Ob6aa kompozicia ne doljna naru6at'sa ni pri kakom razre6enii monitora u posetitela.
• Vse elementi mas6tabiruutsa v zavisimosti ot razmera ekrana pol'zovatela i razmera 6rifta.
• Vsa modul'naa setka, bloki i pro4ie gorizontali mas6tabiruutsa v procentax.
• Vse 6rifti, otstupi, po4ti vse vertikali mas6tabiruutsa v em. Vo mnogix slu4aax, eto kasaetsa daje ramok (border).
• Isklu4enie mogut sostavlat' li6' kartinki. I to, jestkiy razmer v px dla mnogix izobrajeniy — ograni4enie li6' po vertikali.

«Sjatie-rastajenie»

Optimal'na dla ispol'zovania tak nazivaemaa «polu-rezina», t.e. sayt rastagivaetsa i sjimaetsa do opredelennogo predela.

min

Pervoe, s 4ego nujno na4at' — eto nayti minimal'noe sjatie sayta.

Minimal'naa 6irina sayta, bezuslovno, opredelaetsa zada4ami sayta i ego celevoy auditoriey. Fakti4eski sey4as est' tol'ko dva minimal'nix parametra: 760 px i 990 px. Perviy optimalen dla korporativnix saytov libo resursov, rass4itannix na samuu massovuu i razno6erstnuu auditoriu (naprimer, massovie servisi: po4tovie, poiskovie, novostnie i t.p.). Vtoroy podxodit dla saytov imidjevogo i promou6en nazna4enia.
Proveraem, i esli trebuetsa korrektiruem, kajdiy element modul'noy setki, 4tobi ne voznikalo naezdov/naxlestov elementov drug na druga pri minimal'nom sjatii sayta.

max

Maksimal'naa 6irina sayta mojet bit' raznoy, no, kak pravilo, rekomenduetsa diapazon dla rastajenia ne vi6e, 4em v poltora-dva raza ot razmera minimal'nogo sjatia. Eto obuslovleno tem, 4to pri rastagivanii sayta bolee, 4em v poltora raza kompozicia, obi4no, ru6itsa.
Nujno opredelit', 4to proizoydet so vsem saytom, pri razmere monitora pol'zovatela svi6e maksimal'noy 6irini. Re6aem, kuda on budet viravnivat'sa. Vpravo? Vlevo? Po centru?
Dobivaemsa zaver6ennogo vida sayta i ego estestvennogo perexoda v okrujenie pri razre6enii svi6e maksimal'nogo. Nedopustimo, 4tobi sayt na bol'6om monitore vigladel kak «obrezanniy».
Risuem vse illustracii i nepovtorau6iesa foni iz principa «u kogo bol'6e monitor, tot bol'6e uvidit». Obi4no, 6irina illustraciy obuslovlena 6irinoy otvedennix pod nix blokov modul'noy setki v sostoanii max.

Zapas na rost sayta

V bol'6ey sfere zada4, esli re4' idet ne o sayte-vizitke ili promo-sayte, nujno u4est', 4to koli4estvo stranic i razdelov sayta mojet rasti i menat'sa.
Poetomu:
Navigacia doljna stroit'sa tak, 4tobi dobavlenie novix punktov menu, a uj tem bolee izmenenie nazvania punktov proisxodilo bezboleznenno. Nedopustimo, 4tobi dobavlenie novogo razdela privodilo k peresmotreniu navigacii.

Primer «bezboleznennogo» izmenenia/dobavlenia drevovidnoy navigacii pervogo i vtorogo urovna

V nekotorix slu4aax nujno predusmatrivat' bezboleznennoe dla vne6nego vida dobavlenie/skritie informacionnix/funkcional'nix blokov na sayte.

Primer «bezboleznennogo» pereme6enia,
izmenenia/udalenia blokov sayta

U4itivaa ekrannuu mas6tabiruemost', a takje dobavlenie novix materialov na sayt, rekomenduetsa otdavat' predpo4tenie tekstovim zagolovkam i navigacii.

6riftovaa sxema

Bol'6aa 4ast' saytov smotritsa cel'no i zaver6eno pri postroenii dizayna na osnove odnogo-trex 6riftov.
Bazoviy 6rift — osnovnoy 6rift materialov sayta.
Akcidentniy — 6rift dla zagolovkov.
V nekotorix slu4aax vvodatsa dopolnitel'nie 6rifti dla:

• menu i navigacii;
• blokov videlenia (vajnoy informacii, citat, vinosok);
• dla melkogo teksta, s cel'u povisit' 4itabel'nost'.

Dizayner doljen splanirovat' edinuu ob6uu sxemu razmerov otstupov/zastupov dla vsex elementov na sayte, ierarxiu zagolovkov i navigacionnix elementov (naprimer, dla drevovidnogo menu ili oblaka tegov). Ona doljna bit' cel'noy i ispol'zovat'sa na vsex stranicax sayta.
Vsё posleduu6ee oformlenie informacii na sayte doljno stroitsa na baze ob6ey sxemi.

6riftovaa sxema prostogo korporativnogo sayta

Reakcia na pol'zovatela

Dizayner doljen splanirovat', 4to budet proisxodit' s elementami, reagiruu6imi na deystvia pol'zovatela.
Rassmotrim tipi4nie elementi.

Navigacia

Fragment maketa sayta, na kotorom pokazani tri sostoania navigacii: obi4niy vid menu, punkt menu pri navedennom kursore, videlenie teku6ego razdela.

V zavisimosti ot tipa i mas6tabnosti sayta, nujno pokazat' rad sostoaniy punkta navigacii.
Tipi4niy nabor:

• Normal'niy vid.
• Mi naveli kursor.
• Mi naxodimsa v etom razdele.
• Mi naxodimsa v etom razdele, no pro6li glubje.
• Mi naveli kursor na punkt roditel'skogo razdela.

Pri etom minimal'niy nabor dla vsex elementov navigacii, vklu4aa pereklu4ateli i elementi upravlenia — eto normal'niy i aktivniy vid. T.e. minimum, dla vsex upravlau6ix i navigacionnix elementov eto — «vkl./vikl.».

Razli4nie sostoania elementa navigacii

Ssilki

Ssilki, raspolojennie v tekste, vsegda pod4erknuti i doljni otli4at'sa po cvetu ot osnovnogo teksta.
Jelatel'no, a v navigacii obazatel'no, predusmotret' vne6niy vid ssilki, pri navedenii kursora.
V bol'6ix ob&emax teksta i pri vida4e raznorodnoy informacii (naprimer, oglavlenii statey, karti sayta i t.p.), obazatel'no nujno predusmotret' vne6niy vid dla pose6ennix ssilok. I oni takje trebuut svoego vne6nego vida pri navedenii kursora.

Ssilki s dopolntel'nimi svoystvami

Dla ssilok, kotorie predusmatrivaut dopolnitel'nie vozmojnosti, osobenno pri ispol'zovanii v tekste, rekomenduetsa predusmotret' nebol'6uu ikonku, kotoraa podskajet pol'zovatelu o dopolnitel'nix svoystvax ssilki.
Takix ikonok trebuut ssilki:

• al'ternativnoe polu4enie dannix (RSS, PDA, versia dla pe4ati)
• ska4ivanie faylov, raspolojennix na servere
• obra6enie k popularnim resursam (Andeks, Google, Flickr, LJ, kartografi4eskie servisi, Vikipedia i t.p.)
• e-mail adresov
• otkritie form
• otkritie ssilki v novom okne

Primeri ispol'zovania dopolnitel'nix ikonok «v jizni».

Psevdo-ssilki

Psevdossilki, t.e. ssilki, kotorie ne vedut na druguu stranicu, a otkrivaut/skrivaut informaciu na teku6ey, bez ee perezagruzki, obozna4aem punktirnim pod4erkivaniem. Vo vsem ostal'nom, na nix rasprostranaetsa vse, 4to ukazano dla obi4nix ssilok.

Odin iz primerov ispol'zovania psevdossilok.

Tabi

Tabi — eto nekotoraa smes' elementa navigacii i elementa upravlenia.
Dla nix u4itivaem sostoania:

• tab neaktiven
• naveden kursor (opt)
• zagruz4ik soderjania (opt)
• tab aktiven

Fragment sayta, na kotorom vidni srazu tri sostoania tabov: aktivniy tab, naveden kursor i obi4noe, neaktivnoe, sostoanie.

Kursor

Predusmatrivaem reakciu kursora pri navedenii. Osobenno, esli re4' idet o nestandartnix elementax upravlenia, takix kak navigacia, psevdo-ssilki i tabi (hand), podskazki (help), izmenenie razmera elementa i peretaskivanie.

Oformlenie soderjania

V internete pravit informacia. Sayt — vsego li6' sposob eё dostavki. Vne6nee oformlenie sayta — li6' ramka, zadau6aa emocional'niy nastroy i podkreplau6aa brend.
Imenno izu4aa informaciu pol'zovatel' provodit samuu bol'6uu 4ast' svoego vremeni na sayte. I imenno po etoy pri4ine nujno udelit' oformleniu soderjania doljnoe vnimanie.
Zada4i sayta i ego soderjanie vsegda raznoe. Poetomu oformlat' eto soderjanie takje vsegda nujno po raznomu.

Fragment novostnogo sayta, na kotorom dizayner pokazal bol'6uu 4ast' tipi4nix elementov dla oformlenia soderjania.

Elementi soderjania

Srazu nujno skazat', 4to predusmotret' zaranee vse vozmojnie varianti oformlenia nel'za. Mi rassmotrim li6' tipi4nie.
Naprimer, dla korporativnogo sayta:

• abzac teksta;
• ierarxia zagolovkov trex-4etirex urovney;
• ssilki, psevdo-ssilki;
• element videlenia vajnoy informacii;
• citata;
• nenumerovanniy spisok;
• numerovanniy spisok;
• vlojennie spiski;
• illustracia na polosu, v tekst;
• tablica ili neskol'ko ix tipov;
• fayli dla ska4ivania;
• vinoski;
• oformlenie marginaliy, esli takie ispol'zuutsa;
• poda4a informacii v 2–3 kolonki (zavisit ot setki);
• prostaa forma.

Riba

V ideale, nujno operirovat' real'nim soderjaniem. Esli takogo net, to kak minimum, «riba» doljna bit' maksimal'no-tipi4naa dla oformlaemoy stranici po svoemu tipu i ob&emu. Eto pozvolit izbejat' probelov v oformlenii i dosadnogo vida sayta posle sda4i v ekspluataciu.
Polnost'u nedopustimo ispol'zovanie «ribi» iz drugogo azika, t.k. ob&emi teksta i srednaa dlina slov razli4autsa. Naprimer v angliyskom i russkom eto o4en' zametno.

Razli4niy risunok identi4nix po soderjaniu blokov teksta na raznix azikax.

P.S.

Privedennie trebovania ne avlautsa dogmoy. Ot lubix pravil inogda mojno otstupat'. Tol'ko delat' eto nujno ne po neznaniu, a osoznanno.

Ob avtore

Pavel Kolodajniy. Art-direktor i osnovatel' dizayn-buro «make».
Specializiruetsa na razrabotke internet-saytov i proektirovanii interfeysov. Ob6iy staj v dizayne — 9 let. Kak avtor i so-avtor pri4asten k poavleniu na svet bolee sotni saytov i okolo trex desatkov interfeysov. Sredi rabot est' proekti dla takix kompaniy, kak Canon Inc., Yandex, Yamaha Motor, Sunbay Software, Space Andventures, Pulsar Software Systems. Ne smotra na prejnie dostijenia s4itaet, 4to samie interesnie proekti e6e vperedi.

Blagodarnosti

Vsem moim kollegam i sotrudnikam, tak kak vse primeri eto fragmenti rabot na6ego buro.

Evgeniu 4eporovu, kotoriy podtolknul mena k sozdaniu stat'i.
Vladu Denisovu, kotoriy pomogal mne s illustrativnimi primerami.

Aroslavu Trofimovu (iz Inspire) za soveti i konstruktivnuu kritiku tekstov.

Iru Ancevu, za korrekturu, perevod angloazi4noy versii i za to, 4to ona ubedila mena zakon4it' stat'u, kogda xotel brosit'.

Vsem pol'zovatelam Jivogo Jurnala i Xabraxabra, za kommentarii, otzivi i voprosi, blagodara kotorim a dorabotal i ras6iril etot material.