7. 3. 2008 v sekci webdesign:

Redesign FI MUNI

Rok se s rokem sešel a Fakulta informatiky Masarykovy univerzity dostala novou tvář.

V květnu minulého roku mi přišla na soukromý email výzva k účasti na soutěži o redesign webu Fakulty informatiky – stejně tak přišla i několika kolegům z oboru a věřím, že i nemálo čtenářům tohoto blogu.

Požadavky dávaly webdesignerům relativně volné ruce, ale rovněž nebyly nijak zvlášť motivující. Měl jsem tou dobou malou pracovní časovou kapsu, a tak jsem se do návrhu nového webu fakulty pustil.

K výsledku jsem připojil docela dlouhý email, ve kterém jsem doporučoval vzít redesign hezky od analýzy a nezaměřovat se jen na novou tvář fakultního webu. Můj názor byl vyslyšen a na podzim tohoto roku jsme proseděli nad webem fakulty pěkných pár desítek hodin.

Fakulta tak získala nejen novou tvář a dobrých 35 unikátních šablon, ale i podklady pro případný rozvoj webu dále. Některé sekce doposud nebyly implementovány dle návrhu, ale věřím, že to ještě přijde.

Můj hlavní cíl pro redesign byl relativně prostý – dát webu fakulty menu a doplnit jednotlivé stránky motivačními fotografiemi. Web je fluidní a osciluje mezi šířkou 770px a tuším 960px, obsahuje styl pro slabozraké uživatele, označení pro různé typy dokumentů, zvýraznění odkazů pro ovládání klávesnicí, přeskakovací odkazy apod.

Nový design se nemusí líbit každému, doposud máme převážně pozitivní ohlasy. Osobně si myslím, že v případné další fázi úprav fakulta nebude akutně potřebovat designera, ale copywritery, kteří přidají a předělají obsah webu. K designu dodávám, že vznikl nejen na základě mé představy, ale i určitých kompromisů, které bylo třeba udělat.

Redesignem webu fakulty jsem si splnil svůj dlouholetý sen a děkuji představitelům fakulty (hlavně panu docentu Michalu Brandejsovi, se kterým probíhala většina jednání) a Tomovi (JP Consult) za pomoc s jeho bezproblémovou realizací.

Komentáře

1. Jirka
07. 03. 08, 09.02

Uvědomuji si, že tvorba šablon atd. je práce náročná a design představuje samostatnou kapitolu. Právě z hlediska designu výsledek ale rozhodně není obrazem toho, jak by měl web FI MU vypadat. Působí to s prominutím „vyzvraceným“ dojmem nějaké fakulty filosofické, pedagogické či sociálních studií (zde bych ale křivdil!). Samotný unifikovaný vzhled webů fakult MU je rozumným kompromisem (např. http://www.muni.cz/fi).
Drobným detailem pak už je nevhodné umístění samotného políčka vyhledávání…

07. 03. 08, 09.04

Líbí se mi, jednoduché, přehledné, krásně řešené tlačítko „Nahoru“ (to mě opravdu pobavilo). Akorát mi není jasné, proč je česká vlajka barevná a anglická šedá, když mám web česky? Očekával bych to opačně.

07. 03. 08, 09.17

[1] a nějaké argumenty by nebyly? Obecných tvrzení o nevhodnosti kteréhokoliv elementu kteréhokoliv designu si vycucám z rukávu klidně dvacet :-)

4. Jirka
07. 03. 08, 09.31

[3] Omlouvám se, asi jsem nepřesně vyjádřil – nemyslel jsem ani tak nevhodné umístění vyhledávacího pole, ale spíše grafické řešení. Úplně to seká do očí, stejně jako přechod z loga a nadpisu do fotky…
Ale jak jsem napsal – to není design pro FI. Ani by mě snad nenapadlo, že tady může být nějaká Katedra počítačové grafiky a designu a už vůbec ne Ateliér grafického designu a multimédií… Samozřejmě to lze očekávat, že na FI něco takového v dnešní době bude, ale po návštěvě této stránky bych rozhodně zkontroloval jestli jsem opravdu na stránkách FI…

Naopak oceňuji poměrně kvalitně zpracovaný tiskový styl – mimochodem, lehce růžové pozadí obsahu (v Opeře) je záměr? Myslím, že ne. Pak to chce zřejmě nastavit barvu pozadí na bílou.

