Category: Webbdesign

Nu har jag sovit på saken flera nätter och sen återkommit till designutkastet jag gjorde till en framtida ny TopNav. Och flera saker har fått ändrats. Det gav ett lite för grötigt intryck och det känns inte bra.

För att friska upp era minnen så såg det ut såhär förra veckan:

Flera detaljer i denna skiss är så klart bara test, så det är svårt att komma undan denna gröt. Men en del kan göras, och har nu gjorts. Detta är det senaste utkastet, en med “Fler spelguider”-menyn utvecklad och en utan.

Den grå bakgrunden runt bilden på Noctis (och hela bilden med Noctis) är bara platshållare för mig för att jag ska se hur brett jag designar i förhållande till hur bred sajten är idag. Likaså de pixelmått jag lagt nere i högra hörnet.

Den största sak jag tagit tag i nu är “menyn” med sociala media-knappar/länkar. Den gjorde allt grötigt där under Community-menyn (som expanderar vid klick och visar login-formuläret). Den ligger nu till höger på sidan av menyn med alla spelguider. Inte helt perfekt, men i vartfall bättre. Föredrar att kunna ha en beskrivande text till alla ikoner, men det får inte plats nu, men vi får se om jag kommer på nån ny bätte lösning.

Dessutom böt jag plats på länkarna till andra avdelningar på FFU (startsidan med spelnyheter, samt vår FAQ med supportfunktion) och den så kallade “News tickern”. Det känns bättre att ha sajtlänkarna närmare logon, samtidigt får nyhets-tickern en väldigt central placering, och det känns som det funkar mycket bättre än jag trodde först.

Annars så har dessa saker ändrats:

• Sub-titel till FFU är nu skrivet i vitt.
• Länkarna till “Community” och “Guider” är borttagna, möjligt de ska visas till höger om de andra sajtlänkarna när man har väldigt stor skärm.
• Nyhetstickern visar en uppdatering från en av guide-sajterna.
• Ljusare skugga (och svart istället för blå) på “Fler spelguider”-dropdownen, dessutom är den mindre 3D och skuggig.
• I Community-boxen så är all text nu grå och länkar orange, gillade hur det funkade med den mörkgrå bakgrunden.
• Community-boxen är nu lite mörkare, och den övre färgade ramen lite ljusare.
• Mer luft generellt i Community-boxen (som också blivit större).
• Vertikal skiljelinje mellan alla FF-spel och de andra länkarna.
• FFXVI borttaget från spelmenyn, det var ändå bara en test. När det spelet blir aktuellt så får “Bravely Default” och “Chrono Trigger” (allt som inte tillhör grundserien i FF-serien) stryka på foten. Hoppas bygga automatik på detta.

Jag skissar alltid med vanlig blyerts, eller bläckpenna, på helt vanligt papper när jag håller på med webbdesign. Idéer föds på sömnlösa nätter, oftast. De kladdas sen ner på papper, i en oerhörd mängd olika varianter. Där testar jag vad som känns som att det funkar.

Efter mycket skissande över lång tid går jag till Photoshop och börjar sätta upp det hela. Ibland skippas detta steg om det går att designa allt direkt med HTML och CSS istället. I Photoshop så får jag fram saker från skisserna som kanske bara varit med dem som små handskrivna kommentarer – detaljer, färger, med mera. Här märker jag hur saker får plats, luft, och liknande.

Även i Photoshop så går jag över min “skiss”/design flera gånger och gör om saker. Det gäller att inte vara rädd att bara kasta något man inte är helt nöjd med. Bättre det och börja om än att fastna i ett spår som bara är halvbra.

Vår TopNav, navigationsmenyn i topp på alla FFUs sidor med alla FF-spelen, får sig nu en runda. Det blir i så fall den fjärde i ordningen. Här är tre skärmdumpar från designprocessen än så länge. Det återstår så klart flera rundor till. Se hur designen ändras dag för dag.

Det ligger extremt många tankar bakom rätt många av detaljerna i designen. Kanske förklarar mer i en kommande bloggpost. Om inte annat då det börjar närma sig lansering (lång lång väg kvar än, räkna med upp emot ett år).

För 3 dagar sen:

Första rundan i Photoshop. Ett snabbt och litet rörigt upplägg på vad jag hade tänkt få plats med (märkte fort att det blev trångt). Här testar jag också en hel del idéer och känner in om de funkar eller ej. Många såna “försök” tas bort under designprocessen.

