Website voor new media bedrijf [Archief]

Volledige versie bekijken : Website voor new media bedrijf

NieLz

%Europe/Berlin %583 %2007, 15:00

Hoi, ik moet als stage opdracht de website ontwikkelen voor een new media bedrijf.
Het is een redelijk jong bedrijf en hadden nog niet echt een website of logo. Het was aan mij om deze allebei te maken.

Ik wou een een site die zich aanpast, niet aan de inhoud maar aan volledige scherm.
Een zogenaamd “liquid” design laat toe dat de flashwebsite over het hele scherm wordt uitgerokken. Dit was voor mij iets dat ik nog nooit gedaan had. Elementen zoals de het logo mogen niet vergroot worden maar moeten enkel van plaats veranderd worden. De achtergrond wordt dan wel weer volledig aangepast en uitgetrokken om in het scherm te passen. De keuze van achtergrond is hierbij zeer belangrijk, deze moet een bepaalde structuur hebben maar elementen zoals een auto of een persoon zouden vervormen door het aanpassen aan de schermgrootte. Eenvoudige texturen van een muur met verfstrepen of korrelstructuur zijn hier de beste oplossing aangezien het daarbij niet opvalt als ze een beetje uitgetrokken zijn.

Het Schema:
http://www.digx.be/schema.jpg

Voor schermen met een kleinere resolutie is het mogelijk dat de inhoud niet volledig wordt weergegeven. Omdat de scrollbar van browsers niet te gebruiken is in een flash website is het noodzakelijk om een scrollbar in fe flash zelf te voorzien. Deze is te importeren als een voorgedefinieerde component maar ik heb hem zelf gemaakt in de stijl van de site.

De boven- en onderste balk zorgen voor contrast en aflijning. De felle groene achtergrond geeft kleur aan het geheel en zorgt tegelijk voor een vintage look. De kaders zijn verschillende segmenten zoals nieuws, een videoplayer, jobs en een nieuwsbrief input. Ze kunnen aangepast worden naar gelang de inhoud. Ze zijn tevens wat transparant om de textuur van de achtergrond te behouden door de vensters heen.

Designs in Photoshop:
http://www.digx.be/concept.jpg

http://www.digx.be/cases.jpg

http://www.digx.be/case.jpg

Door de achtergrond van kleur te laten veranderen bepalen we in 1 klap de hele look & feel van de hele site. Als we warme zomerse kleuren gebruiken geeft de site ook een warm zonnig gevoel. Door donkerdere achtergronden te gebruiken creëren we dan weer een iets mysterieuzere sfeer. Leuk zou zijn dat elementen zoals de titel, link kleuren en achtergrondkleuren van de titels dezelfde kleur zouden krijgen dan de achtergrond. Elke pagina zou bijgevolg een achtergrond kunnen hebben die uniek is qua kleur en textuur.

Color switches in Photoshop:
http://www.digx.be/home.jpg

http://www.digx.be/home_blauw.jpg

http://www.digx.be/home_oranje.jpg

De meeste zaken zoals vierkante balken en vensters konden on the fly gemaakt worden in flash. Enkel de achtergrond zou dynamisch moeten worden ingeladen als een afbeelding om de bestandsgrootte van de flash file zo klein mogelijk te houden. Hierdoor wordt de laadtijd van de flash zelf op de site klein gehouden en hoeven de mensen haast niet te wachten. Dat maakt het surfen vlot en aangenaam.

Aan elke pagina is een andere achtergrond en kleur toegewezen. Op elke pagina wordt deze dynamisch ingeladen en wordt de meest voorkomende kleur van deze image gescant en opgeslaan. Bepaalde elementen krijgen vervolgens deze kleur om in totale harmonie met de achtergrond te staan. Achtergronden zijn gemakkelijk te veranderen en men hoeft zich geen zorgen te maken over het manueel instellen van de nieuwe kleur die de achtergrond met zich meebrengt.

Na een dikke maand staat ie ondertussen online, maar er moeten nog enkele dingen aan gebeuren zoals cases verder uitwerken in detail.
Toch had ik al graag wat feedback en/of suggesties gehad :#

------------------
Calibrate (http://www.calibrate.be)
------------------

grtz NieLz ;)

