Workbook - 10/1 - Kategori-sidor.

¨

 Jag spar bitar av den tidigare sidan och fortsätt vidare framåt.

  Jag börjar känna ett väldigt driv inför även den kodmässiga delen av webbutveckling. Många saker är otydliga och jag behöver ställa en hel del frågor men det är (mestadels) väldigt stimulerande.

  Lustigt nog är denna webb-process en aning abstrakt, jag har designat och konceptat hemsidan men jobbar med en webbutvecklare vid sidan. Bror min hjälper mig med tips och vägledning om hur sidan skall framställas i praktiken, men det är fortfarande jag som skriver all kod.

  Så sammanfattningsvis går detta emot Dreamscapes synopsis inom ämnet där den grafiker som är inblandad mer eller mindre "lämnar in" sitt arbete för kodning. Tänk framkalla film på ett filmlabb.

  Personligen föredrar jag den nuvarande processen eller alternativt att framställa sidan vid sidan av en utvecklare.

I Css-dokumentet ger jag de olika elementen färgade bakgrunds-lådor för att se hur koden artar sig.

Med hjälp av "Float-left" och "float-right", ger mig möjlighet att ha bilder och text sida vid sida.

Mitt sommarstuderande inom ämnet betalar av sig.

Jag har aldrig kommit så här långt i mitt hemside-konceptande tidigare.

Workbook - 9/1 - Framsteg & Motivation!

Peppen börjar komma igång!

  Hemside-skapandet börjar känns riktigt motiverande nu. Tidigare dagars ångest, över de luckor som jag har inom mina kunskaper i ämnet, har bit för bit börjat bytas ut mot värmande tilltro till att det kommer lösa sig.

  Mycket tack vare min brors hjälp, webbutvecklare som han är. En vidare intressant punkt är hans mindre förvåning över att jag engagerar mig i denna del av processen.

  Jag uppskattar inte att vara beroende av andra och jag vill göra saker så rätt jag bara kan.

Bildgalleri: steg 1.

Måttande och avstånd är viktigt inom webb.

Spalter, så lätt att applicera. (Om du inte har Internet Explorer).

  Att det skulle vara så lätt att göra spalt-indelningar inom webb trodde jag inte, det vill säga så länge som man undviker webbrowsern Internet explorer.

  Ett annat råd som min bror var att helt enkelt få upp någonting alls och sluta tänka på detaljer, designval och koncept in i det sista. Så just nu försöker jag komma så långt som jag bara kan så jag (förhoppningsvis) kan fortsätta självständigt i min ensamhet i Blekinge.

Lite luft till höger, kanske?

Ett citat texten, med eller utan en länk, känns rätt.

Workbook - 7/1 - Intervju med Bengt Hammari från Winston & Kodandet påbörjas.

Snabba ryck och håll fokus.

  Precis som Pirjo sa så var det värt att vänta och hålla ut och ha lite tålamod på intervju-fronten. Som en försenad julklapp väntade två mail från personer som gärna ville bli intervjuade. Jag gjorde omedelbart en snabb tankekarta med vad det var jag ville få ut av intervjuerna.

  Intervju med Bengt Hammari, Designer på Winston:

  1. Att vara grafiker och hålla på med webb känns ibland som lite som att titta genom en fönsterruta till en annan värld, då jag i regel alltid är beroende av andra för att skapa hemsidan i praktiken. Frågan är: hur viktigt är det för en webbdesigner att kunna koda? Är det en, mycket stor, fjäder i hatten eller ses det som en självklarhet i dagens läge?

  Bengt: På Winston så gör aldrig en designer "kodandet" utan det är specifika kompetenser som vi kallar "gränssnittsuvecklare/front-end-utvecklare" som gör det.

När vi anställer designers så efterfrågas aldrig kod-kompetens men det är bra och viktigt att veta hur en sida byggs upp av kod och hur det fungerar.

