Category: Webbdesign

Vi sover inte, vi jobbar

2020-05-29 / Bobby

Nej då vi har inte somnat sedan sist. Vi jobbar vidare för fullt. Det som varit fokus i hela 2019 har varit att skriva färdigt nya FF7-guiden, för första skivan. I samma släng så såg vi behov för fler designelement för att kunna lyfta fram viktig information, Side Quests med mera. Detta skapade vi och har lagt in i vårt guide-theme i början av detta år.

FFU2 v1.7

Nu idag släppte vi samtidigt version 1.7 av vårt guide-theme. Det innehåller mest förbättringar för mobilanvändarna, buggfixar, samt bättre sök, samt stöd för EndNav via vårt plugin.

Vi tog också tag och gjorde några mindre knappt märkbara förbättringar på vår TopNav.

EndNav

FFUs footer/endnav har spretat i sin design väldigt. Varje sida har gjort den på sitt sätt. Du kan tro det varit jobbigt att ändra något i den. Men nu äntligen har vi flyttat den helt in i vårt wordpress-plugin så att de automatiskt läggs till alla våra guider, med kod från endast en källa.

Vi har tre olika footers, den på guidesajterna, den ljusare på guideväljaren (startsidan) samt så alla andra (upp till 10 olika). Alla dessa har ersatts av en av de två varianter vi utvecklat. Vi har en guide-variant, som passar bäst på guiderna, och en ljusare och mindre variant till alla andra sajter. Alla våra sajter som kör i WordPress har nu en av dessa, de andra får leva vidare tills de dör, utan underhåll.

Som bonus förbättrade vi designen på bägge dessa varianterna. De blev luftigare och mer polerade, samtidigt optimerade vi dem så mycket vi kunde genom att ersätta gamla bakgrundsbilder med CSS, eller bara helt enkelt tog det bort. Samtidigt har vi förbättrat väldigt för mobilanvändarna, de har tidigare oftast inte ens sett footern, nu får de den, i responsiv design.

Vi kan också bjuda på flera små enkla men klädsamma animationer, och för att balansera det annars vita och blå FFU: massa starka färger.

Bye Bye Windows (snart…)

Ett av våra största projekt, som hållit på under flera år, är flytten från Windows-servrar till PHP och WordPress. Det återstår just nu bara 4 guider och communityn, och så några sista småsidor med funktioner på www. I dagarna har vi tagit ett stort lyft för att flytta den gamla sidan som listade alla sajterna uppdateringar, den ligger nu på guidernas startsida och kan visa sista ändringarna i ett snyggt format. Man kan antingen se uppdateringar för alla guider, eller via länk från en guide se endast vad som är relevant för den. Trots att de flesta inte kommer behöva den sidan så är den värd en titt, den är riktigt snygg. Ännu en sida från Windows-servrar kan tas bort.

Utvecklingsflyt

Störst grund till att vi lyckas rulla ut så här relativt stora ändringar samtidigt utan märkbart antal buggar är vårt förbättrade arbetssätt på lokal maskin. Vi använder först Local (från Flywheel) som kör WordPress och databas lokalt. På detta sätt kan vi simulera hela FFU i en trygg miljö innan nåt läggs ut. Sen så versionshanterar vi allt genom BitBucket (genom VScode) och när det är dags att lansera något kör vi bara en git pull på servern via SSH och alla ändringar lanseras i en stöt. Tänk att vi jobbade på ett mer manuellt sätt förut … hemsk tanke.

Framtiden

För resten av 2020 planlägger vi att få flytta de där fyra sista sidorna så att det mesta av gammal asp-kod kan tas bort. Vi fantiserar också massor om en helt ny design till guiderna, trots att den utvecklats massor över åren så är den i grund och botten 8 år gammal! Kanske dags för nåt nytt. Men det är ett stort projekt så vi får se.

Nya funktioner till våra guider

2019-09-06 / Bobby