För 1 dag sen:

Testar en meny för sociala media och har jobbat lite mer på en förbättrad Community-meny (mer lik mina pappersskisser). Fortfarande inte nöjd. Flera saker känns lite fel.

Idag:

Gjort en pixlad backgrundsbild, som varit tanken ända sen skisserna. Förbättrat och jobbat mer på Community-menyn (alla delar av den: inloggad och utloggad). Dessutom gjort menyn med sociala länkar mindre synlig, men fortfarande inte nöjd med den. Ändra också “nyhets-tickern” mer röd-gul än grön-gul. Pilen ned på vald sajt är mindre spetsig. Och jag började snabbskissa på en dropdown-meny för alla spel som inte får plats i den horisontella menyn … inte direkt nöjd med den heller. Så det blir nog flera ändringar i nästa rundan.

Då jag för lite över två år sedan flyttat färdigt FF7-sajten till vår nya design och nya system så var jag inte helt nöjd med alla sidor. Många sidor hade fått flera förbättringar, men en perfektionist blir aldrig nöjd. Speciellt våra sidor med gamla listor såg väldigt gamla och tråkiga ut, stela. Samtidigt är det lite utmattande jobbigt att sitta i timme efter timme och bara ändra små små saker i texter. Man tröttnar, och man vill bara lansera sajten och gå vidare.

Så jag lanserade sajten. Och istället så har jag lite då och då efter det jobbat med dessa förbättringar. Ett exempel är vår långa sida med information om allas vapen. Där har egentligen allas vapen bara listats i en lång lång lista (lite dumt ja). Nummer ett så är denna lista extremt tråkig. Sen så får inte allt plats, det är sneda linjer, text försvinner, etc. Se nedan.

Så det jag gjorde var att pröva göra om en sådan tråkig lista till en mer modern tabell med lite bättre struktur och ordning. Det fick bli Clouds vapenlista jag gjorde om. Men det var så tidskrävande (men mest sjukt tråkigt och enformigt jobb) att jag nöjde mig med den. Listan för Clouds vapen såg så ut som detta:

Detta var till lanseringen. Jag var inte helt säker på om jag ville göra om alla listor till att se ut som den för Cloud. Så jag väntade. Till nu. Flera andra uppdateringar på sajten ledde mig till att komma på en ny idé på upplägg, lite mer som Materia-sidorna där varje materia får sin egen stora rubrik (som kan sökas på mycket lättare) samtidigt som viktig info som “Vart hittar jag detta vapen” får mer fokus och mer plats. I en tabell så har man extremt begränsat med plats att jobba på. Så det ledde mig till att pröva detta upplägg, denna gång på Red XIIIs vapenlista.

Vad tror ni? Känns Reds upplägg som det bästa? Mer plats för information om vart man köper vapnet, vad det kostar, och framförallt – hur hittar jag detta vapen? Fördelen med en tabell är helt klart att du får överblick på en sekund, men du får väldigt tunt med info. Skulle vi gå för att göra om alla listor till Reds upplägg så skulle nog hela vapen-sidan behöva styckas upp så att alla karaktärer får sin egen undersida, för bättre ordning och för att slippa en sju mil lång sida med text.

Theme 1.5 får nya små förbättringar kontinuerligt. En ganska stor (men osynlig) förbättring jag precis rullat ut är en helt ny meny.

Till vänster på alla sidor har vi en blå fin meny med en liten gradient på, samt vita ramar. Precis som menyerna brukar se ut i Final Fantasy-spelen. För två år sedan då detta theme designades så var stödet för att göra sådana saker (gradienter och skuggor) med CSS inte så bra. Men nu är stödet över 90% av alla webbläsare (inklusive mobil).

Så det jag har gjort är att istället för att ha fullt med extra “div”-taggar i koden, och flera olika bakgrundsbilder till menyn, så är nu koden omskriven till att enbart använda CSS till de fina menyerna. Dessutom kan nu menyerna ha fri höjd, förut var de tvungna att alltid vara minst 180 pixlar höga (pga hur allt var satt upp). Nu kan vi ha en meny med bara en enda länk utan att det är ett jättestort tomrum i botten.

Som en liten bonus så la jag också in så att denna design fick vara kvar på menyerna också på mobil. Tyckte det såg lite trevligare ut än att bara ha den där stora mörkblå bakgrunden med vita länkar på.

HTML5 + CSS3 for the win!