tijmen_4real

%Europe/Berlin %603 %2007, 15:29

Alles loopt lekker, ziet er ook mooi uit !
Niet echt zo snel iets op aan te merken...

Je ziet deze stijl steeds vaker, met boven -en onderin een balk, en in het midden de content. Is er een naam voor deze stijl (tutorial) ?

NieLz

%Europe/Berlin %620 %2007, 15:53

het is een "liquid design", vloeit helemaal met de browser mee.

maar een echte stijl? ...

jexter2

%Europe/Berlin %669 %2007, 17:03

Het scrollbalkje aan de rechterkant werkt niet echt lekker omdat hij helemaal naar de rechterkant is gedrukt, daar zou ik nog is naar kijken.

Verder wel netjes :)

Bigbuddha

%Europe/Berlin %672 %2007, 17:07

Op zich wel leuke site en stijl.
Zoals gezeg, je ziet het wel vaker. Dus voor een "New" media bureau misschien niet heel origineel. Uiteraard zeggen wij dit omdat we weten wat er rondgaat op het net. Jullie potentiele klanten gaan dit meer dan waarschijnlijk niet zo ervaren. Dus niet zo'n probleem.

Het pijltje bij de titels is wel erg retro ;)

terms of use en privacy werken ook nog niet?

'k vind de meeste fonts wel heel klein. Lastig voor de al vermoeide ogen.

Bij cases kan ik niets aanklikken?

Heel techno, niet heel veel info, maar dat komt zeker nog?
Goeie site, maar het had wat "Newer" mogen zijn.

nrameckers

%Europe/Berlin %674 %2007, 17:10

Ik vind het jammer dat het geheel niet in het midden staat.. verder wel cool gedaan.

aceHigh

%Europe/Berlin %700 %2007, 17:48

Als ik me ergens aan kan ergeren zijn het wel websites die ongevraagd zonder waarschuwing de grootte van de browser veranderen...

Ziet er voor de rest wel erg netjes uit :)

alwinp

%Europe/Berlin %733 %2007, 18:36

Ik zou ook wat animatie brengen aan de buttons.
Het design vind ik leuk gemaakt.

wat me ook stoort is dat je idd niet op de cases kunt klikken, maar daar ging je nog meer verder zei je.

NieLz

%Europe/Berlin %396 %2007, 10:30

yep die komen er nog aan, en ook moet de site nog wat meer geanimeerd worden.
terms of use en privacy policy is aan de advocaten :p

ldemortier

%Europe/Berlin %611 %2007, 15:40

ziet er zeker goed uit;)
enkel deze opmerkingskes:

>de foto op de home pagina is niet op de juiste resolutie (je ziet nog wat pixels in de foto)
>het idee van de achtergronden is best wel leuk, enkel ligt "vision" als achtergrond (de tegels) ietwat uit de lijn van de andere achtergronden
verder best goed uitgewerkt!

grz

NieLz

%Europe/Berlin %634 %2007, 16:13

klopt, ik had een te grote foto opgeladen, deze is ondertussen verkleind. dat stond maar 1minuut zo online, goeie timing heb jij ;)

-Rutger-

%Europe/Berlin %649 %2007, 16:35

Ik heb een vraag: Hoe heb jij de stretch BG gemaakt? Ik weet er geen naam voor, dus ik kon ook niet zoeken op google...
Maar even over je site: Ik houd wel van deze stijlen, mooi smooth en toch mooi crispy door de pixelfonts, heerlijk! Dat vind ik altijd erg mooie websites! Voorderest heb je volgens mij de bugs hierboven al gefixt :)

NieLz

%Europe/Berlin %670 %2007, 17:06

bg is gewoon een image, dan bij een Stage.onResize event de bgimg width en height gelijk stellen aan die van de Stage

MrPee

%Europe/Berlin %808 %2007, 20:24

dat liquid design doet het altijd goed.. schrok in het begin wel ff van die kleur groen hoor!

Bij het overgaan van de pagina's fade de bg opeens wel erg snel uit (fade in is btw wel goed),, het kan ook aan de snelheid van mn comp liggen.