2. I de tillfällen som jag arbetat med webb så har jag både jobbat sida vid sida med utvecklare under hela arbetet samt varit med om tillfällen då designerna och utvecklarna haft stora avstånd emellan sig. Är avstånd och dålig kommunikation ett problem inom webbdesign?

  Bengt: Slutresultatet blir mycket bättre och arbetet effektivare om man kan ha ett nära samarbete med utvecklare. En utvecklare kan och bör bidra med sin kompetens till lösningen och designen. En bra kommunikation förenklar arbetet avsevärt.

3. Jag studerade nyligen en lista över bra saker för att bli en webbdesigner. Bland annat stod där att man inte skulle anta att en Grafisk Formgivare självklart var en Webbdesigner. Vad anser ni om detta och hur skiljer sig i så fall de bägge rollerna?

  Bengt: Det beror lite på vad du lägger i titeln "Grafiskt formgivare", men visst krävs det kännedom om mediet för att göra en bra designlösning. En webbdesigner har fler parametrar att förhålla sig till, till exempel interaktion/interaktivitet, tekniska förutsättningar, användarbeteende m.m.

4. Hur kan arbetsprocessen se ut för en webbdesigner, inom arbetet med färg form och layout?

  Bengt:Det varierar väldigt beroende på projekt. Men väldigt kortfattat:

På Winston påbörjas ofta arbetet med en förstudie-/analysfas som fastställer mål, syften och behov. Utifrån det går vi in i en konceptfas där en interaktionsdesigner och en formgivare/AD tar fram övergripande lösningsförslag i samråd med utvecklare.

Efter konceptfasen så börjar vi med designarbetet då vi ser mer till detaljer och gör ut sidtyper och element. Till en start helt i svart-vitt /wireframes som övergår i designskisser och html-prototyper.

En designer är ofta med i analys-, koncept- och designfasen.

Här kan du läsa mer om hur vår designprocess ser ut:

http://www.winston.se/vart-satt-att-jobba

5. Vilken är, i er åsikt, den viktigaste kunskapen för att få arbete inom webbdesign?

  Bengt:Utöver bas-kunskaper så är förståelse och kunskap om det aktuella uppdraget väldigt viktigt. Kunskap om kunden, dess verksamhet/bransch och deras kunder. Även att man har god förståelse för användbarhet. För att få en anställning krävs det att man är formstark, har en bra portfolio: typografi, layout, färg-/bildval etc.

---

  Denna intervju gav mig betydligt mera kött på benen och känslan av att det man gör kan leda till något större känns i det närmaste förstärkt.

  Vidare så har jag påbörjat kodandet av hemsidan, vilket i nuläget även detta känns som en mockup. Mina kod-kunskaper är i de närmaste rostiga, men det är härligt när det faktiskt fungerar.

Det var ett tag sen sist och det känns.

...Det tar tid att lära nya saker, men man ska ju testa nya grejer sägs det.

Workbook - 4/1 - Alignment och grids.

Sidan känns inte riktigt logisk, vänsterställande av huvudmenyn gör saken lite bättre.

  Någonstans mellan teorin i "Webbdesigners idéa book":s fokus på repetition samt så kallat alignment och tidigare nämnda fröken Amber Weinbergs uttalanden om att logotyper ska vara till vänster började jag med att försöka skapa lite mera sammanhängande struktur i min hemsida.

  Vidare så minns jag hur mina tidigare föreläsare ifrån Södra Esplandens bägge Art directors ofta talade om hur man med hjälp av  tomma ytor kan skapa luft och andrum i sin design.

