Kategórie →

All posts in Webdizajn

Papierový prehliadač

Wireframe je téma, ktorú som tu ešte nespomínal a pritom sa s ňou trápim pri každom webovom projekte. V tomto som klasik a už vyše desaťročie si stránky kreslím rukou na papier. Dáva mi to viac slobody a priestoru než nejaké softvérové aplikácie.

Wireframe si robím pre vlastnú potrebu ale aj zorientovanie klienta – často sa mi stane, že na prvom stretnutí kde padajú návrhy ako by si web prestavoval na konci povie „a nemohli by ste mi to aspoň orientačne ukázať?“. Nákres na papieri je lepší ako dva prázdne súbory s príponami CSS a HTML.

Čítaj ďalej →

Online emulátor: Ako by vyzeral váš web na iPad-e

Či niekto chce alebo nie tak iPad je tu a vedie si veľmi dobre. Ak vás zaujíma ako nejaký web vyzerá na tomto zariadení od Apple skúste web iPad Peek. Momentálne je možné stránku zobrazovať pod prehliadačmi Firefox 3.5+, Chromium 5+ a Opera 10.5+.

Web si môžete pozrieť v horizontálnom aj vertikálnom móde, veľkosť stránky je transformovaná pomocou CSS3. Samozrejme treba ignorovať funkčný Flash – ide skôr o proporčný náhľad keďže všetky ostatné prvky záležia od prehliadača (fonty, JS, atď.). Ak by ste mali nápady na vylepšenia môžete si stiahnuť zdrojové kódy cez Git.

Dynamický generátor obrázkov, alebo Lorem Ipsum na grafiku

Lorem Ipsum je stále užitočnou metódou pri tvorbe stránok, nech si každý hovorí čo chce – v navrhovanej šablóne vyzerá oveľa lepšie ako napísané bla bla alebo text text text. Nechcete niečo také aj na obrázky?

Viete, že niekde budete mať obrázok no ešte je zbytočné sa ním zaoberať, no aspoň by ste mu chceli vyhradiť vlastný „chlievik“. Môžete si ho nakresliť alebo naštýlovať nejaký DIV cez CSS alebo použiť generátor dummyimage.com.

Obrázok sa generuje zadaním rozmerov za doménu, čiže http://dummyimage.com/600x450 vygeneruje obrázok s rozmermi 600 x 450 pixlov. Jednoduché a použiteľné – do vašej šablóny alebo projektu totiž môžete odkazovať nasledovne:

< img src="http://dummyimage.com/600x450" alt="tu raz niečo bude" />

Autor plánuje pridať podporu pre rôzne grafické formáty, či zadanie len jedného rozmeru pre vygenerovanie štvorca. Dúfam, že sa mu to podarí – mne sa služba veľmi páči.

Databáza grid based webov pre inšpiráciu

Grid based dizajn netreba nijako prehľadať. Grid vo webdizajne ma svoje čaro – veď väčšinou ide o minimalizmus a tu nieje takmer čo pokaziť. Web Grid-based.com je toho online príkladom.

Na to, že beží len tri mesiace som si ho veľmi obľúbil. Podobných galérii nájdete stovky, ale táto si ma vážne získala. Aj keď sa tu sem tam objaví piata verzia webu na tej istej šablóne, vždy je to iné a zaujímavé. Pokiaľ hľadáte inšpiráciu alebo chcete ukázať svoju prácu Grid-based.com je to správne miesto.

Grid Based Design

Web šablóna typu „táto stránka sa pripravuje“

Nemám to rád, ale tiež to tak mám na niektorých projektoch bohužiaľ poriešené. Robím web, mám víziu jeho spustenia no na ňom sa nachádza len prázdny text typu „stránka sa pripravuje“. Vhodným riešením môže byť “Site Under Construction” Template.

Tá napovie že sa predsa len niečo skutočne deje a záujemca môže byť po spustení informovaný o spustení webu napríklad cez mail – pre lepšie pochopenie si pozrite online demo. CSS a HTML kód je prehľadný, počítadlo a slider je spravený cez jQuery, k dispozícii je aj PSD súbor. Možno si predstavuje niečo iné ale takáto šablóna je skutočne lepšia ako nič, ak si poviete že veď to si spravím aj sam tak verte že nespravíte, lebo sa radšej budete venovať spúšťanému projektu.

This website is under construction

Nástroj, ktorý uľahčuje optimalizáciu pre Internet Explorer

