Geplaatst op

Maak Air France responsive

Voor Air France ontwerp en bouw je  een nieuwe website. Je maakt de site voor 2 verschillende schermresoluties. 

Download de volledige opdracht als pdf: opdracht1 webdesign

Deze opdracht is in de les met een korte schermpresentatie toegelicht. Hieronder vind je de bijbehorende links:

Geplaatst op

[web] 1e jaar periode 4

Opdrachten periode 4

In periode 4 van het 1e jaar maak je voor het vak webdesign minimaal 2 websites. Deze periode richten we ons voornamelijk op vormgeving en visuele communicatie. We werken aan losse opdrachten. De opdrachten die je in de les uitvoert tellen  voor 70% mee voor het het cijfer van periode 4. De toets in de toetsweek voor 30%. Als je alle opdrachten hebt gemaakt, dan zou de toets aan het einde geen probleem mogen zijn. De 1e opdracht wordt hier beschreven. “[web] 1e jaar periode 4” verder lezen

Geplaatst op

Opdracht periode 3 | klas MV42c

De indeling van een krantensite vernieuwen.

Klas MV42C

periode 3 opdracht 1

tijdsduur: 4 weken

Voor deze opdracht neem je een van de onderstaande sites als uitgangspunt.

  • nu.nl
  • nrc.nl
  • telegraaf.nl

Je gaat de voorpagina van een van deze sites opnieuw indelen. Alle onderdelen die nu op de site staan moeten in jouw ontwerp ook terugkomen. Voor de beoordeling van je werk is het belangrijk dat je de onderstaande volgorde aanhoudt bij het maken van de opdracht.

Wireframe

Je maakt minimaal 2 wireframes die duideijk van elkaar verschillen. Een wireframe is een schematische weergave van de verschillende onderdelen op de site: waar komt het menu, waar staat het logo, waar staat het belangrijkste nieuws, waar de advertenties enz. Alles wat zou kunnen afleiden laat je weg: Er staat geen inhoud in. Ook pas je nog geen vormgeving toe.

Laat je wireframes beoordelen.

Ontwerp

Daarna maak je een uitgewerkt ontwerp in bijvoorbeeld photoshop of illustrator.

Laat je ontwerp beoordelen.

Beschrijvende markup

Bouw de pagina in html en css. Gebruik beschrijvende markup, bijvoorbeeld voor de belangrijkste kop <h1></h1> of voor een alinea <p></p>

Voor een overzicht van de elementen zie  http://www.webmonkey.com/2010/02/html_cheatsheet/ of http://www.webmonkey.com/2010/02/html_cheatsheet/

Laat je code beoordelen

Geplaatst op

Art direction en vormgeving

Hier volgt de gedeeltelijke vertaling van een artikel van Dan Mall over art direction en vormgeving. Kort samengevat: het één gaat over denken over vormgeving, het ander over het toepassen van vormgeving.
bron: http://www.alistapart.com/articles/art-direction-and-design/

Verschillen tussen art direction en vormgeving
Gereedschap vormgeving
Kleur Past het kleurenschema bij de identiteit van het merk? Is het geschikt voor de gelegenheid? Heldere kleuren passen misschien niet bij een droevig bericht. Zien de kleuren er samen goed uit? Conflicteren ze? Is iedere gebruikte kleur het beste voor het medium, bijvoorbeeld, Pantone swatch voor print, web-veilig voor web?
Typografie Wat is de gevoelswaarde van een lettertype? Hoe brengen de lettervormen een boodschap over, zonder de betekenis van de woorden? Comic Sans is een beetje belachelijk, maar Helvetica misschien te glad. Geven de verschillende lettergroottes die ik gebruik genoeg visuele informatie over de rangorde binnen de tekst?
Compositie Hoe evenwichtig moet de compositie zijn? Evenwichtige composities zijn aangenaam maar vaak passief. Onevenwichtige composities zijn vaak ongemakkelijk en onrustig, maar wel aantrekkelijker voor het oog. Gebruik ik gelijke marges? Is  er een natuurlijk ritme in de beeldelementen zodat de blik vanzelf over het beeld gaat?
Concept Hoe ondersteunen en benadrukken de beeldelementen de gevoelswaarde van het merk? Wat is de boodschap of het verhaal van de ontwerpelementen? Worden de richtlijnen (stijlhandboek) van het merk gevolgd . Denk aan logo spacing, typografie, kleurenschema
Over het geheel Voelt het goed? Ziet het er goed uit?
Geplaatst op

WordPress voor mobiel

Ontwerpen voor mobiel is meer dan even je CSS aanpassen en klaar is Kees…

Carrington-mobile is een handig uitgangspunt als je de eerste mobiele versie van je Worpress site wilt maken. Content die op een klein scherm niet handig of in verband met lagere downloadsnelheden zelfs irritant is, wordt uit de reguliere site gestript.

Al met al worden daarmee de laadtijden weer acceptabel en heb je een interface die geschikt is voor een klein scherm.

Geplaatst op

[web] 2e jaar – periode 1

Redesign van een bestaande website

Structuur aanbrengen in je ontwerpproces
Het ontwerpproces vormt het hoofdbestanddeel van deze opdracht. Werk de onderstaande onderdelen uit en maak hiervan een verslag. Hierin verwerk je ook je schetsen en alle andere niet-tekstuele onderdelen. Dit verslag en je site lever je in. Je kiest zelf welke technieken je gebruikt. “[web] 2e jaar – periode 1” verder lezen