Microsoft Expression Design 4

thumb image

Odlika današnjeg vremena je da smo konstanto spojeni na Internet. Svakodnevno čitamo vijesti na portalima, komuniciramo s prijateljima putem društvenih mreža, koristimo usluge raznih servisa ili jednostavno tražimo slike mačaka koje iz nekog razloga gaje nevjerojatnu ljubav prema cheeseburgerima. Ovaj članak će vas provesti kroz proces dizajniranja web stranice s par uputa i prikaz rada u alatu Expression Design 4.

OD IDEJE DO ZVIJEZDA

Recimo da ste se sjetili fenomenalne ideje, nečega zbog čega ćete sljedeću godinu provesti odmarajući se na Karibima ispijajući koktele. Nakon euforije, pisanja korisničkih scenarija, odabira arhitekture, baze podataka, vrijeme je da napravite nešto konkretno. Prvo što  vam treba je dizajn. Dizajn je ono s čime se korisnici prvo suoče. Većinu njih ne zanima koliko kompleksnih analiza se vrti negdje na serveru da bi se njima omogućili podaci. Njima je bitno da su im ti podaci lijepo servirani.

Ovako su nekad i moje stranice izgledale

ODAKLE POČETI?

Naravno da uvijek možete istog trena otvoriti vaš najdraži grafički alat i entuzijastično dodati veliko zaglavlje koristeći Comic Sans, ali idemo se ipak vratiti na početak. Osobno uvijek volim uzeti prazan papir, olovku i skicirati osnovni izgled moje sljedeće stranice. Brzo je, jednostavno, ne gubite vrijeme na komplicirane grafičke alate, a stabala, budimo zahvalni, još uvijek ima. Dobro, uzmite olovku u ruke i dajte si oduška. Ali, ipak pripazite na par osnovnih stvari.

  • NISMO VIŠE U 90-IMA – koliko god vi voljeli vaše omiljene filtere poput lens flarea, sjena, sjajeva i ostalih, koristite ih tamo gdje je potrebno, a ne na svakom elementu vaše stranice.
  • UPOTREBLJIVOST NA PRVOM MJESTU – korisnik u prvih par sekundi mora saznati o čemu točno govori vaša stranica. Elementima bi trebalo biti lako pristupiti i lako ih razumjeti. Ne želite da vam stranica izgleda nabacano bez ikakvog reda.
  • BOJE I KONTRAST – odaberite paletu boja. Osim ako dizajnirate stranicu za gay pride, ne postoji razlog zašto bi koristili sve dugine boje. Odaberite dvije primarne i jednu sekundarnu boju kao temu vaše stranice. Kontrast je jednako važan kao i odabir boja. Svijetlo-sivim tekstom na bijeloj podlozi ne olakšavate posao vašem korisniku.
  • DIZAJNIRAJTE ZA STRANICU – napravili ste savršen layout i dizajn za neku stranicu. Odlično. Ali nemojte sad taj isti layout koristiti na svakoj stranici koju dizajnirate. Razmislite o čemu govori stranica, koja je njezina publika, koji su njezini ciljevi. Ako vam je cilj skupiti novac, nećete gumb ‘DONIRAJ!’ zakopati negdje u dno kontakt forme.

Sada kada imamo skicu, vrijeme je za odabir grafičkog alata. Izbor je velik. Od besplatnih alata poput GIMP i Paint.NET pa do komercijalnih aplikacija poput Adobe Photoshop, Paint Shop Pro, Corel Photo-Paint. Jedan od novijih konkurenata tržištu je i Microsoftov alat Expression Design 4, pomoću kojega ćemo mi realizirati naš dizajn.

ŠTO JE TOČNO EXPRESSION DESIGN 4?

Microsoft Expression Design 4 dolazi kao dio softverskog paketa Expression Studio 4 i savršen je dodatak alatima poput Expression Blend ili Expression Web. Iako nije obogaćen mnoštvom funkcija za uređivanje rasterskih i vektorskih slika, primarno zbog svoje orijentacije kao alat za dizajn web sučelja, Expression Design sadrži sve što vam treba da od praznog platna dođete do konačnog dizajna vaše web stranice. Novije verzije odlikuju se odličnom podrškom za uvoz dizajn elemenata iz drugih aplikacija poput Adobe Photoshop ili Adobe Illustrator, čime spajamo najbolje od dva svijeta – robusnost naprednijih grafičkih alata s brzinom i jednostavnošću Expression Design-a.

REALIZACIJA

Počinjemo s praznim platnom (canvas). Prvo što nam je na redu je pozadinski elementi i okviri koji će sadržavati sadržaj. U ovom slučaju odlučio sam ići na teksturiranu pozadinu sličnu papiru. Prva mjesta gdje tražim ovakve stvari su stranice tipa CGTextures ili Mayang. Koristeći Pen alat Expression Design-a, u zaglavlje stranice smo dodali blage zrake da nam zaglavlje ne bude previše prazno.

Stranica polako poprima oblik.

Ono što nam sad slijedi je dodavanje sadržaja. Treba nam nekakav logo i navigacijska traka za zaglavlje, sidebar koji će sadržavati neke dodatne informacije poput popratne Windows Phone 7 aplikacije i Facebook dodatka koji korisnicima omogućuje da iz naše stranice likeaju našu Facebook stranicu. Kratka Google pretraga nas dovodi do već postojećeg loga za Student Tech Clubove diljem svijeta, dok na stranicama poput FontSquirrel ili dafont možete pronaći fontove za korištenje. Za navigacijsku traku i neke dodatne elemente odabrali smo besplatni font Museo.

Glavni elementi su tu.

Jedino što nam preostaje je podnožje i mjesto za glavni sadržaj. Glavni dio stranice će biti dinamički i popunjavat će se ovisno o sadržaju, ali ako nekome predstavljamo dizajn, ne škodi dodati nekakve dummy elemente. Ja sam odlučio dodati prikaz vijesti s nekakvim kratkim prikazom i mogućnošću povezivanja s društvenim mrežama. I naš konačan dizajn izgleda ovako.

Gotovo!

Ono što sada preostaje je izrezati elemente, takozvano sliceanje, i poslati ih u Expression Web u kojem iz dizajna lako napravimo kompletnu (X)HTML/CSS stranicu.

KONAC DJELO KRASI

Ovaj članak nije zadirao u detalje, ali napisan je da bi Vam predstavio mogući proces dizajniranja web stranice i njezina realizacija u Microsoftovom alatu Expression Design 4. Iako nije moj primarni alat, moje iskustvo s njim je bilo vrlo ugodno. Brz je, jednostavan za korištenje i ima sve što Vam je potrebno za napraviti podlogu za odličan dizajn.

Pin It