PetraRoest http://www.petraroest.nl Webdesign & Grafisch Ontwerp Mon, 06 Feb 2012 13:35:01 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Tien nuttige usability richtlijnen http://www.petraroest.nl/2012/02/tien-nuttige-usability-richtlijnen/ http://www.petraroest.nl/2012/02/tien-nuttige-usability-richtlijnen/#comments Mon, 06 Feb 2012 10:15:12 +0000 Petra http://www.petraroest.nl/?p=1674 Één van mijn favoriete websites over webdesign is Smashing Magazine. Vandaag las ik daar een artikel over website usability. Website usability is het gebruiksvriendelijk maken van uw website. Bezoekers kunnen hierdoor gemakkelijk vinden waar ze naar op zoek zijn en de geboden informatie sluit aan op hun vragen en behoeften. Smashing Magazine heeft 10 nuttige richtlijnen geformuleerd.

  1. De titels van invoervelden in een online formulier kunnen beter boven de invoervelden staan. En niet dus links, zoals je op veel websites ziet;
  2. Bezoekers richten zich vooral op gezichten;
  3. Je site is geloofwaardiger als je een kwalitatief goed ontwerp hebt;
  4. De meeste bezoekers scrollen wel;
  5. Blauw is de beste kleur voor links (en ja, ik weet dat ze op mijn website rood zijn ;-) ;
  6. Het ideale zoekveld is 27 karakters lang;
  7. Witruimte op je site verhoogd de begrijpelijkheid van je site;
  8. Effectieve gebruikerstesten hoeven niet heel uitgebreid te zijn;
  9. Informatieve productpagina’s zorgen ervoor dat je opvalt;
  10. De meeste bezoekers zien advertenties over het hoofd.

Ga vooral even naar de Smashing Magazine website om het hele artikel te lezen

]]> http://www.petraroest.nl/2012/02/tien-nuttige-usability-richtlijnen/feed/ 1 Hoe bekijkt een gemiddelde bezoeker een website http://www.petraroest.nl/2012/02/hoe-bekijkt-een-gemiddelde-bezoeker-uw-website/ http://www.petraroest.nl/2012/02/hoe-bekijkt-een-gemiddelde-bezoeker-uw-website/#comments Sun, 05 Feb 2012 11:44:12 +0000 Petra http://www.petraroest.nl/?p=1637 Hoe bekijkt een gemiddelde bezoeker een website? Hier is uitgebreid onderzoek naar gedaan, zogenaamd ‘Eyetracking ‘. Eyetracking onderzoekt de oogbewegingen van bezoekers tijdens het surfen op uw website. Het geeft direct helder inzicht in het kijkgedrag en maakt duidelijk wat mensen wel en niet zien. Op onderstaande foto kun je zien op drie verschillende websites zien welke gebieden veel aandacht krijgen en welke minder of zelfs helemaal niet.

De rode gebieden kregen verreweg de meeste aandacht. De gele gebieden moesten het doen met wat minder aandacht. De blauwe kregen nog minder aandacht en de grijze gebieden kregen zelfs helemaal geen aandacht. Hieruit is te concluderen dat hoe meer bezoekers naar beneden scrollen, hoe minder aandacht de content krijgt en er vooral gescand wordt.

In een van de onderzoeken is een twaalftal regels voor websites opgesteld:

  1. Headlines krijgen eerder aandacht dan plaatjes;
  2. Bezoekers scannen de eerste woorden van headlines;
  3. Bezoekers scannen de linker kant van een lijst met headlines;
  4. Je headline moet de aandacht naar zich toetrekken in minder dan een seconde;
  5. Een kleiner lettertype zorgt ervoor dat bezoekers aandachtiger gaan lezen;
  6. Een navigatie werkt het beste bovenaan een website;
  7. Korte paragrafen wordt sneller gelezen;
  8. Een paragraaf ter introductie worden veel gelezen;
  9. Advertentie banners kunnen het beste bovenaan en aan de linker kant geplaatst worden;
  10. Bezoekers zien een banner sneller als deze bij veel gelezen content geplaatst worden;
  11. Mensen lezen tekstadvertenties meer dan banners;
  12. Indien een onderwerp onbekend is en uitgelegd moet worden, dan werkt multimedia beter dan tekst.

Hieronder nog een interessante video over het kijkgedrag van je bezoekers