Alla våra guider har idag uppdateras till version 1.6 av vårt egna WordPress theme. Det är inte en helt ny design, men mycket är förbättrat eller nytt. I denna version har vi fått med nästan hundra små (och några stora) förbättringar – synliga och osynliga. Här är de du säkert kommer ha mest glädje av:

Bättre på mobil

Vi har rent generellt jobbat ganska hårt på att FFU ska se snyggare ut på mobil och mindre skärmar. Detta var inte alltid helt optimalt förut, till exempel gick hela guiden in i mobil-läge på relativt stora skärmar, vilket är lite onödigt. Vi har nu fixat och jobbat på detta mer genomtänkt. Vår helt omdesignade mobilmeny är en stor del av detta (mer om den senare)! Dessutom, går du in på våra bildgallerier så kommer du kunna njuta av fullt stöd för att gå mellan bilderna genom att swipa med fingret.

Bättre guide-navigator

Vi har små länkar för att komma till nästa (eller förra) del i guiden. Detta är väldigt praktiskt och uppskattat, men funktionen har saknat det där lilla extra. Nu går vi hårt ut och introducerar en uppdaterad sådan navigator. Vi lyfter fram vad de olika delarna heter, så att du bättre vet vart du är på väg. För att lyfta fram det vanligaste man vill göra när man kommit till botten av en sida så har vi lagt in en stor och tydlig knapp för nästa sida i guiden. En liten detalj som underlättar mycket för den som spelar samtidigt som denne läser våra guider. Självklart är mobilstödet för denna navigator väldigt bra.

Ny mall: innehållsförteckning

Våra guiders guider (wow, kan man säga så? – men jag menar alltså själva FF7-guiden som tar dig genom spelets story) har haft lite bristande översikt på alla de delar/kapitel de består av. Vilken del ska man börja på? Vart hittar jag information om boss X? Vart kan jag läsa om grotta Y? Det ordnar vi genom att helt omarbeta hur vi gör översikten på en guide – möt vår nya innehållsförteckning! Med snygga bilder och tydliga rutor kan man snabbt få sig en översikt av allt innehåll. Bilderna matchar så klart innehållet. Under varje kapitel (vi ska nu pröva kalla detta för “kapitel” mer konsekvent) visas korta “taggar” som representerar allt det stora just detta kapitel tar upp, men utan att spoila för mycket. Du har nu den perfekta översikten direkt på guidens startsida! Just nu är detta bara introducerat på nya FF7-guiden, men kommer till fler guider framöver.

Syskonnavigering

En egen liten navigator för att lätt navigera till nästa (eller förra) sidan + tillbaka till översikten. Aktiverad på alla bossar och karaktärer. Fungerar i stort sett exakt som guide-navigatorn beskriven tidigare. Självklart med utmärkt mobilstöd. Vi hoppas detta ska göra det lättare för dig att komma igenom flera bossar på en gång, samt få klickat dig runt ännu mer på FFU!

Omdesignad och bättre mobilmeny

Detta är möjligen en av mina personliga favoriter, en helt ny meny för mobil! Inte bara är den riktigt snygg och i sann gammal Final Fantasy-anda, den är också extra funktionell genom att den sätter sig fast på toppen av din skärm när du skrollar ner på sidan. Använd den närsomhelst för att ta fram alla sidor på en guide, så att du lätt hittar dig till nästa sak du söker. Som bonus är den helt gjord i CSS och extremt mycket snabbare än den gamla.

Stora boss-utklipp till guiderna

Guiderna kan enkelt hämta in data om en boss bara genom att redaktören länkar till bossen. Vi hade detta förut men introducerar nu en större och bättre inforuta för bossar – den visar HP, svagheter, styrkor, samt kortfattade tips för att besegra bossen (självklart med en länk vidare till full beskrivning på boss-sidorna). Används än så länge bara i nya FF7-guiden. Dessutom prövar vi något ganska nytt – gul och orange färg i vår design för att bryta lite mot det blå.

Mängder av småförbättringar