Bild från gamla Paint Shop Pro-mallen

På FFUs nyhetssajt har vi något jag kallar för en fokusbild – “Fokus”. Denna skulle jag nu för första gången på många många år uppdatera genom att lägga in en ny bild där. För de flesta tillfällen (men tyvärr inte alla) av sånt här skapade jag mallar i Paint Shop Pro då jag designade sajten. Men jag har inte kvar det programmet längre utan använder uteslutande Photoshop. Så jag fick inte upp den filen som jag använt tidigare. Efter lite Googlande så testade jag lite olika program för att konvertera denna gamla fil (och flera andra), men de funkade inte.

Så det var bara att bita i det sura äpplet och designa allt från början igen. Samma fick jag göra med TopNav då jag skulle ändra i den. Stegen jag genomför är dock rätt identiska.

1. Finn fram måttet på bilden på FFU
2. Skapa en tom fil i Photoshop med detta mått
3. Lägg ett vitt bakgrundslager
4. Lägg en av bilderna från FFU ovanpå den (som eget lager)

Nu börjar det roliga. Efter det får jag steg för steg med effekter och lager återskapa precis det som syns i den platta JPG-bilden. För detta tillfälle var det flera små textsnuttar. De lägger jag då i ett lager över den platta bilden från FFU. Sen ändrar jag på storlekar, färger, och inställningar tills det ser nästan identiskt ut.

Så upprepar jag detta med andra element, så som skuggor, runda hörn, eller överliggande block med färg. På fokusbilderna har vi en bred horisontell vit linje som spelets titel ligger på. Den får jag stega mig igenom “opacity”-inställningen för att hitta rätt nivå. Sen gör jag samma med de tre lodräta svarta linjerna.

Här är det nu dags att skriva in spelets namn. Och där finner jag att fonten som jag använt förut – Long Tall Sally EEN – inte finns installerad på datorn. Jag har använt just den på all annan FFU-grafik, så jag vill helst ha just den. Googling efter andra FF-fonter visar inte helt lika bra resultat. Men jag finner fort min gamla goda font i mina gamla zip-arkiv. Men nu såg jag till att lägga den på ett smartare ställe på datorn =)

Nu börjar det ta sig. Bara en bild av Bravely Default behövs. Och det finner jag så klart lätt. Den lägger jag en “Shape” över, en fyrkant med rundade hörn. Jag Ctrl-klickar på den i lager-menyn för att kopiera rundningen. Sen skapar jag en Mask på bilden från Bravely Default och baserar den på den markering jag nyss gjort. Nu fick jag automatiskt runda hörn på denna bild. Detta underlättar väldigt nästa gång jag ska göra en likadan bild för då droppar jag bara in den i samma lager och får då automatiskt runda perfekta hörn.

Slutresultatet med Photoshop

Sist lite “Inner Glow” med svart ljus så hade jag nu en mall i Photoshop som är så gott som identisk med det flera år gamla Paint Shop Pro-originalet.

Nu är jag också duktigare på att spara alla dessa filer som “_TEMPLATE_xxx.psd” i samma mapp som de slutliga filerna sedan ligger. Då hittar jag mallarna mycket lättare.

Sent igår gjorde jag en liten justering på det vi kallar för “TopNav” på FFU. Det är den meny högst upp på alla våra sidor som länkar till alla våra spelsajter, communityn, senaste nyheten, och lite annat smått och gott.

För många herrans år sedan fanns inte TopNav, och efter första lanseringen så är vi nu uppe i en tredje design. Denna design har vi haft – med endast minimala förändringar – i långt över 5 år (jag håller inte ens räkningen). Internt har jag kallat den “TopNav3”.

För många år sedan uppdaterades länklistan med spel, Kingdom Hearts 2 (KH2) tog plats i menyn. Men den länkade direkt till Kingdom Hearts 1-sajten. Väldigt förvirrande. Någon KH2-sajt kom aldrig. Efter några år så störde detta mig bara mer och mer.

Så nu igår tog jag bort KH2-länken och la istället in en inaktiv FFXIV-länk (FF14). Alltså en länk som inte kan klickas på, men den ligger där och syns, och tar plats. Sajten finns inte, den är inte påbörjad, inte ens i min fantasi. Men ett spel i originalserien som faktiskt är släppt hör ju minst sagt hemma i vår meny med FF-spel, eller hur?