Lite luft kan göra en hel del...

  Det börjar kännas betydligt mera stabilt i mitt designande på något underligt sätt. Under sommaren arbetade jag med att försöka lära mig HTML och samtidigt designa min portfolio. Jag har svårt att vara bitter över att stora delar av de arbetet inte kom fram till mål, för är det något som jag lärt mig är att bra saker (med all rätt) tar tid.

  Beträffande detta mönster av små bollar så påbörjades det, projektet från tryckeri-kursen förra året. Vi  hade i uppgift att skapa visitkort och jag trodde verkligen att jag slösade min tid. Inget jag gjorde kändes rätt och jag verkade vara den ende som hade i baktanke att detta visitkort som skulle skapas var en metafor för mig själv, vad jag gör och vad jag kan.

  Jag ville att kortet skulle vara en liknelse för vad jag vill ("en djupis" kallade en föreläsare mig för) och det är att lyckas. Vidare så köpte jag en domän med mitt eget efternamn och jag tänkte att det var ett bra och radikalt grepp att sammanfoga dem.

Detta är avståndet som de två spalterna för text har.

  Mönstret blev inte som jag tänkt mig, inte korten heller och min idé att kortet skulle ha en egen form gick verkligen åt pipan. Hela historien lämnade mig väldigt tom och en aning förvirrad, vad hade jag egentligen gjort med min tid?

  Att jag senare skulle komma att styra upp min logotyp, korten är fortfarande up-to-date (samt ganska originella ändå) och att de små prickarna börjar kännas riktigt hemma nu var ingenting jag hade förstånd att se där och då...

Skissande är det bästa sättet att få ut de där gnagande idéerna...

...Men webbkursen lärde mig att en mockup i Indesign krävs för att folk ska hänga med.

Bth-careercenter

"Nu blev det faktiskt ganska töntigt..." tänkte jag. 

...Vänsterställande av välkomnandet kanske?

Tillbaka till höger, med ikoner underför sociala medier..!

Denna färg känns besynnerligt hemma för mig.

Första skisser på Sociala medier och dylikts-ikoner

Workbook - 3/1 - Riktigt bra & lärorika hemsidor.

En riktigt bra hemsida, med riktlinjer för hur en webbdesigner kan arbeta.

  Dagen påbörjandes strålande med givande feedback från min handledare Pirjo som gav givande feedback på min workbook. Det är uppenbart att behöver förtydliga mig en aning och leta lite mera research inom området.

  Bland annat tog upp behovet av att förtydliga skillnaderna mellan en webbdesigner och en webbutvecklare. Jag har arbetat sida vid sida med webbutvecklare från Blekinge tekniska högskola och det jag kan säga är att deras kunskaper i både back-end och front-end programmering vida överstiger mina, för att inte tala om PHP. Överlag ska det dock pointeras ut att deras kunskaper inom det grafiska förefaller en aning begränsade.

  Intressant nog finner jag den bästa forskningen och informationen på nätet med hjälp av google. Självklart lyssnar jag inte till vem eller vad som helst, men webben förändras konstant och webbdesigners roll med den.

  På webdesign.tutsplus.com, fann jag en riktigt bra lista på 12 tips som en Webbdesigner bör veta. Bortsett från många saker som jag redan visste eller anade, som till exempel behovet av social kompetens och värdet av att kunna sälja in sig fann jag ett antal mycket bra och bekräftade tips.

  Så glad den inre struktur-krävande lilla kritikern i mig blir! Detta tips summeras till totalt tre punkter:

1. Researching about the client’s company
2. Asking the client what he wants and expects from the web
3. Pondering upon what his competitors are doing and the related industry trends

   Forskning, baktanke, behov, benchmarks och hur detta bäst kan representeras på ett företags hemsida.

"It is a general misconception that graphic designers, owing to their computer graphics skills, can also be web designers and vice versa. While this might be true in theory, there are very few professionals that bridge the gap between print-based projects and web-based projects on a regular basis.