Guiderna är i behov av mer rikt innehåll, så vi lägger in snyggare citat och tydligare markering av vad du ska välja i menyer eller i dialoger i spelen. Vi har också lagt in små toningar, animeringar, och grafiska uppdateringar här och där som du kanske (eller kanske inte) lägger märke till. Även jobbet för oss att skapa helt nya guider, samt underhålla existerande guider, har förbättrats enormt (för att inte nämna alla förbättringar vi gjort på kodbasen). Vill du veta mer, eller få tekniska detaljer så skrev vi om det för någon vecka sedan.

Tack för nu. Vi får se vad som väntar i nästa version, om det blir 1.7 eller om vi hoppar direkt till 2.0. Men jag har flera önskemål, bland annat bättre översikt samt sök till bossarnas sidor.

FFU2 Theme 1.6

2019-08-24 / Bobby

Ett märkligt namn – “FFU2 version 1.6” – men FFU har haft två större eror – den gamla där alla sidor såg ut som de ville och var handkodade och svåra att underhålla, bestående av mest HTML och lite ASP classic (utan databas eller admin) på en FTP-server. Och så den nya där de alla körs på WordPress, har mer modern kod (HTML5, CSS3), ny server och subdomän (“guide.”), och samma snygga design överallt. Den eran kallar jag “FFU2”. Alla våra guider flyttas sakta men säkert över till detta system.

Den design vi har nu på FFU2 har redan över 7 år på nacken, men den lever och utvecklas lite hela tiden så det känns inte gammalt (över 500 ändringar har gjorts över åren). Just nu är vi på version 1.5.1, det stora nya som kom med 1.5 var att väldigt mycket kod skrevs smartare och effektivare, så våra sidor laddas fortare, något som bidragit till toppbetyg hos många tjänster online som mäter hastighet.

Nu jobbar jag på 1.6. Där tar vi tag i ett gäng gamla irritationer, utdaterad kod, repetativ kod, osmart kod, och förenklar mycket för oss själva. Samtidigt utförs flera önskningar vi haft en längre tid, speciellt ett större lyft på guiderna och bossarna.

Några highlights på det vi jobbar med:

Design och funktioner

Småjusteringar på designen, bland annat “transitions” och “gradients”:
Ny större boss-snippet (visar det viktigaste om varje boss) till guiderna, i härlig orange färg:
Förbättrad guidenavigator (med helt ny och tydlig “nästa”-knapp):
Ny “syskon-navigering” (baserad på guide-navigatorn), lagt in på alla karaktärer och bossar:
Ny startsida/översikt till våra guider, en “ruta” per del/kapitel, med information om innehållet:
“Sticky” meny för varje guide (sajt) som följer med när du scrollar på mindre skärmar:
Fixat “med i striden”-funktionen på bossar (hade inte funkat på länge):

Övrigt

Generellt bättre på mindre skärmar (allt blir inte klumpigt stort redan vid 960 pixlars bredd).
Uppdaterat Lightcase (för bildgallerier) från version 1.6 till 2.5 (nu med swipe-stöd på mobil).
Helt omskriven kod för menyn (löser flera problem vi haft).
Omarbetad och förbättrad JavaScript.
Förbättrad CSS och struktur.
Massa annat smått.

Du kan följa utvecklingen direkt i källkoden på Bitbucket om du vill, vi utvecklar i en egen branch (gren). Namnet “MENU2” är historiskt, jag skulle bara skriva om logiken bakom menyn för att fixa tre gamla långlivade buggar som irriterat mig … men skulle bara fixa lite till i samma släng.

Version 1.6 är precis runt hörnet och vi räknar med att bli färdiga med de sista 5-6 små förbättringarna i loppet av en vecka. När allt är på plats så släpps det över hela FFU omedelbart tack vare vårt smidiga uppsätt med git som jag skrivit om tidigare.