5. Ukee
07. 03. 08, 10.00

Mně se web líbí, mám je jednu připomínku a to k hlavičce – bez těch lidí, resp. té fotky s tím hrůzným alfa přechodem by to bylo mnohem hezčí … a mám takový nejasný dojem, že tam původně ta fotka vůbec být neměla.

6. Jan Bednarik
07. 03. 08, 10.20

Kdzy si vzpomenu na tech par let stravenych na FI MUNI, tak ten borec na fotce v hlavicce je svym vzrenim typickym studentem teto fakulty. Je to takovy ten pravy AjTak. Jenom teda flanelova kosile by mu lip sedla :). Vsadim se, ze kolem pasu ma jeste ledvinku, ktera ale neni videt.

7. Jindra
07. 03. 08, 10.39

Ta fotka je hrozná (skutečně free-cool-in jako na nějakých humanitních vědách), ale fakultě musím pochválit logo — ten Penroseův trojúhelník s přidanou příčkou, aby z toho bylo F-I, to je moc hezké.

8. zipper
07. 03. 08, 11.49

Práce pěkná, nicméně to ovládání na klávesnici pokulhává. Alespoň u mě se kurzor odmítá hnout z vyhledávání, kde přeskakuje mezi polem pro vyhledávání a tlačítkem hledat. Možná jen nejsem dostatečně zběhlý v ovládání skrze klávesnici :)

9. Mac
07. 03. 08, 11.57

Aha, tak už viem kto je za to zodpovedný :)…

Ale vážne, pretože som nútený používať tento web viac krát za týždeň vždy si pekne zanadávam na jeho neprehľadnosť. Nikdy neviem kde mám čo hľadať. Len letmým pohľadom na titulku vidím 4 oblasti s odkazmi evokujúcimi kvázi navigáciu, ale ktorá je tá správna pre mňa? Musím si čítať každú oblasť pozorne aby som našiel niečo čo práve potrebjem. Veľmi neprirodzené.

Tak napríklad odkaz do IS alebo Fakultná administratíva. Prečo to nieje v hlavnom menu? A keď to tam nenájdem, intuitívne klikám na sekciu Pro studenty a ono to nieje ani tam! Prečo je to niekde až mimo viewportu na hlavnej stránke? Nebolo by lepšie to dať ako je zvykom do pravého horného rohu?

Niesom slabozraký, takže som si neni istý, ale vie si priemerný slabozraký človek predstaviť čo je to „Styl“? Nie každý kóduje css. Myslím že „Zobrazenie pre slabozrakých“ alebo iný popisnejší názov by bol vhodnejší, ale to len tak ako odbčka.

Neviem či je to práve tvoja vina, asi skôr nie, predpokladám že nutná spolupráca s pánom Brandejsom vybrala svoju daň v podobnosti s is.muni.cz a jeho široko ďaleko známej neprehľadnosti a zložitosti aj keď samotný IS o sebe tvrdí opak.

A možno obviňujem nesprávnych, ale v každom prípade ako používateľ niesom spokojný.

10. Nill
07. 03. 08, 12.15

Libi se mi design webu z pohledu cleneni informaci, je to pekne prehledne. Grafika je vcelku nevyrazna, nezaujme ani neurazi. Ale myslim ze pro tento typ webu je to vhodne reseni, i kdyz nejake drobne ozivujici detaily by tomu pomohli. Reseni zahlavi s prechodem se mi moc nelibi.
Cely web dost shazuji pouzite fotografie, ocenuji, ze jsou z vlastni produkce fakulty, bohuzel je videt, ze jsou to vyrezy dokumentacnich fotek z ruznych akci a k profi fotografiim maji hodne daleko.
Obzvlast je to videt na teto strance – http://www.fi.muni.cz/…dex.xhtml.cs – ten typ v zahlavi vypada jak houmles. I ten zaber z prezentace je krizovka – spousta rusivych prvku – tabule sekajici hlavu, topeni, kompozice veskera zadna. Pritom kdyby byl jen detailni zaber na strukturu na obrazovkach mohlo to vypadat zajimave.
Doporucuji pozadat nejakeho studenta s zrcadlovkou a slusnym objektivem, aby cvakl par fotek. Specialne by tem fotkam pomohla mala hloubka ostrosti, ktera vypichne hlavni motiv a v rozmazanem pozadi se utopi rusive prvky pozadi, jako treba prave to topeni. Fotkam by taky pomohl slusny postprocesing, ktery by je barevne a tonalne sladil.