To, že taký Internet Explorer vo verzii šesť je pliaga snáď netreba nijako extra spomínať. Optimalizovať pre IE 6, 7 ale aj 8 nieje najjednouchšia a najpríjemnejšia vec – to určite potvrdí každý webdizajnér. Priamo Microsoft ponúka ako mierne odškodné zaujímavý nástroj na uľahčenie optimalizovaného webu.

Napriek tomu, že Microsoft Expression Web SuperPreview pre Windows Internet Explorer tu už nejaký piatok je má pocit, že sa o ňom málo vie. A to je už vo verzii 3.0. Microsoft Expression Web SuperPreview je odpoveďou na rôzne weby, ktoré vedia robiť screenshoty rôznych prehliadačov na rôznych systémoch alebo aplikácií tretích strán. Tie vedeli vedľa seba nainštalovať viac prehliadačov – príkladom za všetky môže byť nestabilný IETester, ktorý predsa len mal troška odlišné renderovanie výstupu než bola skutočnosť.

Microsoft Expression Web SuperPreview

Čítaj ďalej →

Vyextrahujte si farebné schémy z fotiek

Podobné služby s takouto funkcionalitou sa dajú počítať na stovky. Sem tam sa ale nájde nejaká zaujímavejšia a tou je napríklad aj colorsuckr.com. Jej primárnou úlohou je návrh farebnej schémy z fotografie. Keď som sa pred pár rokmi s takýmto webom stretol po prvý krát prišlo mi to úžasné, že je možné navrhnúť pekný dizajn s fotkou a farby mi sedia. Potom som používal len generátor farieb z fotky a aj keď som zdrojovú fotografiu priamo nepoužil tak dosť to pomohlo pri vymýšľaní farbičiek.

colorsuckr.com môže ako zdroj použiť URL k obrázku alebo zo služby Flickr. Vygenerovaný grid obsahuje 12 farieb s ich vyjadrením ako HEX, RGB ale aj odporúčané „bezpečné“ farby. Výsledky je možné zobraziť aj ako RSS, JSON či XML. Veľkým prínosom je možnosť stiahnuť schému ako Adobe .ASE swatch súbor. Jednoduché a prehľadné – mne sa to páči.

colorsuckr.com

15 profesionálnych HTML+CSS šablón na voľné stiahnutie

Web chocotemplates.com publikoval 15 webových šablón na voľné stiahnutie. Niektoré sú veľmi podarené a profesionálne spravené. Uvoľnené sú pod Creative Commons Attribution 3.0 licenciou. Možno vám niečo padne do oka ;)

Portfolio 3

Portfolio 3

Čítaj ďalej →

20 inšpiratívnych webov na tému: keď je obrázok dominantou

Vo webdizajne mám slabosť pre vektory, správne zvolenú typografiu a jednoduché farby – všetko to sú prvky minimalizmu. Dizajnér sa do toho môže báť zakomponovať bitmapový obrázok a to býva chyba. Prinášam niekoľko ukážok toho, že vhodne zvolená fotografia (najčastejšie použitá ako pozadie) a vhodné umiestnenie textu ešte stále môžeme škatuľkovať pod pojmom minimalizmus.

Aj teraz som siahol do otagovaných zásob v mojich záložkách tak ako to bolo pri článku TOP 8 stránok na tému „Čo na stole to na webe“. Webstánky som sa snažil vyberať tak, aby dominujúci bol obrázok, fotografia. Skutočne aby nešlo len o akési „křoví“ ale dominantu. Nehľadajte tu textúry, ani prechody – skôr ukázať to, že veľa dizajnérov aj fotí – prečo sa báť použiť fotografiu? Snáď bude pre vás nasledujúca zbierka inšpiratívna. Samozrejme ďalšie tipy, či vaše práce veľmi rád uvítam v komentároch.

Čítaj ďalej →

Denná dávka dizajnérskej inšpirácie

Počet webov, ktoré denne navštevujem a dalo by sa o nich povedať, že ide o dizajnérske skvosty je už niekoľko desiatok. Pripravujem o nich väčší článok, ale to až niekedy nabudúce. Teraz spomeniem len web The Design Inspiration.

Ten sa z množstva nemu podobných vymyká tým, že prináša dennú dávku z viacerých oblastí, kategórii. Sú tu logá, webstránky, ilustrácie, fotografie ale aj vzory. Určite odporúčam sledovať, no hlavne pridávať aj svoje veci.