En ny sak som är värd att nämna, även om den inte syns, är att jag för första gången på länge har en ordentlig lokal testmiljö, något som snabbar upp utveckling och testing oerhört. Detta tack vare Local By Flywheel, ett enkelt och användarvänligt program för alla som jobbar med WordPress och behöver sätta upp lokala miljöer.

Ny framsida på FFU

2018-04-09 / Bobby

För snart ett år sedan fick FFU en helt ny och uppdaterad guideväljare. Alltså sidan där du får en fin översikt över alla spel vi skriver om så att du lätt kan ta dig vidare.

Vår guideväljare

Flytten av denna sida var en del i ett väldigt omfattande projekt att flytta ut allt vi har på vår “root”-sajt (allt som ligger på www men inte är communityn eller en guide, oftast slutar URLen på “.aspx”). Allt där ska flyttas, och guideväljaren var en viktig del. Nu har vi över tid också flyttat ut många andra bitar: alla infosidor och vanliga frågor blev till “om oss”-sajten, och alla nyheter ligger nu på en egen ny sajt.

Vår gamla startsida.

Sist är då själva startsidan. Vi började med att ta bort alla nyheter och endast behålla länkar och vår Twitter feed. Men planen var att helt ändra denna sida. Och det har vi nu fått gjort.

Vår nya startsida!

Baserat på designen till guideväljaren har vi nu en helt ny startsida till FFU. Den ger dig en extremt enkel och kort välkomst, och ger dig sen fem olika vägar att gå: guider, nyheter, community, blogg, eller om oss. Allt med stora tydliga knappar, starka färger, stor text, och snygga bilder. Självklart funkar sidan perfekt på alla skärmar, även mobil.

Vi har också medvetet tagit bort navigatorn vi har överst på alla sidor – TopNav – på nya startsidan, detta för att minimera antal val en ny besökare får och antal länkar de måste ta ställning till.

Med denna flytt så återstår bara några få små delar av “root”-sajten att få flyttat. Då har vi inte längre någon ASP.NET kvar på FFU, ett stort steg i vår gigantiska migrering. Redan är 1000 sidor av guider migrerade, 1500 nyheter, och en mängd annat. Målet är på sikt att vi endast har kvar communityn på vår Windows-server och ASP classic.

Ta en titt!

FFU-navigator version 5

2017-12-05 / Bobby

Överst på alla våra sidor och guider ligger ett över 10 år gammalt design-element. Vår sajtnavigator. Via den kan man se om man är inloggad på communityn, man kan logga in, man kan ta sig till våra olika delar av FFU (om oss, bloggen, med mera), och man kan framförallt se en översikt på alla våra spelguider och snabbt öppna en av dem. Detta är den tredje versionen av denna navigator.

FFU-navigatorn version 3 (nuvarande per 2017)

Version 4

För ett par år sedan började jag smått designa om den (äntligen) – version 4. Dessvärre var jag tvungen att pausa det jobbet lite. Såhär såg den ut då jag la projektet på hyllan.

FFU-navigatorn version 4 (aldrig lanserad)

Och bra det pausades. För med tiden föddes en helt ny design, löst baserad på det jag kom fram till först, men extremt mycket renare och enklare – väsentligt mycket bättre. Som ni ser är version 4 ganska rörig, full av små små detaljer.

Version 5

FFU-navigatorn version 5 – utkast

Såhär ser den ut just nu, i tidigt designstadium. Version 5. Berikad med fullt stöd för mobila enheter, för listning av alla våra guider (även de som inte får plats i menyn, de visas omedelbart då man lägger muspekaren över “Fler spelguider”), och små fina animationer. Ny är också vår logo med Mog, den använder vi redan på Facebook, Twitter, och på många andra platser.

Ute är formuläret för att direkt logga in på communityn, och borta är också sista nyheter (eftersom vi inte postar så brutalt ofta). Tanken är att introducera någon form för hint likt Trello gör det för att påkalla uppmärksamheten till något nytt som hänt, men det kommer efter lansering.