Watch this video on YouTube.

 

 

 

 

]]> http://www.petraroest.nl/2012/02/hoe-bekijkt-een-gemiddelde-bezoeker-uw-website/feed/ 0 Advertentie in cultuur en reismagazine Relax in http://www.petraroest.nl/2011/10/advertentie-in-cultuur-en-reismagazine-relax-in/ http://www.petraroest.nl/2011/10/advertentie-in-cultuur-en-reismagazine-relax-in/#comments Tue, 04 Oct 2011 15:27:51 +0000 Petra http://www.petraroest.nl/?p=1602 Reisbureau Maroc Travel heeft in september 2011 in het cultuur en reismagazine Relax gestaan met een 2-pagina grote advertentie. Maroc Travel heeft mij gevraagd deze advertentie te ontwerpen. Ze waren erg tevreden met het resultaat.


 

 

]]> http://www.petraroest.nl/2011/10/advertentie-in-cultuur-en-reismagazine-relax-in/feed/ 0 Website voor Gorcumse Jongerenvereniging An-Nour http://www.petraroest.nl/2011/10/website-voor-gorcumse-jongerenvereniging-an-nour/ http://www.petraroest.nl/2011/10/website-voor-gorcumse-jongerenvereniging-an-nour/#comments Sat, 01 Oct 2011 14:57:28 +0000 Petra http://www.petraroest.nl/?p=1561 Onlangs werd in benaderd door een zuster uit Gorinchem. Zij wilde graag een website voor de jongerenvereniging waar zij lid van is. Samen hebben we een mooie website ontwikkeld in Joomla. Hierdoor kunnen de vrijwilligers de website zelf gemakkelijk beheren.

Gorcumse Jongerenvereniging An-Nour bestaat uit vrijwilligers die zich inzetten om mensen te begeleiden in hun zoektocht naar de Islam. We organiseren diverse activiteiten die een bijdrage leveren aan het ontwikkelen van kennis en verdieping in de Islam en die ons Ummah in Gorinchem en omstreken samen brengen. 

 

 

 


 

 

]]> http://www.petraroest.nl/2011/10/website-voor-gorcumse-jongerenvereniging-an-nour/feed/ 0 Internationale website voor Reisbureau Maroc Travel http://www.petraroest.nl/2011/09/internationale-website-voor-reisbureau-maroc-travel/ http://www.petraroest.nl/2011/09/internationale-website-voor-reisbureau-maroc-travel/#comments Fri, 16 Sep 2011 15:05:09 +0000 Petra http://www.petraroest.nl/?p=1580 De Nederlandse website voor Reisbureau Maroc Travel heb ik begin vorig jaar gemaakt. Maroc Travel heeft ook een vestiging in Marrakech, Marokko en richt zich naast de Nederlandse markt ook op internationale markt. Mij werd gevraagd een Engelstalige website te ontwikkelen. In plaats van een geheel nieuw ontwerp te maken, hebben we ervoor gekozen om een bestaande template aan te passen naar de wensen van Maroc Travel. De website is ontwikkeld in Joomla.

]]> http://www.petraroest.nl/2011/09/internationale-website-voor-reisbureau-maroc-travel/feed/ 0 Website met antwoorden op vragen over de Islam http://www.petraroest.nl/2011/06/website-met-antwoorden-op-vragen-over-de-islam/ http://www.petraroest.nl/2011/06/website-met-antwoorden-op-vragen-over-de-islam/#comments Sun, 26 Jun 2011 15:13:39 +0000 Petra http://www.petraroest.nl/?p=1586 Is de Islam verspreid met het zwaard? Klopt het dat de Islam de vrouw onderdrukt door haar te verbergen achter een sluier? Wat is de Sharie’ah? Wat zegt de Islam over Jezus? Wie is de profeet Mohammad en wat was zijn boodschap? Onlangs werd ik gevraagd om een website te ontwikkelen die door middel van de Qoer-aan en de authentieke overleveringen van de profeet Mohammad probeert een antwoord te geven op deze en vele andere vragen over de Islam. De website is opgeleverd in WordPress.

 


 

 

 


 

 

 

 

]]> http://www.petraroest.nl/2011/06/website-met-antwoorden-op-vragen-over-de-islam/feed/ 0 Website voor eenmanszaak Dick van Belen http://www.petraroest.nl/2011/03/website-voor-dick-van-belen/ http://www.petraroest.nl/2011/03/website-voor-dick-van-belen/#comments Mon, 28 Mar 2011 09:26:46 +0000 Petra http://www.petraroest.nl/?p=1440 Onlangs heb ik website mogen maken voor de eenmanszaak van Dick van Belen. Na ruim 12 jaar kennis en ervaring te hebben opgedaan in de Grond Weg en Waterbouw en 2 jaar binnen de milieubranche heeft Dick besloten om een eenmanszaak te starten. Ik ben vervolgens gevraagd om hiervoor de website te maken. De website is geheel in huisstijl opgeleverd in WordPress.

]]> http://www.petraroest.nl/2011/03/website-voor-dick-van-belen/feed/ 0 HTML tags overzicht http://www.petraroest.nl/2011/02/html-overzicht/ http://www.petraroest.nl/2011/02/html-overzicht/#comments Mon, 14 Feb 2011 08:01:26 +0000 Petra http://www.petraroest.nl/?p=1380 HTML is een opmaaktaal. Door middel van HTML-instructies kunnen aan een website kleuren, afbeeldingen en hyperlinks worden toegevoegd. Deze instructies worden door middel van markeringen (tags) op de pagina aangebracht.