Ook een pluspunt voor het logo,, ik heb hier nog niemand iets ervan horen zeggen. Het is simpel, herkenbaar en goed te lezen en helemaal leuk dat hij met de kleuren van de website mee kleurt. Ja, leuk gedaan.

Privacy Policy en terms of use rechtsonder (werken nog niet, neem aan dat dat nog komt) maar goed die hebben zo'n leuk streepje die je er onder laat verschijnen. Ik vind het wel leuk, waarom niet bij de bovenste links?

Ziet er erg goed uit!

Grt.Paul

-Rutger-

%Europe/Berlin %813 %2007, 20:31

En nog even over het logo; die is echt heel cool! Simpel en compact, maar toch mooi :)

Stretch BG:

Ik gebruik nu dit:onClipEvent (enterFrame) {
if (_width != Stage.width) {
_width = Stage.width;
}
if (_height != Stage.height) {
_height = Stage.height;
}
} Het werkt wel, maar het loopt als het ware wel een beetje achter, het resizen dan.

marcvz

%Europe/Berlin %438 %2007, 11:31

Hmm, das niet echt een fijne code Rutger.
Die loop contant, ook als het niet nodig is.

Gebruik het resize event van de stage.

stageListener.onResize = function():Void {
//veranderen van afmetingen
};
Stage.addListener(stageListener);

marcvz

%Europe/Berlin %485 %2007, 12:39

Eeyz

%Europe/Berlin %680 %2007, 17:19

Ziet er echt goed uit!:)
Heel fijn!:P

dvkarper

%Europe/Berlin %909 %2007, 22:49

Wow, dat loopt lekker soepel..

als je de site inlaad is hij binnen 2 sec. aan de honderd..!!!

terwel het wel een aardig grote website is..

Goed gedaan, veder vind ik de kleur combinatie's ook leuk..

en weer is iets anders dan een hele kleine layout..

mech7

%Europe/Berlin %924 %2007, 23:11

Wel vette site alleen vind ik de tekst een beetje onleesbaar.. het is ook niet mogelijk die groter te maken ofzo.

NieLz

%Europe/Berlin %935 %2007, 23:27

nope, pixelfont

de cases zijn intussen ook al clickable ;)

Neon

%Europe/Berlin %644 %2007, 16:27

Prima website! :D Mooi dat je nog steeds de website up to date probeert te houden. En volgens mij is hij nu helemaal af. ;)
Prima Topic heb je hiervan gemaakt. Afbeeldingen zijn lekker groot. :P
Plaatsje in de FlashFocus Showcase meer dan verdiend!

Ea.Z

%Europe/Berlin %654 %2007, 16:43

Site is dik in orde. Leuk en duidelijk. Ook leuk gespeelt met de elementen in je flash.
Enige waar ik me mateloos aan stoor zijn sites die de browser tot een fullscreenapp maken (en nog wel zonder enige reden)...

Mijn browservenvster is dan opeens 1920 x 1200 groot... Nou als je dat nodig vindt moet je het ook wel opvullen he :p maakt hier gebruike van ongeveer 1/3 van het venster, dus uiteindelijk heeft die resize geen echte toegevoegde waarde :p

Dat is mijn enige minpunt.

Gefeliciteerd met de showcase. Zeker verdiend :D

Nauzer

%Europe/Berlin %661 %2007, 16:52

Hey man,

ik moet dit topic gemist hebben ofzo :S eigenlijk best zonde, want hij is zijn ShowCase meer dan waard! :D

proficiat!

NieLz

%Europe/Berlin %748 %2007, 18:58

@ Ea.Z: hier ook 1920x1200 ;)
ik heb juist voor textuur achtergronden gekozen omdat je anders naar vlakke kleur moet staren voor mensen met een monsterresolutie.

En die ongevraagde fullscreen kan idd wel lastig zijn, mss doe ik hem wel weg ...

HoFa

%Europe/Berlin %954 %2007, 23:54

super coole site, maar idd die fullscreen is een grote no-no :)

morreke

%Europe/Berlin %126 %2007, 04:02

waarom maak je je buttons niet groter ?? ja hebt plaats zat.
Zo een gans vlak bvb. das handiger dan enkel op die fonts klikken.

NieLz

%Europe/Berlin %380 %2007, 10:07

goeie tip, thx

corqui

%Europe/Berlin %616 %2007, 15:48