4. Jirka: co vim, tak katedra pocitacove grafiky je zamerena hlavne na algoritmy poc. grafiky. Graficky design bude spis jen podpurny predmet, aby studenti vedeli co design obnasi, kdyz to budou programovat. Videl jsem nejake graf. prace studentu FI muni a s umeleckymi skolami to samozrejme nelze srovnavat.

11. Nill
07. 03. 08, 12.50

Mac: na nasich prispevcich je pekne videt rozdilny pohled navstevnika a studenta zvykleho na stary web. Ale s temi odkazy na IS a podobne mas urcite pravdu, pro studenty jsou klicove. Myslim, ze pekne by se to treba dalo resit paletkou prichycenou k pravemu okraji okna prohlizece, mohli by v ni byt treba jen piktogramy, studentum by to stacilo, dobre by vedeli, co je ktera ikonka zac.

Jo jeste k tem drobnym detailum, co by vylepsili design. Kazda polozka hlavniho menu by mohla byt zvyraznena piktogramem, jako je to treba tady – http://www.csbp.cz/. Taky by pomohlo pouziti nejaka dalsi barvy, ktera by narusila monotoni okrovou.

12. Adam
07. 03. 08, 13.07

Pěkné, pěkné, až na ty hrubky v angličtině.

07. 03. 08, 14.02

[9] Tak napríklad odkaz do IS alebo Fakultná administratíva…

Ano, při redesignu bylo bráno v potaz, že existují alespoň 4 cílové skupiny webu – uchazeči/veřejnost, studenti, učitelé a průmysloví partneři. Tento web je zaměřen primárně na uchazeče a PP, nikoliv na studenty. Nevím, jak ty, ale já náš web používám kvůli úředním hodinám studijního a plánu semestru..

Odkazy by se daly řešit jinak a tohle je jeden z přístupů, třeba Nillovo řešení si dovedu představit taky docela dobře :-)

14. Tomáš
07. 03. 08, 14.39

Mne sa nepáči, že je na CZ doméne primárne anglická verzia (nejaký nový trend?).
Tie vlajky by mali byť logicky naopak (ako to už bolo spomenuté).

07. 03. 08, 14.46

Donedávna jsem si myslel, že tenhle design teprve čeká redesign. Hodně to dělá fotka v záhlaví, je opravdu nepovedená a špatně zakomponovaná.

Namátkově: Sekce „Informace pro uchazeče“ je v menu pojmenovaná „Proč studovat na FI“. Je to i v dalších sekcích, navíc když kliknu na Technické informace, dostanu se v navigaci úplně někam jinam.

File, muselo to dát hodně práce, určitě jste ještě neskončili a budete web dále vylepšovat. Držím palce, ať jsou uživatelé spokojení, orientovaní a vždy najdou to, co hledají.

07. 03. 08, 14.49

[15] Web je v tuto chvíli plně v rukou fakulty a já již nad ním nemám žádnou pravomoc – což jsem z pohledu implementace ani nikdy moc neměl..

17. Mac
07. 03. 08, 14.55

[13] Áno, to že web nieje moc zameraný pre študentov je bohužial vidieť a je to škoda, toho obsahu pre nás je tam málo :(. Najčastejšie ho používam keď potrebujem vedieť koľko je ľudí v bufete aby som nemusel stáť vo fronte…

[10] Je to Katedra počítačovej grafiky a DESIGNU. Na fakulte je ateliér Grafického designu a multimédií a odbor Aplikovaná informatika má špecializáciu aj Grafický Design ⇒ Nieje to iba podporný predmet…

18. Dan
07. 03. 08, 15.03

Ad ta fotka v zahlavi … kdo je ten treti nestastnik uplne vlevo? :-) fotka na hlavni strance i na podstrankach pusobi rusive, usekane hlavy o vyhledavaci box tomu nepridaji, jinak je samotny web prehledny.

19. ady
07. 03. 08, 16.29

10 Toho homelesse ze zahlavi mas tady href=„http://is.muni.cz/lide/?fakulta=1431;kod=M1160;uco=1337“ rel=„nofollow“>http://is.muni.cz/lide/?fakulta=1431;kod=M1160;uco=1337

