Hoe ontwerp je een website, deel 2

zondag, 07 oktober 2012 | door +Sigrid de Jong | Geen reacties » |

 

Dit is een verbetering van het vorige artikel, dat wil zeggen ik heb een paar stappen vooral in het begin die het ontwerpen beter en handiger maken.

  1. Besluiten dat je een website wilt, wat wil je er mee en waarom, wat is je doel. Dat gaat meestal vanzelf anders begin je er niet aan.
  2. Brainstormen. Wat moet er allemaal in en op staan? wat moet je er mee kunnen? hoe moet hij er straks uit gaan zien enz. Je kunt informatie gaan verzamelen, je kunt gaan kijken naar voorbeeldsites: tip blijf niet te lang kijken, je verzand dan in wat andere mensen hebben gemaakt en het kan gebeuren dat je nergens toe komt. Soms moet je gwoon af en toe een paar dagen wachten op inspiratie.
  3. Schetsen op papier. Nee niet op de computer, op papier ben je vrijer en kun je alle kanten op. Je wordt niet beperkt of een bepaalde kant op geduwd door het systeem je wordt niet afgeleid door email en facebook… en het gaat veel snelle. Mak schetsen van de layout (hoe de website eruit ziet) en een functioneel ontwerp, welke pagina’s erin zitten en in welke structuur, wat er gebeurt als je op x klikt.
  4. Teken de layout op ware grootte in het net. Ik heb op een A4-tje een bepaalde maat voor 960 pixels genomen en de rest daar op afgesteld. met lineaal getekend en potloden en stiften gekleurd.
  5. Scan de tekening en open hem in Photoshop.
  6. Maak in Photoshop allemaal lagen, voor elk onderdeel/hokje/divje een. De onderste laag is de gescande tekening. Maak de site in photoshop zoals je hem wilt hebben. Je maakt de lay-out dus in photoschop in lagen.
  7. Maak nu het ontwerp in 1 HTML pagina, met in de header van de site tussen de style tags: <style> en </style> de css. Bekijk de site regelmatig in je browser.
  8. Teverden over de lay-out in HTML en CSS? Splits de pagina in een html deel en noem dat index.php en in een stylepagina: style.css.
  9. Maak er nu een wordpress thema van, zet de wordpres codes in de pagina. maak eventueel meerdere bestanden zoals header.php en sidebar.php.
  10. Installeer WordPress op je domein.
  11. Installeer je thema: upload je thema naar de themes map onder wp-content op je website. Ga naar weergave en themes, kies daar je eigen thema en activeer die en klaar is Klara.
  12. Bewaar de tips, ideeën  codes, trucks enz die je onderweg hebt moeten op zoeken en gevonden hebt zodat je die de volgende keer niet op hoeft te zoeken.

Voor de stap van het in het net tekenen, scannen en in photoshop maken waren me de laatste keer goed bevallen. Door de gescande tekening had ik in photoshop een houvast en door eerst in photoshop te werken zag ik direct hoe het er uit ging zien. Met HTML en CSS type je eerst code en bekijk je die daarna, je ziet dan niet meteen hoe het wordt, waardoor ik langer bezig ben.


Begin reactie formulier

Reageer:




Heldere Ster | © 2010-2012 door +Sigrid de Jong, Alle rechten voorbehouden. |