Disco D is finished!

Het vervolg op “buzzzy bunny” is “Disco D”. Song: ‘boogie wonderland’ van ‘Earth, wind and fire’. De kwaliteit heb ik bewust minder gezet om het uploaden via youtube te versnellen. Orginele versie is in HD!

Advertenties

werking website

Voila, hier is het filmpje waarin de werking van mijn website wordt getoond! Maar uiteraard kan je best naar de website zelf kijken ;-)

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

www.engelslaura.com

Met veel trots kondig ik mijn website aan: www.engelslaura.com :-)

Schermafbeelding 2015-03-13 om 00.15.42

Uiteraard heb ik dit niet alleen gedaan. Met de hulp van mijn goede vriend Gerry Hendrickx ben ik erin geslaagd om op korte tijd toch een hele website in elkaar te steken. Hij heeft voor mij de basis uitgeschreven, zodat ik de styling kon verfijnen. Voor de site hebben we gebruik gemaakt van de bootstrap thema’s ‘freelancer’ en ‘agency’ (http://ironsummitmedia.github.io/startbootstrap-agency/). De voornaamste reden waarom we dit gedaan hebben is omwille van het resisen (voor als je mobiel gaat of op tabblets). De codering is uitgescreven in visual pro (enkel op windows).

Website> sketches

Laatste tijd heb ik mij verdiept in de wereld van html 5 en css. In de hoop toch zelf een website te bouwen. Helaas gaat dit niet zo vlot als ik gehoopt had. Ik zou nog vele langer kunnen prutsen, maar ik denk dat het belangrijk is om ASAP te solliciteren dus de website moet volgende week AF AF AF zijn! Daarom heb ik besloten de hulp in te schakelen van een goede vriend, die voor mij de basis zal uitschrijven (de structuur) zodat ik verder kan stylen in css.. Portfoliobox zie ik echt niet zitten omdat er volgens mij te weinig vrijheid in zit. Als grafisch ontwerper zou je toch controle moeten hebben over hoe je wil dat je site eruit ziet..

Bon dit is mijn idee > uiteraard in overleg met mijn goede vriend ;-) Dit is hoe de ideale websiete er qua werking zou uitzien…

Schermafbeelding 2015-03-03 om 11.55.19 Schermafbeelding 2015-03-03 om 11.55.28Schermafbeelding 2015-03-03 om 11.55.40 Schermafbeelding 2015-03-03 om 11.56.09 Schermafbeelding 2015-03-03 om 11.56.21

 

Morgen ook eens langsgaan bij codestudio en dit weekend goed knallen en beginnen mailen! It’s gotta happen! xx laura