Men det är fan inte enkelt med dessa gamla system jag lämnat efter mig. År av uppdateringar, och lite för komplicerad struktur, har gjort sina avtryck. Det underlättar ingenstans att FFU är ett gigantiskt lapptäcke av olika eror av teknik, olika språk, olika kunskap, byggt som tegelstenar försiktigt staplade ovanpå varandra under nu snart 17 års tid.

FFU tuffar och går på två helt olika servrar – en Windows, en UNIX. Dessa servrar snackar tre olika programmeringsspråk – ASP classic och ASP.NET, respektive PHP. Detta är problem ett. Eftersom TopNav inte bara är en länklista utan även utför en massa saker i bakgrunden (bland annat kollar att du är inloggad på Communityn) så måste den programmeras i alla dessa tre språken! Vi har spelsajter på alla av dem nämligen.

Så, då sitter vi med 3 stycken TopNav. Men sakta i backarna, vi borde ju faktiskt ha en till, eftersom varför inte liksom. Vissa av våra spelsajter har så gammal och dålig HTML-kod, vi snackar Tables-styrd design, inte ens HTML 4.1, definitivt inte Strict, och garanterat väldigt väldigt “quirks mode” (när koden är så dålig att webbläsarna får svårt att tolka den). Ja till dessa sajter måste vi ha ytterligare en TopNav-kod.

Sen har vi alla stilmallar (CSS) till detta, det är två olika filer. Med nästan lik kod. En för de riktigt gamla sajterna och en för de nya.

Alla filer är sedan utspridda lite hursomhelst, så man får gräva runt ordentligt för att hitta allt. Jag glömde till exempel i över ett år att Nyhetssajten kör en egen TopNav, så länken till nya FF7-sajten kom aldrig på plats.

En ren mardröm är detta att uppdatera. Först ska man hitta den bakgrundsbild som innehåller de romerska siffrorna för alla spelen. Jaha, på servern ligger två exemplar av denna gif-bild, och en jpg-bild med samma namn. Vad nu då?! Jag ser i CSS-filerna att det är en av gif-bilderna som används, så jag gör ett slag för mitt framtida jags sinnesro och raderar de andra filerna.

Men nu att lägga till ett spel i menyn är inte jättelätt, jag behöver lägga in XIV som en inaktiv länk. Först tänker jag – inga problem, TopNav har redan ett X, ett I, och ett V, så jag kan klippa och klistra. Men de är aktiva, mitt XIV ska vara inaktiv. Allt ser fel ut. Så jag tänker att någonstans måste jag ju ha mitt original, en Photoshop PSD-fil som är mallen till TopNav. Jag letar och letar och letar. Och letar. Ingenstans. Filen finns inte. Så jag får improvisera. Jag gör om gif-bilden till min nya PSD-mall (och döper den noggrant till “TEMPLATE: topnav3.psd”, så som jag satte i system på absolut alla mina filer då nya guidesajterna designades).

Men jag får improvisera stilen på den inaktiva “XIV” lite, jag har ju inte kvar fonten eller något för att generera bokstäverna från grunden, och det hade behövts om jag skulle behålla exakt den stil de hade innan. Jag klipper helt enkelt ut “KH2” ur bilden, och flyttar sen hela högerdelen mer åt höger så att plats lämnas åt mitt “XIV”. Det får plats, och det blir fint. Men nu ser jag att designen på det inaktiva “III” står helt ut. Där råder den gamla designen fortfarande. Så här blir det att klippa ut även den, och sedan genom att klippa och klistra in “I” tre gånger och slå ihop dem så får jag en ny fin länk.

Nu ser allt bra ut. Nu ser allt likt ut. Nu är XIV med i menyn, och designen på de två inaktiva länkarna är likadan, och KH2 är borttaget.

Dessutom störde jag mig på att klickytan på “I” ute på FFU började liksom en bit in i I:et, 3 pixlar in närmare bestämt. Så även detta korrigerade jag, till min egen fröjd.

Men det var väldigt många filer att uppdatera och hålla koll på, och sedan testa. Så det gäller verkligen att ha tungan rätt i mun. Bara dessa små ändringar tog ett par timmar, och då har jag ändå dokumenterat ganska gott för mig själv hur man ska göra. Utan det hade jag nog återigen missat nåt.

Så, verkligen, om jag nångång i framtiden ska designa en ny TopNav, då ska jag lägga mycket krut på att inte behöva uppdatera dess kod på mer än ett ställe (två med stilmallen).