Design bij Concept7 c7 open dag

Webdesign bij concept7

Geoffrie Hoiting

Even voorstellen...• Geoffrie (3x woordwaarde bij Scrabble) Hoiting

• Communication & Multimediadesign

• Freelancer -> Concept7

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Waar gaan we het over hebben?

• Rol als designer binnen Concept7

• Werkwijze

• Voorbeelden

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Onze rol binnen het traject

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk?

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

• Inlezen / IO doornemen

• Huisstijl verzamelen

• Op zoek naar signature elements

• Photoshop, creatief doen, finetunen

• Presenteren

• html/css/javascript

Hoe gaan we(ik) te werk?

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Huisstijl verzamelen

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Op zoek naar ‘signature elements’

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Photoshop, basis opzettenCreatief doen

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Finetunen

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

• Performance

• Werken met sprites

HTML

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Sprites

• Performance

• 4KB overhead

• 49 x 4 = 196KB

• 1 x 4 = 4KB

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

• Één CSS

• Javascript

Design keuzes en browser support

HTML

• Performance

• Werken met sprites

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elements’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

Hoe gaan we(ik) te werk

• Huisstijl verzamelen

• Op zoek naar ‘signature elemens’

• Basis opzetten en creatief doen

• Finetunen en accenten leggen

• Design presenteren

• Eventueel html opleveren

That’s all folks!Vragen?