Tipy pre efektívny web dizajn

9
62

Prvý dojem pri návšteve webovej stránky je veľmi dôležitý. Preto prinášam zhrnutie základných bodov, ktorými by sa mal každý  riadiť.

Rýchle načítanie webových stránok

Rýchlosť načítania webových stránok patrí k základnému pravidlu. Môžete vytvoriť webovú stránku, ktorá vyzerá krásne, ale len málo ľudí ju vôbec uvidí, pokiaľ jej načítanie trvá príliš dlho. Vaše návrhy musia byť optimalizované pre web a nemali by sa načítavať viac ako 5 sekúnd.

Jasná navigácia

Uistite sa, že všetky dôležité odkazy sú na viditeľných miestach. Najlepšie priamo hore –> to je prvé miesto, kde ich užívateľ hľadá. Využite menu vpravo alebo vľavo. Používajte odkazy na čo najviac stránok vášho webu, nech sú vaše informácie prístupné zo všetkých častí webstránky. Je dobré používať aj pätu, kde môžete umiestniť dôležité odkazy. Každá stránka by mala obsahovať mapu stránky.

Všetky druhy rozlíšenia

Dnes už existujú zariadenia s rôznymi druhmi rozlíšení. Pohybujú sa v rozmedzí od 320x480px až do napr. Full HD 1920×1080 px a viac. Dôležité je navrhnúť stránky pre všetky rozlíšenia. Jedným spôsobom ako tento problém vyriešiť je navrhnúť stránku responzívne.

Kompatibilita prehliadačov

Uistite sa, či je vaša stránka kompatibilná so všetkými prehliadačmi (cross-browser compatibility). Navrhujte webovú stránku dovtedy, kým bude vyzerať dobre aj na IE (aspoň verzia 7) – ešte stále totiž veľká časť populácie používa práve IE a nie každý ho pravidelne aktualizuje.

Čitateľné a profesionálne vyzerajúce písma

Nepýtajte sa ma, koľkokrát som vypla web len preto, že písmo je Comic Sans a farba je svetlo ružová alebo svetlo zelená. Comic Sans patrí k písmam, ktoré sú charakteristické pre žáner komiksu a na webe je jeho použitie znakom neprofesonality prípadne recesie. Ozdobné písma používajte rozvážne. Zaujímavú typografiu na webe môžete používať napr. vďaka Google fonts alebo Fontsquirrel.

Pozadie a obrázky

Obrázok je často prvou vecou, ktorú si návštevník všimne. Ak ich použijete v správnej kombinácii s ostatnými prvkami stránky, pochopí, čo sa na stránke nachádza a pokračuje ďalej v čítaní textu.

Pomocou obrázkov môžete upriamiť pozornosť užívateľa a vzbudiť v ňom nezabudnuteľný prvý dojem. Niekedy povedia viac, než samotný text, ktorý môžete ľahko zabudnúť. Musíte ich však vhodne skombinovať s farebnou schémou, typografiou a ostatnými objektmi. Váš web bude atraktívnejší a osobnejší, ak napríklad obsahuje fotky zamestnancov, katalóg produktov alebo pôsobivý úvodný obrázok, či jednoduchý a zároveň elegantný obrázok na pozadí. Dôležitá je však kvalita fotografií a nepreháňať to. Obrázok nemôže priamo odpútať pozornosť návštevníka od hlavného obsahu stránky. V súčasnosti sa často používajú aj rôzne textúry, vzhľadom k ich univerzálnosti sa dajú použiť v kombinácii s rôznymi prvkami, farbami, typografiou a osvetlením na rôznych miestach webu.

Využívajte biely priestor

Držte sa pravidla Keep it Simple Stupid (KISS). Minimalizujte množstvo grafiky a využívajte viac bieleho priestoru. Biele miesto dáva pocit priestornosti a celkovej elegancie.

Skontrolujte všetky odkazy

Skontrolujte všetky odkazy, pred tým než nahráte web na server. Môžete použiť Dreamweaver alebo online nástroj Net Mechanic.

Dobrý článok? Chceš dostávať ďalšie?

Už viac ako 4 000 z vás dostáva správy e-mailom. Nemusíš sa báť, nie každé ráno. Len občasne.

Váš email neposkytneme 3tím stranám. Posielame naňho len informácie z robime.it. Kedykoľvek sa môžete odhlásiť.