The reality is that web designing is a completely separate field of designing, having its own flare and expertise. These are two different mediums and so the target audience and objectives of a websites are entirely different from a piece of graphic design. There is always the possibility that a graphic designers advances to the level of a web designer once he learns certain technical skills, but it’s important not to assume that a rockstar graphic designer will instantly be successful when designing for the web. For the success of your web business, you should commit yourself to the field of web designing and specialize yourself in it."-Arfa Mirza 

  Detta sammanfattar min känsla för detta område, från den första webbkurs som vi hade under det andra året på BTH till idag. Att vara grafisk formgivare är inte nödvändigtvis detsamma som att vara en webbdesigner. Självklart kan en grafiker bli en webbdesigner och tvärtom, men man ska aldrig ta förgivet att man inte behöver lära sig ett och annat om hur området faktiskt fungerar för att kunna göra ett
riktigt bra jobb. 

  "If we divide the success factors of a web designer, web designing soft skills may be one of the most important ones. As mentioned earlier, the field of web designing keeps updating at a fast pace. Every other day there is a new technique being introduced. Even if you aren’t the one programming these new tricks, a successful designer needs to learn and 

understand how to apply these techniques well.

Apart from other core design skills, it’s important to have full grasp on subjects like, the most modern HTML coding, high quality CSS for best cross browser compatibility, smart basic search engine optimization practices, Javascript UI techniques, and to build a foundational site in that you can add more pages or content with the passage of time. Having even just a general understanding of these multiple skill-sets will certainly land you a good job
 or better clients."-Arfa Mirza 

    Så behovet av att kunna koda är i Mirzas ögon rent uppenbart. Jag håller med, det är mycket svårt att visualisera något realistiskt om man inte ens vet hur det fungerar "under huven". Det sagt så känns jag att jag har lång väg att gå inom kodandet men det är bättre att försöka än att anse att man inte bör eller är för fin för att ge sig i kast med något.

  Fokus här är på att ha en uppdaterad och tidsenlig webb-baserad portfolio, vilket är logiskt med tanke på att hemsidor från runt år 1999 knappast är något att hurra för idag. Webben är ett levande väsen och den förändras varje dag och vi bör förändras med den för att hänga med.

  Det jag kan relatera detta till är mitt framställande av min egen portfolio som jag önskar ska ha en koppling till mina framtida jobb-ansökningar. Då med snarlik design, typografi och form. En länk i det pdf-dokument som  framtida arbetsgivare fått skickar användaren rakt till min hemsida och det arbeta som jag i rådande text väljer att nominera som motivation till varför jag ska ha jobbet. 

Bra fråga, jag hade gärna kunnat dock.

  Jag valde att hålla fast lite vid frågan om designers inom ämnet verkligen måste kunna koda hemsidor självständigt eller ej. Artikelns författare, Amber Weinberg, refererar till en man som hävdar det är i det närmaste chockerande att det finns människor som kallar sig webbdesigners som inte kan självständigt skapa sina egna hemsidor.

  Hon pitchar behovet av att kunna grundläggande kunskaper inom HTML och CSS, i vilket fall. Detta kan jag nog genomföra, även om det vore härligt att kunna vara helt självständig.

Code is not visual, it’s another language. After working for several years with the 

code, you’ll be able to guess what the website will look like, but you’ll never really 

know until you test it in the browser. To be able to code, not only do you have to anticipate what the browser will do with that code, but you’ll also have to think about validation, semantics and usability. Code is left brain thinking and a lot of web designers can’t wrap their heads around the idea of it.

- Amber Weinberg

  Sen hävdar hon att det klart är möjligt att täcka bägge fält, om man vill det. Hon själv gick en designutbildning men fann att det var koden som lockade henne mest.

  Både ja och nej, enligt Amber är det viktigast att ha koll på hur hemsidor ser ut och fungerar i praktiken.

You should at least know the basics, especially about usability. You should know why there shouldn’t be 50 different link colors, why the nav shouldn’t be at the bottom and why the logo is always to the left. These sort of things will make your websites perform better and will save the sanity of your poor developer. Without this knowledge you’re not a web designer, you’re just a pixel pusher.

