I juni 2010 webdesign; rtx.dk
gra fisk de si gn
0
1
2
Kunden + projektet
rolle + ansvar
tekniske specifikationer
RTX Telecom er foretrukken partner til de store virksomheder, industri-, og forbrugerorienterede OEM’er, fokuseret på udvikling og produktion af avancerede trådløse løsninger. RTX Telecom blev etableret i 1993. Selskabet har ca. 160 medarbejdere, med hovedkvarter i Danmark og faciliteter i Kina og USA. Siden juni 2000 har selskabets aktier været noteret på NASDAQ OMX Københavns Fondsbørs. RTX Telecom har med succes gennemført mere end 700 trådløse projekter.
Jeg er designer af det nye www.rtx.dk og med fra fase 1 med henblik på koncept, ia og design af website. Vi er en kreativ gruppe som udvikler konceptet i tæt samarbejde med kunden og den tekninske leverandør. Jeg er ansvarlig for den kreative proces, men bruger andre webdesignere som sparringspartnere for, at få den bedste løsning. Jeg vil gennemgå webprocessen med fokus på min rolle under projektet.
3
Format : 1024 x 768 px. Grid: 940 px bredt. Moduler: 12 rækker, 4 kolonner. Farverum: RGB. Farveprofil: sRGB IEC61966-2.1. Billedopløsning: 72 ppi. Version: html xmlns. Understøtter: jQuery, javascript. Optimeret til: Firefox 3.0, Explorer 7+, Safari + Chrome. CMS: Dynamicweb. http:// www.rtx.dk.
3
bysteds 3 trins webproces i forbindelse med digitale udviklingsprojekter FORLØB TID 1
RESEARCH 1
STRATEGI + KONCEPT 2
BETA
PROTOTYPE
LIVE
STRUKTUR + IA 2
DESIGN 3 3
IMPLEMENTERING
INDHOLD + DRIFT
TEST
TEST
TEST
4
5
6
research + strategi + koncept
struktur + ia + design
implementering + indhold + drif t
RESEARCH + ANALYSE
STRUKTUR
teknisk implementering
Værdier, organisation, kontekst, indhold, brugere, teknisk afklaring og analyse + benchmark.
Informationsarkitektur, usability, konceptudfoldelse, interaktion, taksonomi + logik.
Frontend HTML, CSS, javascript, flash, backend etablering, cms-opsætning + datahåndtering.
STRATEGI + GRUNDKONCEPT
grafisk DESIGN (IA)
INDHOLDSPRODUKTION & DRIFT
Målsætning og indholsstrategi + succeskriterier og grundkoncept.
Visualisering af strategi og brandværdier, typografi, form, farve + animation.
Indholds og- indlæggelsesproduktion, undervisning, driftsplan, evaluering + videreudvikling.
MÅL MED FASE 1
MÅL MED FASE 2
MÅL MED FASE 3
Endelig strategi + grundkoncept.
Endelig design og prototype.
Live website.
fase 1 beskrevet
fase 2 beskrevet
Fase 3 beskrevet
1.
1.
1.
2. 3.
Vi skal have viden og kendskab nok til, at kunne definere en klar og entydig målsætning med projektet. Hvad er succeskriterierne og hvilken strategi følger vi for, at kunne opfylde dem? Hvem er interessenterne, og hvilken betydning har sitet for dem?
2. 3.
Vi etablerer struktur og arkitektur, der understøtter strategien. Design og visualisering via interaktive prototyper af IA, navigationsdesign, usability + brugeroplevelse. Sideløbende test og raffinering for, at sikre optimal og kreativ gennemførelse af vedtaget strategi.
2. 3. 4.
Etablering af frontend (HTML, CSS, javascript mm) samt backend (CMS, database, XML framework mm). Produktion af indhold : tekster, foto + grafik. Overlevering af løsningen og undervisning af modtagere i brug af løsningen i dagligdagen. Evaluering, plan for vedligeholdelse + videreudvikling.
Facit af Fase 1
Facit af Fase 2
Facit af Fase 3
Webstrategi og konceptbeskrivelse.
Færdigudviklet IA og designspecifikation.
Lanceret website.
4
moodboard
RGB 225 230 250
RGB 171 200 226
RGB 196 215 237
5
RGB 55 93 129
RGB 24 49 82
Helvetica The quick brown fox jumps over the lazy dog. FoundryMonoline ExtraBold
FoundryMonoline Regular 7
8
9
fase 1
fase 2
fase 3
I fase 1 har vi design/koncept-workshop med RTX, hvor design, stil og funktionalitet diskuteres ift. implementering i Dynamicweb. Jeg har fundet en masse websites som repræsenterer forskellige stilretninger og strukturer. Alle involverede skal rate de forskellige websites efter brug af typografi, billeder, overskuelighed og samlet udtryk.
Vi afholder interne møder for, at fastlægge koncept og IA og udarbejder en SWOT-analyse for brug af Dynamicweb. Dynamicweb installationen som bruges på RTX.dk er standard og skin og menu er nem og intuitiv at rette i backend.
I fase 3 tilpasser jeg det godkendte design. Jeg laver en pixelpræcis opstregning til udviklerne, som skal kode sitet. Jeg gennemgår siderne mht. fontbrug og størrelser, så vi ender med så få varianter som muligt til navigation, rubrikker, manchetter og brødtekst mm. Til sidst skal der være styr på endelig placering af ikoner for print/sitemap, samt "søg" i topmenuen skal optimeres.
På workshoppen taler vi også om målgruppe, flow og sidestruktur. Vi redegør også for de tekniske spørgsmål. Under hele forløbet bruger vi BaseCamp – et online værktøj hvor alle involverede har en konto. Det giver samlingspunkt for al information og videre udvikling i processen. Vi ligger strategien, grundet et fælles udgangspunkt. Følgende skal jeg vise design på til fase 2: 1. Forside. 2. Sektionsforside (Corporate og 3 Business Units). 3. BU underside, fx produktoversigt. 4. Præsentationsside af koncernledelse, nyheder + presse. 5. Nyhedsbrev (redesign). 6. HR-side med personprofiler. 7. Roadmap.
Jeg laver tre stilretninger af design udfra første workshop. De vigtigste overvejelser er målgruppe, opbygning af grid, brug af special fonte, skalering af billeder samt implementering af identitet. Sitet opbygges i deck, hvilket betyder, at RTX kan opbygge sitet efter behov, dog med forbehold. Jeg benytter Adobe.Kuler.com til at lave farveunivers, hvor udgangspunkt er den blå logofarve. Jeg designer websitet i Fireworks for, at kunden løbende kan se interaktion og taksonomi i en browser. Billedkoncept, skal vise topbilleder af mennesker i brugersituationer. iPhone-eksemplet skal kun vise produkter sammen med tekster og slagkraftige punchlines. De fleste billeder på sitet bliver brugergenereret, hvilket jeg ikke kommer til at have stor indflydelse på.
6
For at konvertere FoundryMonoline til sitet bruges en online applikation hostet af Font Squirrel. App'en leverer fonte i 4 forskellige formater, som bruges af forskelllige browsere. For at vise fonten på sitet bliver de sat ind i css med parameteren @font-face. I slutprocessen sidder jeg et par dage hos Dynamicweb og følger udvikling af kodningen og tager evt. fejl i opløbet. RTX får undervisning i brug af CMS og designet gennemgår vi rent teknisk – billedopløsning, tags og nye RGB-farver mm.
udvikling af design for index.
4
rtx før.
7
wireframes.
8
1. layout.
8
2. layout.
7
udvikling af design for første underside.
4
rtx før.
7
wireframes.
8
1. layout.
8
2. layout.
8
godkendt design tilpasset grid / rtx.dk i dag + udsnit af teknisk implementering i dreamweaver. 9
9
9
9