Tidigare versioner har jag alltid designat i Photoshop, men denna gång “designade” jag dem från grunden direkt med CSS och HTML i Firefox Developer Edition. Detta har gjort att jag omedelbart får något testbart, som lätt kan ändras på, och ingen tid läggs i Photoshop. “Code first”!

Förhoppningsvis blir vår nya FFU-navigator färdig och lanseras i starten av 2018. Men först ska den kännas perfekt på liten som stor skärm (över 50% av våra besökare använder mobil).

Ny spelväljare/guideväljare lanserad

2017-06-10 / Bobby

Vi har pratat om det tidigare och haft planerna på det länge, men så plötsligt fick jag lite tid över och kunde bygga och färdigställa vår nya guideväljare (en slags karta med alla FF-spelens logos, som man kunde klicka på för att komma till det spelets guide/sajt).

I många år låg denna guideväljare som en del på nyhetssajten, på /games.aspx. Inte så logiskt eller enkelt att komma ihåg. Mer logiskt var ju så klart att ha den som en helt egen sida, och i “root” på vår nya fina femåriga guide-server, på guide.ffuniverse.nu/. Men där hade vi lagt upp vår blogg. Efter många om och men så fick vi den flyttad, och då öppnade sig möjligheterna för att skapa vår nya guideväljare.

Ny design

Den har en enkel design. En lätt svag gråblå färg i bakgrunden som tonas ut i nästan vitt med en gradient. Självklart helt gjort med CSS.

background-color: #f1f3f5; /* Måla hela sajten i denna färg */
background-image: linear-gradient(
    to bottom, /* Skapa en gradient från toppen till botten */
    #c9ced7 0px, /* Första färgen är denna, rita den fram till nästa färg (totalt 1 pixel, för att ge en liten "kant"-effekt) */
    #adb5c2 1px, /* Nästa färg kommer redan efter 1 pixel, detta är starten på gradient */
    #f1f3f5 131px /* Gör en gradient mellan förra färgen och denna på en längd av 130 pixlar */
);

Detta är kopierat från guidernas egna WordPress-theme så att man ska känna igen sig. Alla logos känner ni kanske också igen stilen på, det är också samma stil som på guiderna. En tunn vit ram runt bilden, med skugga bakom. Flera logos vi inte hade från förut var tvungna att skapas, men det var en relativt enkel jobb eftersom vi har Photoshop-mallar för det mesta av våra nya sajter.

Grid

Alla logos läggs upp i rader, tre per rad på en dator med stor skärm, och en per rad på mobil. Detta mobilstöd är också helt nytt, en liten bonus. För responsiv design använder vi ett tunnt och enkelt CSS-ramverk som heter Simple Grid, det påminner om Bootstrap men är enbart för att skapa “rutnät” på mobil och PC. Stora fördelen är att det är en fil som bara är 1 kB stor, istället för nära 100 kB på Bootstrap.

<div class="row">
  <div class="col-6 col-12-sm">
    Full rad på mobil, halv rad på PC.
  </div>
</div>

Flexbox

Eftersom alla logos ser väldigt olika ut – jämför till exempel FF2 och FF12! – så måste vi se till att alla “rutor” de placeras i blir lika höga. Detta är något som tidigare var väldigt svårt med CSS, men fick till och med ibland gå tillbaka till att använda tabeller för det, något som är semantiskt inkorrekt. Men för några år sedan kom CSS Flexbox, och nu kan man använda det fullt ut.

Man har först en box som omslutar alla småboxar, denna huvudbox ges flex-stöd.

display: flex;

Och så när jag lägger detta på en <ol> lista så förstår webbläsaren att denna är i flex-läge och ska anpassa alla innehållande boxar efter varandra. Men vad händer när huvudboxen blir för stor för att alla boxar i den ska få plats? Då säger man bara att de ska puttas ner på nästa rad med denna:

flex-wrap: wrap;