Het opmaken van een webpagina kunt u vergelijken met het opmaken van bijvoorbeeld een Word-document. Wanneer u in de tekstverwerker Word een tekst schrijft, kunt u bijvoorbeeld besluiten sommige woorden vet te maken of te onderstrepen. Tevens kunt ervoor kiezen bepaalde delen tekst in een andere of grotere letter weer te geven.

Hieronder staat een handige lijst met de meest gebruikte HTML tags die ik zelf ook gebruik als mijn mijn websites ontwikel.

Basis Tags
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn’t displayed on the web page itself
<body></body> Sets off the visible portion of the document

Body Attributes
<body bgcolor=”pink”> Sets the background color, using name or hex value
<body text=”black”> Sets the text color, using name or hex value
<body link=”blue”> Sets the color of links, using name or hex value
<body vlink=”#ff0000″> Sets the color of followed links, using name or hex value
<body alink=”#00ff00″> Sets the color of links on click

Tekst Tags
<pre></pre> Creates preformatted text
<hl></hl> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriter-style text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size=”3″></font> Sets size of font, this can be set from 1 to 7
<font color=”green”></font> Sets font color, using name or hex value

Links
<a href=http://www.yourlink.com></a> Creates a hyperlink
<a href=mailto:name@yourdomain.com></a> Creates a mailto link
<a href=”URL”><img src=”images/yourimage.gif”> </a> Creates an image/link
<a name=”NAME”></a> Creates a target location within a document
<a href=”#NAME”></a> Links to that target location from elsewhere in the document

Formatting
<p></p> Creates a new paragraph
<p align=”left”> Aligns a paragraph to the left (default), right, or center.
<br> Inserts a line break
<blockquote></blockquote> Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<ul></ul> Creates a bulleted list
<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected
<div align=”left”> A generic tag used to format large blocks of HTML, also used for stylesheets
<img src=”name”> Adds an image
<img src=”name” align=”left”> Aligns an image: left, right, center; bottom, top, middle
<img src=”name” border=”1″> Sets size of border around an image
<hr /> Inserts a horizontal rule
<hr size=”3″ /> Sets size (height) of rule
<hr width=”80%” /> Sets width of rule, in percentage or absolute value
<hr noshade /> Creates a rule without a shadow

Tables
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)

A simple table will look like this:

<table border=”1″ width=”100%” id=”table1″>
<tr>
<td>This is cell 1 in the 1st row</td>
<td>This is cell 2 in the 1st row</td>
</tr>
<tr>
<td>This is cell 1 in the 2nd row</td>
<td>This is cell 2 in the 2nd row</td>
</tr>
</table>

Table Attributes
<table border=”1″> Sets width of border around table cells
<table cellspacing=”1″> Sets amount of space between table cells
<table cellpadding=”1″> Sets amount of space between a cell’s border and its contents
<table width=”500″ or “80%”> Sets width of table, in pixels or as a percentage of document width
<tr align=”left”> or <td align=”left”> Sets alignment for cell(s) (left, center, or right)
<tr valign=”top”> or <td valign=”top”> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan=”2″> Sets number of columns a cell should span (default=1)
<td rowspan=”4″> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit

Frames
<frameset></frameset> Replaces the <body> tag in a frames document; can also be nested in other framesets
<frameset rows=”value,value”> Defines the rows within a frameset, using number in pixels, or percentage of width
<frameset cols=”value,value”> Defines the columns within a frameset, using number in pixels, or percentage of width
<frame> Defines a single frame — or region — within a frameset
<noframes></noframes> Defines what will appear on browsers that don’t support frames

Frames Attributes
<frame src=”URL”> Specifies which HTML document should be displayed
<frame name=”name”> Names the frame, or region, so it may be targeted by other frames
<frame marginwidth=”value”> Defines the left and right margins for the frame; must be equal to or greater than 1
<frame marginheight=”value”> Defines the top and bottom margins for the frame; must be equal to or greater than 1
<frame scrolling=”value”> Sets whether the frame has a scrollbar; value may equal “yes,” “no,” or “auto.” The default,
as in ordinary documents, is auto.
<frame noresize=”noresize”> Prevents the user from resizing a frame

Forms
HTML only takes care of the look and feel of a form. If you want a working form, you will need to add a script to your code.

<form></form> Creates all forms
<select multiple name=”NAME” size=?></select> Creates a scrolling menu. Size sets the number of menu items visible
before you need to scroll.
<option> Sets off each menu item
<select name=”NAME”></select> Creates a pulldown menu
<option> Sets off each menu item
<textarea name=”NAME” cols=40 rows=8></textarea name> Creates a text box area. Columns set the width; rows set
the height.
<input type=”checkbox” name=”NAME”> Creates a checkbox. Text follows tag.
<input type=”radio” name=”NAME” value=”x”> Creates a radio button. Text follows tag
<input type=”text” name=”NAME” size=20> Creates a one-line text area. Size sets length, in characters.
<input type=”submit” value=”NAME”> Creates a Submit button
<button type=”submit”>Submit</button> Creates an actual button that is clicked
<input type=”image” border=0 name=”NAME” src=”name.gif”> Creates a Submit button using an image
<input type=”reset”> Creates a Reset button

]]> http://www.petraroest.nl/2011/02/html-overzicht/feed/ 0 It’s the Season of Love! http://www.petraroest.nl/2011/02/it%e2%80%99s-the-season-of-love/ http://www.petraroest.nl/2011/02/it%e2%80%99s-the-season-of-love/#comments Sun, 13 Feb 2011 07:07:29 +0000 Petra http://www.petraroest.nl/?p=1346 Ok, ik denk niet dat het een verassing is wat het onderwerp is vandaag. Nog Maar 24 uur en dan is het Valentijnsdag!
Heb je je valentijnskaart al geschreven? Of nog beter; heb je je online liefdesverklaring al gemaakt? Onderstaande fonts kunnen je hier in ieder geval bij helpen. Prettige Valentijnsdag!

1. Heartland

2. Love Letters

3. MC Sweetie Hearts

4. Love & Passion

5. LMS School Girl Crush

6. Times New Romance

7. Jules Love

8. Craftopia Love

9. Red Honey

10. Words of Love

Conroleer alsjeblieft of je bovenstaande fonts gratis mag gebruiken.

]]> http://www.petraroest.nl/2011/02/it%e2%80%99s-the-season-of-love/feed/ 1 Inspiratie voor het kiezen van een kleur voor een website http://www.petraroest.nl/2011/02/kleur-inspiratie/ http://www.petraroest.nl/2011/02/kleur-inspiratie/#comments Fri, 11 Feb 2011 15:37:54 +0000 Petra http://www.petraroest.nl/?p=1338 In mijn vorige bericht schreef ik hoe belangrijk het is om de juiste kleur te kiezen voor een website. Onlangs vond ik een website die een grote bron van inspiratie voor mij is. Ik vind het heerlijk om nieuwe kleuren combinaties te bekijken en toe te passen.

Adobe Kuler is een gratis app van Adobe Systems die je in staat stelt om kleurenschema’s te maken. Het leuke is, is dat de website ook een community is. Je kunt je gegenereerde kleurenschema’s delen met andere leden. Als je een schema mooi vindt, kun je een account aanmaken om deze te downloaden.

Watch this video on YouTube.

Watch this video on YouTube.

En jij, heb jij zelf ook websites die een grote bron van inspiratie zijn?

 

]]> http://www.petraroest.nl/2011/02/kleur-inspiratie/feed/ 0