ZDIEĽAŤ
Predchádzajúci článokSkyDrive: 7 GB zadarmo v Cloude
Ďalší článokVodopád, Agile a ten tretí
Svetlana Margetová
Študentka 4. ročníka na Ekonomickej univerzite, odbor Manažérske rozhodovanie a informačné technológie. Popri štúdiu pripravujem automatizované testy a programujem v Zend a Django frameworku, venujem sa vývoju mobilných aplikácií pre všetky platformy (natívne, HTLM5 a hybridné aplikácie). Zaujímam sa o responsive web dizajn pre mobily, tablety a PC zariadenia.
  • Martin Maričák

    Trochu to rozoberiem:

    Rýchle načítanie webových stránok – V poriadku, to je samozrejmé, web by mal byť
    postavený na dobrom technickom riešení. Je to dôležité, aby neiritoval používateľov
    a neznižoval svoju dôveryhodnosť častými výpadkami a zlou dostupnosťou.

    Jasná navigácia – Tu pozor, veľa odkazov rozhodne neurobí navigáciu jasnejšou. Kľúčové je rozmiestniť jednotlivé prvky tam, kde by ich používateľ bude najpravdepodobnejšie očakávať. Každá stránka sa dá naučiť používať, ale lepšie je, ak ju používateľ bude vedieť používať ešte pred tým, než ju vôbec uvidí. 🙂 Je preto lepšie ukazovať používateľovi to podstatné a naviesť ho tam, kam by sa mal dostať, menej podstatné funkcie nemusia byť vôbec také výrazné, používateľ ich nájde, až na to príde čas. Pri prvej návšteve je potrebné ukázať mu podstatu a presvedčiť ho, aby sa vrátil, resp. aby vykonal nejakú konverziu (nakúpil, zdieľal, alebo čokoľvek iné, čo je primárnym cieľom webu).

    Všetky druhy rozlíšenia – Toto je rozhodne pravda, mnoho stránok na mobilné zariadenia vôbec nemyslí, prípadne na nich pôsobí neohrabane. Mal by sa na to klásť omnoho väčší dôraz, vzhľadom na to, ako rapídne sa percento návštev z mobilných zariadení zvýšilo. Vlastníkom webových projektov, ktoré s mobilnými zariadeniami nepočítajú rozhodne odporúčam si v analytickom nástroji odmerať, koľko návštev z mobilných zariadení zaznamenávajú.

    K písmam – Vymenované služby ponúkajú len open source fonty. Adobe vytvorilo vlastnú platformu pre profesionálnu typografiu na webe. Typekit.

    Biely Priestor – To s minimalizáciou množstva grafiky je také… ťažko povedať. Niektoré weby sú zámerne urobené s množstvom grafiky a fungujú práve vďaka tomu. Microsites, ktoré pomáhajú marketingovej kampani nejakého produktu sú zámerne graficky vyšperkované. Vraví sa, že “Good design is invisible”. Teda áno, pri väčšine webov a webových aplikácií by grafická časť dizajnu nemala ľuďom stáť v ceste, každopádne dômyselný dizajn sa prejavuje inak. Nie grafikou, nie bielym priestorom (aj keď netvrdím, že nemajú svoje miesto na dobrom webe). Dômyselný dizajn je o interakciách, o tom, ako web komunikuje, ako používateľovi dáva na javo, že niečo úspešne urobil, resp. pokazil. Dobrý dizajn je to, čo používateľovi nestojí v ceste, to, čo používateľovi podá ruku a povodí ho webom. A s tým súvisí všetko, aj navigácia, skrývanie nepotrebného. Uvediem jednoduchý príklad: Ak na facebooku nemáte žiadnu novú správu indikátor je modrý, dá sa síce rozoznať od pozadia, ale podvedome ho človek ignoruje, ak ale dostanete správu razom je biely a ešte aj s červeným krúžkom s počtom správ, a to si na modrom pozadí ihneď všimnete.
    Viac si skúste prečítať na: http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
    K bielemu priestoru je pekný článok: http://www.designers.com/blog/the-smell-of-whitespace/

    Ten článok mi príde ako len tak narýchlo napísaný, veľa sa z neho dozvedieť nedá. Prepáč. Možno ti len nesadla téma. Podľa bia by som skôr povedal, že by si mohla skôr skúsiť napísať niečo o vývoji. O Djangu toho, pokiaľ viem, na slovenskom webe veľa nie je. 🙂

    Ešte na záver, každému, koho táto problematika zaujíma, alebo ju práve rieši odporúčam veľmi kvalitnú prednášku českého odborníka, Jana Řezáča: http://sprednasky.cz/jan-rezac-uvod-do-webdesignu/

    • Svetlana Margetová

      Ahoj 😀 ja ti dakujem za tak dlhy komentar (mam pocit, ze je dlhsi ako cely moj clanok :D), ved ten clanok je rok stary a uz teraz mi bolo povedane ze je dlhy, ale vo vsetkom co pises s tebou suhlasim, toto bolo napisane na najvseobecnejsej urovni, jasne ze niede su obrazky viac vhodne, alebo obrazky do celeho pozadia, ale vetsina webov aspon a SR a CR ma jednoduche stranky ako tie so super grafikou

      co sa tyka pisma, Typekit je fakt super vec

      Ak chces vediet viac a zaujimas sa o tuto temu pozri si stranku http://www.smashingmagazine.com/category/design/

      alebo

      http://www.1stwebdesigner.com/

      mozno ta budu zaujimat 🙂

      Tak jasne o djangu coskoro napisem ale to uz asi skor serial alebo nieco viac dielne, lebo to do jedneho clanku nezhrniem 🙂 Tak sa mas na co tesit 😀

      • Martin Maričák

        Ech. Neviem, ani som nepozeral na dátum, ja som ho našiel dnes na twitteri. 🙂 Inak ja si nemyslím, že ten článok je dlhý, ja si myslím, že spolu s tým, čo som tam doplnil je stále veľmi stručný. Buď písať poriadne, alebo vôbec.

        Len pozor na príliš všeobecnú úroveň. Ľudí akurát domotáš a vyprodukuješ ešte viac pseudoodborníkov, ktorí si budú o sebe myslieť, že sa v dizajne vyznajú a produkovať hlúposti (a vyhadzovať tak peniaze majiteľov webov von oknom…). Tým nechcem tvrdiť, že ja som profík, ale aspoň poznám svoje hranice (ktoré pomaly posúvam ďalej) a netvrdím záujemcom o spoluprácu, že viem urobiť všetko. 🙂

        Aké milé. Aj linky si mi poslala. 🙂 Samozrejme ich poznám a čítam pravidelne. 😉

        Na Django neviem, či si nájdem čas, ja len, že tam možno nebudeš motať ľuďom hlavy nekompletnými informáciami.

        • Svetlana Margetová

          hehe tak jasne, ze nie, ale tak poznas to, dlhe clanky nikto zase necita a pri programovani su iba same fakty, to vies..no ani ja netvrdim, ze som profesional v dizajne, ja som skor taky programatorsky dizajner, ale celkom mi to ide fajn uz 🙂 oki, tak pre teba napisem na mojom osobnom blogu dlhsiu verziu kazdeho clanku 😀

          • Martin Maričák

            Tak, ten, kto dlhé/odborné/zahraničné články nečíta si nezaslúži byť odborník, lebo pre to nič nerobí. Ani trochu nevystúpi zo svojej komfortnej zóny. Takým články vôbec písať netreba. 🙂

            Aj pri web dizajne, sú, dá sa povedať, samé fakty. Mal by to byť skôr vedný obor a stav, v akom tento odbor je, a ako sa k nemu pristupuje na akademickej pôde je žalostný. Potom ľuďom neostáva nič iné, len čítať články. A keď sú navyše aj články, ktoré číta zavádzajúce, alebo nekompletné, tak sa z dizajnéra stáva človek, ktorý predáva vopred nefunkčné produkty.

            Inak ja som zas taký dizajnérsky programátor. Potom sa občas pristihnem, ako riešim, že jedna metóda je od konca predošlej odsadená o tri prázdne riadky a druhá len o dva. 😀

          • Svetlana Margetová

            Vidis, tak to si musime rozumiet 😀 tak ty ma budes ucit robit s gridmi a podobnymi vecami a ja teba odsadzovat kody a pouzivat funkcie spravne a nebudu ziadne Indention errory 😀 no ved ja viem, ved ja zahranicne clanky citam od rana do vecera aj knihy a vsetko 🙂

          • Martin Maričák

            Sounds like a deal. 😀

  • tom

    super článok

  • Super! 🙂 Tie moje kritické komentáre asi mali zmysel. Pekný, stručný a jasný článok. 🙂