Proces website

Zonder al te hard in te gaan op het hele proces van coderen tot eindresultaat, wil ik toch enkele belangrijke stappen tonen.

#1: SCHETSFASE: van VAST kader naar ROLLENDE SITE: toen ik begonnen was met coderen, wist ik dat het een hele klus zou worden om een volledige site te bouwen. Ik wou per se zelf iets coderen, maar anderzijds realistisch blijven en het basic genoeg houden. Daarom wou ik een vast kader zonder teveel tralalaa. Maar na een tijdje vond ik de site mss toch wat te droog. Ik hou niet van teveel links of eindeloos scrollen, maar er mocht toch een beetje ‘swoeng’ in. Dus ben ik toch voor het bootstrap thema gegaan. Wanneer je naar beneden scrolt ga je naar een ander onderdeel (ABOUT – PORTFOLIO – LINKS…) Maar de hoofdbalk geeft visueel aan waar in de website je zit. Ik heb nog getwijfeld om mijn logo weg te laten en direct op het portfoliogedeelte te focussen. Maar omdat er dan geen link zou zijn met mijn grafische identiteit, hebt ik mijn LAURA-logo er toch ingestoken. Of ik had mijn logo in het ienieminie in mijn navigatiebalk kunnen steken?? Maar in welke mate zou je er dan nog iets van kunnen zien? Dit ook met het idee dat als ik die ‘impossible type’ beu ben, ik er gemakkelijk een ander logo zou kunnen plaatsen zonder mijn naam in de navigatie te moeten veranderen.

Schermafbeelding 2015-03-03 om 11.55.19Schermafbeelding 2015-03-13 om 00.24.43Schermafbeelding 2015-03-13 om 00.24.58

 

#2: OPZET BOOTSTRAP: eens het bootstrap thema geïnstalleerd te hebben, moesten er heel wat default settings aangepast worden. Na een eerste herstyling zag mijn site er als volgt uit… De header stond al in een sans serif font zoals ik het wou, maar mijn projecten werden steeds in een schreef lettertype getoond. Dit gold ook voor het contactform en de links-pagina. Het rol-effectje werkte ook nog niet helemaal zoals het moest (wanneer je op ‘links’ klikte kreeg je al de helft van het contact form te zien).

Schermafbeelding 2015-03-09 om 11.34.24 Schermafbeelding 2015-03-09 om 11.34.18 Schermafbeelding 2015-03-09 om 11.34.08 Schermafbeelding 2015-03-09 om 11.34.35

 

#3: VERFIJNING: uitlijnen, typografie, carousel-effect: eerst ben ik begonnen met alles in sans serif te zetten. Zo kreeg ik meteen een ander beeld van de site. Verder probeerde ik ook te letten op de uitlijning van het projectvenster. Ik heb gekozen voor een uitgevulde tekstkolom, kwestie van het grid extra stevig te tonen. Toen ik het voor de eerste keer uitgelijnd had, vond ik de foto+tekst te karp in het kader passen. Dus ging ik extra margins invoeren, maar toen was mijn uitlijning weer verdwenen… Hier heb ik even op liggen zoeken. Ondertussen had ik ook een carousel toegevoegd. Deze doet de foto’s automatisch sliden. Het probleem met de uitlijning zat oa in de carousel. Als de foto veranderde, werd deze precies uitgetrokken. En het was enkel in ‘uitgetrokken’ toestand dat alles mooi uitgelijnd leek. Wat de about page betreft, heb ik liggen experimenteren met beeld en tekst (naast elkaar, tekst op beeld,..????).

Schermafbeelding 2015-03-09 om 10.25.54 Schermafbeelding 2015-03-11 om 23.50.24 Schermafbeelding 2015-03-09 om 11.34.32Schermafbeelding 2015-03-11 om 23.52.30

 

#4: probleem met de carousel: in de vorige fase had ik een carousel effect toegevoegd. De controls vond ik overbodig. Maar achteraf heb ik ze toch tr toegevoegd.. Controls zijn gwn veel handiger om snel door de afbeeldingen te gaan. Men kan ook wel op de vierkantjes klikken, maar bij witte afbeeldingen, zijn deze moeilijk zichtbaar (vooral bij de website foto’s van typo memo). Maar eens ik de controls had toegevoegd kreeg ik weer een lelijk gradé-effect. Ik vond deze gradé te overheersend dus heb ik hem er ook uitgezwierd.

#5: resizen/ Kleuraccent: het vervelendste probleem zat hem echter in het resizen. Aangezien mijn tekst uitgevuld is, kan het er soms mooi en soms heel lelijk uitzien. Vooral als de tekstkolom heel smal werd, zag het er niet uit. Wanneer de tekst naar onder sprong was er een ander probleem: de tekst plakte tegen mijn foto… Het woord [E X I T ] wou ik mee uitlijnen met de foto. Dit was gelukt, maar werkte niet mee in het resizen… Wat het blauwe kleuraccent betreft > bij de links heb ik de icoontjes op grijs gezet en kleuren ze blauw als je er over hoovert. Kwestie van de hyperlink beter te visualiseren en consequent te zijn.

#6: FINISHING TOUCHES: OK ik ben mijn eigen uitleg al beu en ik kan me eigenlijk nog amper herinneren welke tussenstapjes ik allemaal gedaan heb. Het komt er vooral op neer dat het een kwestie van marges en resizen is. Uiteindelijk heb ik beslist om mijn tekst uitgevuld te laten (wanneer de site op >960px staat). Bij kleinere schaal springt de tekst naar onderen en wordt die links uitgelijnd. Gelijkaardige beweging voor de about pagina. In full-size staat de tekst wit op mijn portretje. In kleiner schaal verspringt die naar onderen. Voor groepsopdrachten met Gianni heb ik hyperlinks naar zijn portfoliobox gelegd. Verder heb ik ook geprobeerd aandacht te schenken aan de heel kleine details > zoals het oogje in het tabblad (achtergrond op transparant gezet)….

EN ALLE FOTOS VEEEEEEL KLEINER GEMAAKT :-) (kwestie dat de site sneller laadt!)

Schermafbeelding 2015-03-11 om 23.46.07 Schermafbeelding 2015-03-10 om 09.39.55

 

ziezo, zo is het min of meer verlopen! Ik zal nog een filmpje posten waarin ik het gebruik van mijn afgewerkte site toen (dat kan ik dan ineens gebruiken voor in mijn pechakucha >>opendeurdag!)

xxxxx

Advertenties

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit / Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit / Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit / Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit / Bijwerken )

Verbinden met %s