Sen ska man lägga display: flex; också på varje innehållsbox. Då kommer alla boxar (alla <li> element) bli lika breda och höga oavsett storlek på skärmen eller innehållet. Superlätt! Inte en enda linje JavaScript behövs (som förut).

En sista fin detalj är att om man vill centrera alla logos horisontalt, men vertikalt placera dem på botten, så är det också sjukt lätt nu jämfört med förut. Dessa två linjer ordar det hela.

li {
  align-items: flex-end; /* Vertikalt */
  justify-content: center; /* Horisontalt */
}

Nu är allt placerat som det ska.

Grupper

För att förenkla för besökaren så delar vi in – precis som förut – alla spelen i tre olika grupper. Den numrerade originalserien av Final Fantasy (FF7, FF8, men inte FFX-2 t.ex.), alla andra FF-spel, och så resten av Square Enix-spelen (som ej hör till FF-serien, som till exempel Chrono Trigger).

Footer

Längst ner på sidan ligger några snabblänkar till FFUs olika större sajter, samt avslutande länkar med nyttig info, så som cookies. Alla dessa länkar använder sig nu av de nya “dev.” och “om.”-servrarna.

Historik

Som referens har du här en bild på den gamla designen (skulle gissa på 10 år gammal, och inte stöd för mobil). Den kan inte längre nås eftersom jag redan ändrat på alla länkar i TopNav, i footers, och andra ställen på FFU.

Första version av plugin laddar in TopNav

2017-03-25 / Bobby

Jag skrev tidigare om att vi bygger på ett litet WordPress-plugin som ska förenkla några delar på FFUs WP-sidor (alla spelguiderna ligger där). Vi har ju flera themes och olika sajter (denna blogg är en av den), och det är mycket kod vi önskar köra på alla dessa. Fram till nu har vi gjort copy+paste på all denna kod, men det är slut nu när vi har ett smidigt plugin alla sajter får använda istället. Detta plugin är nu redo att testas ut live, i sitt första utförande.

Genom att ladda upp och aktivera detta plugin så får en sajt automagiskt FFUs “TopNav” insatt på toppen av sidan (förutsatt att man lagt in en WP-hook för FFU topnav). Och detta är den moderna versionen av TopNav som utvecklades med vårt FFU-Theme 1.5 för nåt år sen. Med massa förbättringar under ytan! Bättre HTML5-kod, CSS3 och JavaScript som hämtar JSON med data från Windows-servern (för att kunna se om du är inloggad på communityn eller ej). Rätt komplicerade saker och väldigt mycket att tänka på för att få allt detta till. Bara det att hämta JSON från Windows-servern krävde massor av jobb på grund av CORS – Cross-site origin (man får egentligen inte hämta filer från andra servrar, så lite nya regler behövdes programmeras).

Detta är nu tagit steget längre, TopNav som nu hämtas in ser likadan ut som förut- men går du ner på surfplatta eller mobil så får du nu en helt ny design och upplevelse! Vi har en drastiskt förbättrad TopNav för små skärmar. FFUs logo visas och en knapp för att glida in en meny med alla våra guider och spelsajter. Du kan enkelt scrolla runt i denna meny, eller stänga den. Sista nyheterna ser man också hela tiden. Ju mindre skärmyta man har, ju mer plockar vi bort från TopNav, utan att ta bort viktig funktionalitet. Dessutom droppade jag helt jQuery och skrev om all JavaScript (200 linjer) till vanlig äkta “vanilla” JavaScript.

Såhär ser TopNav nu ut, med finare blå bakgrundsfärg (förut tråkigt vit). Logo och stor tydlig knapp för att visa alla våra andra sajter. Skulle du ha ännu mindre skärm så kapar vi bort “niverse”-delen av logons text.

Såhär ser det ut på läsplattor. Har man större skärm får man den gamla vanliga TopNaven.

När man klickar på “+ fler guider” så animerar vi snyggt in menyn från höger sida. Självklart med CSS transitions. Scrolla ner för att se hela listan. Eller stäng den med X uppe till höger.