20. Nill
07. 03. 08, 17.01

Mac: cílem oboru počítačová grafika je čistě vývoj grafického SW – http://www.fi.muni.cz/…rafika.xhtml .
V případě specializace grafický design cíl asi není jasný ani vedení školy – http://www.fi.muni.cz/…plinfo.xhtml. Je fakt že se tam kromě počítačového generování obrazu učí i tvorba loga a tiskovin, otázkou je cíl studia. Nechce se mi věřit, že by z absolventů měli být grafičtí designéři. Nejspíš to je nějaká šílená kombinace, kdy absolventi neumí ani IT ani grafiku :).

21. Kalmir
07. 03. 08, 18.17

Když jsme u *.muni.cz redesignů, čerstvě jím prošla také FSS – <a>fss.muni.cz, a myslím, že veskrze zdařile: možnost přepnout mezi fixním a fluidním layoutem, velikostí písma/kontrastem (všechny „customizační“ nastavení jsou decentně a přitom viditelně umístěny do pravého horního rohu), atd. Osobně mi u takových „informačních nádržích“, jakými fakultní stránky bývají, vyhovuje už na první stránce možnost jedním klikem (bez přemýšlení nad sekcemi) zaplout hlouběji do stuktury webu. Prostě dobrá práce. Nevím ovšem, komu poklona patří…

22. Nidzo
07. 03. 08, 19.46

Design se mi až na pár drobností (které jsou otázkou vkusu) líbí, jedinou výtku bych měl u menu – při šipce doprava očekávám, že po najetí se mi rozbalí JS menu, a rozhodně bych tedy nečekal, že se musí kliknout a menu se rozbalí pod aktuální položku. Já vím, je to drobnost, ale přitom by stačilo šipku rovnou nasměrovat směrem dolů a měl bych jasno. :)

23. Katulus
08. 03. 08, 21.44

[14] Primarni verze zalezi na nastaveni tveho prohlizece. Me v Opere [en] skace anglicka a v IE [cz] skace ceska.

Jinak design se mi celkem libi, neni preplacany a prijemne se na nej diva. Kamenem urazu je obrovske mnozstvi informaci, ktere se na stranku museji vejit. Najit potom neco trva trochu dele. Celkove ale hodnotim pozitivne. Uz aby nekdo udelal redesign http://www.fit.vutbr.cz. File? :-)

09. 03. 08, 19.09

Hezké, mě se to líbí, ovšem až na tu fotku v hlavičce. Ta se tam pravděpodobně dostala nějakým omylem a je tam bohužel dost nešťastně zakomponovaná. Když ji porovnám s horní částí samotnou, tak si troufám tvrdit, že to původně nebyl tvůj záměr aby tam byla :-)

09. 03. 08, 20.06

Musím se bohužel přidat k některým, grafika mi na FI přijde trošku moc jemná, měkká, málo technická.

Fotka v hlavičce moc nenaplňuje představu „motivační fotografie“. Díky, nechci :)

11. 03. 08, 18.11

Dnes jsem shodou náhod na faveup.com objevil tuto prezentaci kanadské školy: http://www.trentu.ca/takeatour/ – jen pro inspiraci, jak školy v zahraničí lákají studenty. Třeba někdy při příštím redesignu FI MUNI. =)

27. Pavel Maček
13. 03. 08, 23.46

Myslím si, že se web po stránce struktury a přehlednosti povedl, některé informace se mi zdají až přespříliš prosazované (kontaktů není nikdy dost, že ;) ) a v některých případech se mi zdá členění webu až přílišné, vyúsťující v občasnou nepřehlednost.Hlavička mi nyní připadne trochu nešťastná a vím, že to není jen tvou vinou. Také nerozumím výběru a zpracovaní ilustračních fotografií, schopné fotografy a techniku na FI máme, ať už jsou názory zvenčí jakékoliv. Celkově si ale myslím, že se redesign povedl, i když řešení hlavičky a barev se mi více líbilo u tvého prvního návrhu Honzo, který byl součástí prvotního tendru.

28. Pavel Maček
13. 03. 08, 23.48

A myslím si, že by bylo dobré, kdybys dal na svém blogu možnost editace komentářů, nemusel bych se styďet za svůj pravopis :)