- Amber Weinberg

Workbook - 2/1 - Skalenliga Mock-ups

1024 px i bredd är den upplösning som min bror tipsat mig om.

  Ett enormt stort misstag som jag brukar göra när jag arbetar inom webb är att inte göra skalenliga mockups i det jag skapar. Det är allt för lätt att gå smått förlorad i arbetet med de kreativa bitarna när man är rejält lyrisk och uppe i gasen.

  Detta är en ännu en del där det är bra att jag faktiskt gjort, i vilket fall ett försök till, en del hemsidor. Att veta att det är i det närmaste korkat att bygga upp en hemsida på samma sätt som man skulle skapa en häftig grafisk profil eller en bra motion graphics-film.

Gör om! Gör rätt..!

  Intervjuerna förefaller frysa in, troligen till grund av dessa ack så ljuvliga och tidskrävande helger. Dock kör jag på ändå och jag måste läsa lite mer och mot slutet av veckan börja koda fram en wireframe för hemsidan.

  Stora delar av min inspiration bygger på min kärlek till de möjligheter som finns i javascript och framförallt jQuary. Häftigt och inspirerande som det är så anser jag inte att en effekt ska nyttjas för att den subjektivt "häftig" eller (ve och fasa) "stilren".

...Annars är det väldigt svårt att skapa något som ska fungera i praktiken.

  Mitt sätt att designa påminner faktiskt till viss del om många av de Art directors som jag läste om. Jag vill ha syfte och ett genomtänkt koncept när jag arbetar, annars känns det på snudd på meningslöst. Ett exempel på detta är design och webbyrån MarsApril.

Workbook - 1/1 - Mockups på gång.

Mönster i alla dess former intresserar mig.

  Det talas i litteraturen om värdet av repetition och dess värde för att användaren ska känna sig hemma i sidans bekantskap. Bra repetition leder uppenbarligen till att sidan upplevs som lättförstådd, samtidigt som jag kan tänka mig att dålig ditto nog kan framstå som otroligt grå.

  Webbdesign handlar om funktion och inget annat, i min åsikt, är det vackert men oanvändbart har man misslyckats. Detta är nog den som driver mig som allra mest inom denna konst. Utmaningen, syftet och känslan av att andra både ser och använder det man skapat är obeskrivbar.  

Adobe Illustrator är bra, men en aning kantigt i min smak.

"Design that contains repetition becomes unified ... A huge benefit of repetition is predictability. The user will learn to expect certain things if a sites design maintain the key elements in a consistent way."

- Patrick McNeil (Sid 24)

  Indesign, photoshop och illustrator är webbdesigners allra bästa vänner. Lustigt nog kan de alla inte göra allting, utan det bästa sättet jag funnit i mitt arbete är att växla kontinuerligt mellan de olika efter behov.

Jag skapar vektorgrafiken i Illustrator, utsmyckar den i Photoshop och mockupp:ar den i Indesign.

En aning mera applicerade av färger gör sitt.

Tydliga kategorier och navigeringsträd känns essentiellt.

Spalter är fräscht och lite av en arbetsskada från min tid på Sydöstran.

En produkt från tio-veckorsprojektet från förra året.

    Typografi på webben är ett kapitel för sig. Alla fonter syns inte på alla plattformar, browsers och operativsystem. De som man i regel satsar på att nytta är de som fungerar på Mac och PC, 

i vilket fall i min erfarenhet. 

  Under förra årets tioveckors-projekt stod jag inför uppgiften att finna vilket utbud som det fanns för vilka typsnitt som skulle kunna fungera utan att kräva så kallad embedding. För att besvara det behovet skapade jag kartor med webbsäkra typsnitt. 

  Inte fel alls att ha workbook, nu har jag en chans att både nyttja och visa mitt arbete från förr.

Visserligen kan man embedda fonter, men en bra grafiker kunna arbeta med vad som finns tillgängligt.