Längst ner i menyn ligger en mer tydlig “Fler spel”-länk (vi har inte alla våra guider i TopNav). Och underst ligger våra andra sajter. Lätt att komma sig överallt, även på mobil!

Hoppas detta gillas och förbättrar upplevelsen för våra besökare! Detta är bara ett litet smakprov, ett öppet beta-test. Fler förbättringar på TopNav, och vårt plugin, är på väg! Det är trots allt FFUs 20:e år på nätet i år!

PS. Det är bara de sidor vi har på WordPress som får denna nya TopNav. Så communityn, nyhetssajterna, med flera, får den inte.

TopNav 4, oktober-edition

2015-10-04 / Bobby

För cirka en månad sedan ändrade jag sist på TopNav. Och några nya idéer har dykt upp. Men också har flera saker fått smälta in lite mer och jag har kunnat fatta beslut som inte kändes rätt precis då jag satt med designen.

Den nya logon jag testade har tagits bort, återgick till den förra, men gjorde den större. Den kändes mindre stökig, och lite gladare, mindre stel. På nåt sätt.

Dessutom så har Fat Chocobo fått komma in i värmen. Jag hade tänkt att han ska ligga bakom alla nyheter och uppdateringar (man ska kunna “kryssa ner” de man läst för att få upp nästa, upp till 3-5 stycken) och visas först då allt nytt har lästs. Men varför inte ta fram honom och alltid visa honom där uppe? Tycker han passar fint in. Rutan i sig är också lite större, inverterad gradient, och tydligare uppdelad text.

Community-rutan har fått en liten detalj ändrad. Eller två faktiskt. Knappen har gått från svag 3D-effekt till mer modern platt gradient, men i samma skarpa blå färg som förut. Rubriken gick från “Community” till “FF Community” och centrerades i fetstil ovanför knappen.

Sajtlänkarna (“Mer på FFU” och “Nyheter”) har fått permanent bakgrundsfärg för att de ska synas bättre, man missar dem så lätt annars.

“Fler Spelguider”-menyn har designats om till att likna mer på “Mer på FFU”-menyn. Ingen pratbubble-pil i toppen, bara en ren rundad ruta, med lista på sajter. I toppen en rubrik som beskriver menyn, med ett skarpt blått streck under. För att dela upp sajter i sektioner så används ett smalare ljusgrått streck än tidigare.

Här är också ett exempel på de fyra olika faser Community-menyn ska kunna vara i. Menyn kan vara minimerad eller expanderad. I designexemplet ovan är den minimerad, och användaren är inte inloggad. I följande exempel, från vänster till höger, har menyn klickats på (expanderats) så att man kan logga in. Sen är menyn minimerad men man är inloggad, och på sista exemplet är man inloggad och menyn är expanderad och visar några extra länkar. Knappar och länkar i dessa exempel är inte helt färdiga än.

Jag gillar kontrasterna med de mörka bakgrunderna med ljus text, och de nya skarpa färgerna av blått och orange för att kalla på uppmärksamhet (länkar, knappar), blandat med väldigt ljusa bakgrunder med svart text på.

TopNav, uppdatering 10 september

2015-09-10 / Bobby

Ytterligare en runda med TopNav. Just nu småskruvar jag mest på detaljer sedan sist.

Gick in i Community-menyerna och jobbade mer med dem. Gjorde knapparna för att logga in skarpare blå, så att de syns ännu bättre (och piggar upp sajten med mer färger). Och så gjorde jag så att all text blir grå och länkar orange med ett ljusare streck under. Jag testar nu två varianter av fält att skriva i, ett vitt med inre skugga och ett som bara är ljusgrått utan effekter. Tror jag gillar det sistnämnda bäst. Också nytt är den lite mörkare bakgrundsfärgen på slutet som ramar in sekundär info, här länk till att bli medlem om man inte är det.