Als ik muggenzifter mag zijn;
de "ë" van "België" komt er niet door; wel als je copy-paste maar je ziet ze niet staan en ziet "Belgi" in de plaats ("TMF awards"-pagina). Zal wss wel aan het lettertype liggen maarja; wou het even melden [:o)]

Voor de rest; zeer mooie site!!

Stuf

%Europe/Berlin %045 %2007, 02:05

hassebassie

%Europe/Berlin %336 %2007, 09:03

Voor schermen met een kleinere resolutie is het mogelijk dat de inhoud niet volledig wordt weergegeven. Omdat de scrollbar van browsers niet te gebruiken is in een flash website is het noodzakelijk om een scrollbar in fe flash zelf te voorzien. Deze is te importeren als een voorgedefinieerde component maar ik heb hem zelf gemaakt in de stijl van de site.

grtz NieLz ;)

Ik was al een tijd op zoek naar een tutorial voor een scrollbar al deze. Ik heb de tutorial van Kirupa al gevolgd, maar ik krijg de scrollbalk niet blijvend aan de rechterkant als ik aan het resizen ben.

NieLz

%Europe/Berlin %554 %2007, 14:18

zalige site..
ook hier een monsterresolutie.. Ik heb er geen probleem mee.. Ik vind het juist wel prettig dat het eens volledig gebruikt wordt.. :P

maar efin.. keurige site..
lekker font ook .. FFF Homepage of niet..?

nope, copy 08_55

Ik was al een tijd op zoek naar een tutorial voor een scrollbar al deze. Ik heb de tutorial van Kirupa al gevolgd, maar ik krijg de scrollbalk niet blijvend aan de rechterkant als ik aan het resizen ben.

ah bestaat er een tutorial over? nouja kheb hem zelf uitgedokterd zodat ik precies heb wat ik wil. de scrollbar._x staat gewoon op Stage.width ...

error

%Europe/Berlin %489 %2007, 12:45

Weet iemand een goeie tut voor de opbouw van dit soort sites of kan iemand mij op weg helpen hoe ik zoiets aanpak ( ben nog wel redelijk leek op gebied van AS).
Dit is echt iets waar ik al een tijdje naar op zoek was. Trouwens erg mooie site.

levud

%Europe/Berlin %516 %2007, 13:23

wat volgens mij ook niet zou misstaan is dat je bij je navigatie dezelfde rollover effecten gebruikt als bij je terms of use.

zo krijg je meer interactie in je navigatie.
echt vet deze site ( alleen jammer dat je schetsen zo onduidelijk zijn ;) )

BVG

%Europe/Berlin %975 %2007, 00:24

Man echt te mooi, echt repect hoe je de kleur mooi in alles treug heb laten komen. ook is de scroll voor kleinere monitoren slim en handig. Veder... Hoe kom je aan die achtergrondjes [^] [:O] (ik denk "gewoon" foto's)

NieLz

%Europe/Berlin %423 %2007, 11:09

BVG

%Europe/Berlin %875 %2007, 22:01

Nog een keer... (die site)

- Hoe kan het dat als je daar inlogt met je account (als dat al gaat, gaat vaak niet)
dat je dan andere reslutaten krijgt dan als je niet inlogt !?!
- Heb jij problemen met inloggen ?

Ik wil echt dingen daar kopen, maar dat gaat dus niet als ik niet/nouwelijks kan inloggen en andere resluteten krijg. Neem als voorbeeld dat als je op abstract->general klikt dan krijg je hele vette reslutaten maar als je inlogt dan heb je echt andere resultaten ! (zelfde dus abstract->general)

dchdesign

%Europe/Berlin %124 %2007, 03:58

Hmm, das niet echt een fijne code Rutger.
Die loop constant, ook als het niet nodig is.

Gebruik het resize event van de stage.

stageListener.onResize = function():Void {
//veranderen van afmetingen
};
Stage.addListener(stageListener);

ik ben een beginner, waar moet dat precies gezet worden?
en wat een site, hoop dat ik ook zo goed wordt.

NieLz

%Europe/Berlin %500 %2007, 13:01

dat zet je gewoon in de root

NieLz

%Europe/Berlin %456 %2007, 11:57