Det är också ändrat så att skuggan blir mer enhetlig. Istället för en tonande skugga så är där nu en fem pixlar tjock skugga. En genomskinlig ram helt enkelt. Det används på andra elementer i TopNav i samma “styrka” så det matchar in lite bättre. Även om det just här ser lite grötigt ut, men ska jobba på det.

Testar också en variant av logon som skriver ut hela sajtens namn, och Final Fantasy för att betona det. Jag gillar tanken bakom detta, att fokusera hårdare på Final Fantasy. Men det ser lite rörigt ut med de romerska siffrorna nedanför som nästan smälter ihop med logon. Detta upplevde jag inte på den förra som var mindre och använde färger på ett annat sätt.

Även newstickern är lite ändrad. Den har fått en svag toning jag testar, får se om den får överleva. Och så har det lagts till en “Se fler xxx” i botten så att man kan komma vidare och få en bättre översikt om man önskar av uppdateringar, nyheter, eller vad det nu skrivs ut här uppe. Tanken är att klickar man på krysset ovanför så faller rutan ner och en ny glider in ovanifrån med näst sista händelsen. Detta fortsätter upp till 3-5 olika saker och efter det försvinner rutan helt, men något bör läggas under … kanske Fat Chocobo?

Så sist en skiss med nya “Mer på FFU”-menyn utvecklad. Den påminner en del om “Fler spelguider”-menyn, medvetet. Men utan pilen och en smalare horisontell linje. Denna ska lägga sig direkt över länken “Mer på FFU” när man klickar/svävar och bara kort och gott lista alla hörn och kanter på FFU.

Utöver det, inga fler ändringar än en liten skugga ned från TopNav på header-bilder på alla sajter. Och till vänster testar jag eventuellt ny bakgrund bakom headers (även om det inte tillhör TopNav-projektet) med grå bakgrund. Tänker mig att kanske använda samma stil i kommande omdesign av footern på FFU (som ska bli lite enklare än den är nu).

TopNav4 – tidig september-version

2015-09-04 / Bobby

Såhär såg “TopNav4” ut för lite över en vecka sen:
Nu har jag gått en runda till på den. En av de största skillnaderna är kanske att den nu fått bli ännu lite högre. Det överst partiet (det med blå bakgrund) har växt från 90 pixlars höjd till 120 pixlar. Det kändes bara för trångt där uppe, och jag behövde mer utrymme oavsett.

Detta är så den ser ut just nu:

Fokus är att få menyn med alla FF-spel så ren som möjligt. Nu är det bara spel från originalserien där. Sedan en liten skiljelinje och så spinoffs, just nu bara FFX-2. Efter det en “Fler spelguider”-meny som listar alla andra guider vi har (det är väldigt många).

Sociala länkarmenyn fick flytta upp igen, men nu lite ändrad. Den är nu mer ren, ingen text, bara ikoner, och mer luft. Samtidigt la jag in kära Cactuar där. Det är dels än fin färgklick, en känd FF-symbol, och något som drar ögonen tills sig. Den får nya besökare att lättare upptäcka Communityn, de sociala länkarna, och “Fler spelguider”-menyn.

Med allt detta extra utrymme kunde jag ge mer luft runt logon, sajtlänkarna, nyhetsboxen, och under communityn (men där klämde jag nu in social-menyn). Sajtlänkarna har också ändrats lite. Det står nu bara “Nyheter”, kort och gott. Och under “Mer på FFU” med en pil. Detta är inte designat än men jag tänker mig en liten drop down där jag kan lista länkar till FAQ, extra länk till Communityns startsida, Sök, Blogg, och liknande. Det är en del som kan behöva få plats där uppe men som bara grötar till det om det ska skrivas ut, så det får lämpas in i en utfällbar meny helt enkelt.

Bytte också “sajtbakgrund” under TopNav för att testa med en ljus sajt istället och se hur det passar. Tycker det funkar riktigt bra. Här är ett exempel med “Fler spelguider”-menyn utfälld (den har jag också jobbat en del på):