Stappen om tot een design te komen

[maniak]

Werd vriendelijk verzocht er een nieuwe topic van te maken, dus hierbij mijn topic

Ik ben al bijna 15 jaar in dienst als ontwikkelaar. In die periode heb ik veel designs moeten realiseren. Ik heb wel eens geprobeerd om een website voor mezelf te maken maar ik kom niet verder dan een bestaand ontwerp wat aan te passen voor eigen gebruik.

Nu wil ik zelf een een design maken vanaf het begin, dus vanaf een leeg wit blad. Maar eerlijk gezegd, ik zou niet weten waar te beginnen.

Mijn vraag is dan ook, welke stappen doorloopt een designer om van een leeg wit scherm tot een mooi design te komen? En welke tools worden hierbij vaak gebruikt? Zijn er opleidingen en trainingen waar je dit kan leren? Of moet je het gewoon "in je" hebben om een goede designer te worden?

[3DDude]

Ben zelf geen designer*
Maar ik zou beginnen bij het doel van de site? informeren? overhalen iets te kopen?
zakelijk? hobby?
Daarna welk cms hang je erachter?

[ Voor 13% gewijzigd door 3DDude op 13-07-2014 19:53 ]

[Jesserr]

Niet dat ik een designer ben, maar volgens mij denk je er verkeerd over na (ik kan het even niet aardiger verwoorden, maar het is niet onaardig bedoeld in ieder geval).

Als designer heb je natuurlijk een klant. Die klant heeft bepaalde wensen, eisen, voorkeuren, etc. In dit geval ben je zelf de klant. Je moet dus aan jezelf vragen stellen als: wat zijn mijn wensen, eisen etc, qua bijvoorbeeld kleuren, hoeveelheid informatie, soort design (ik houd van kleurig/formeel/strak/minimalistisch). Daarnaast zoals hierboven ook gezegd wordt: wat is het doel van de site, wat moet de bezoeker in ieder geval meteen zien/opvallen als hij aankomt op de website? Wat moet er nog meer te zien zijn?

Door dit soort vragen te beantwoorden kom je denk ik al een heel eind wat betreft de te nemen stappen voor een design.

[maniak]

Het gaat me niet zozeer om over specs, dat weet ik wel. Maar hoe kom je tot bepaalde kleuren en visuals die dan ook nog smoelen.

[Jesserr]

Ik denk dat dat ook veel klantgebaseerde keuzes zijn.

Je kunt wel goed inspiratie opdoen op deze pagina: kuler.adobe.com

Daarbij blijft het alsnog natuurlijk een kwestie van smaak en een kwestie van een keuze maken.

[duckyvite]

Nog een niet-designer:

- Wat ga ik allemaal weergeven?
- Hoeveel moet ik direct zien / wat mag achter een knop/tabblad?

Hoeveel ruimte gebruik je voor die elementen, hoe kun je die verwerken met sexy dingetjes die de site aantrekkelijk maken.

Om de sexy dingetjes te maken: vraag een vriend / kijk op internet rond voor inspiratie

[maniak]

Ik snap het rationele allemaal prima, specs opstellen, wat wil ik weergeven, enz.. Maar een PSD komt niet zomaar uit de lucht vallen. Er zit wat tussen het bepalen en vaststellen van de specs en de uiteindelijke PSD die een developer moet realiseren.

[webdavid]

Ik vind dit zelf ook moeilijk.

Voor kleuren kijk ik nog wel eens op: http://www.colorcombos.com/

Je moet gaan denken over wat je de klant wilt laten zien en hoe je dit wilt laten zien. Ik vind het altijd makelijk om eerst een grid te maken en dit op papier te tekenen. Daarnaast een blaadje met wat je de klant wilt vertellen. En dan bepalen waar je wat wilt zeggen.

Hoop dat dit helpt,

Veel succes!

[incaz]

Maniak, ik heb geen tips maar weet wel dat je niet de enige bent. Ik kan het ook echt niet. Ik kan wel zien wat ik mooi vind, en ik kan de dingen best aanpassen omdat ik weet waarom iets werkt of niet, maar uit het niets iets maken... ik vind het moeilijk.

[maniak]

incaz schreef op zondag 13 juli 2014 @ 21:59:
Maniak, ik heb geen tips maar weet wel dat je niet de enige bent. Ik kan het ook echt niet. Ik kan wel zien wat ik mooi vind, en ik kan de dingen best aanpassen omdat ik weet waarom iets werkt of niet, maar uit het niets iets maken... ik vind het moeilijk.

Erg he.. Ik kan feilloos problemen aanstippen in een design of tips geven. Maar om zelf met een orgineel design te komen.. Dit moet je toch ergens kunnen leren? Ik zal er misschien nooit een ster in worden, maar nu komt er niets uit mijn handen en dat frustreerd me.

[Verwijderd]

maniak schreef op zondag 13 juli 2014 @ 23:52:
[...]


Erg he.. Ik kan feilloos problemen aanstippen in een design of tips geven. Maar om zelf met een orgineel design te komen.. Dit moet je toch ergens kunnen leren? Ik zal er misschien nooit een ster in worden, maar nu komt er niets uit mijn handen en dat frustreerd me.

Bekijk website Y en bedenk wat jij er mogelijk aan zou kunnen verbeteren.

Practice makes perfect. Iedereen heeft voorbeelden nodig. Uiteindelijk zal je na veel oefenen je eigen draai erin gaan vinden en je eigen designs maken.

Vooral studies volgen op internet kan je wegwijs maken. Usability is 1 in design. Dat zelfs een aap met jouw ontwerp aan de gang kan op internet.

[HenkEisDS]

Nou zal ik dan maar de eerste praktische tip geven: je begint met een wireframe.
Wikipedia: Website wireframe

[Misha]

Even in vogelvlucht:

Ik pak een hoop post it's erbij en ga eerst de site daarop uitwerken. Per post it staat iets dat ik wil communiceren of iets dat ik wil dat de gebruiker doet. Per pagina mogen er meerdere post it's zijn, maar wees er kritisch op.

Als je ze vervolgens achter elkaar plakt, dan heb je al een redelijk goed inzicht in hoe de site zou moeten werken.

Vervolgens pak ik Axure erbij, maak ik daar alle lege pagina's in en ga schetsen. Ik houd alles zwart/grijs/wit, ik wil me nog niet druk maken over kleuren. Ook alle teksten zijn lorem ipsums. Zodra ik tevreden ben over de wireframe, doe ik twee dingen :

Of ik werk hem verder uit in Axure en ga daar in designen, bijvoorbeeld als ik een goed prototype wil maken omdat ik twijfel of het allemaal wel lekker werkt (het prototype neem je weer mee in een User study)
Of ik pak Sketch erbij en ga het ontwerp definitief maken. Bedenk welke emotie ik wil uitdragen, welke kleuren ik daarvoor moet gebruiken, welke fontsize goed werkt, welk lettertype etc etc

Die laatste 2 stappen stel ik altijd zo lang mogelijk uit. Het is contraproductief om daar al vroeg mee te starten

[NNF]

Een website ontwerpen (= het visualiseren van een idee) en ontwikkelen (= het uitwerken van een visueel ontwerp) zijn dan ook hele verschillende dingen. Daarom bestaan er ontwikkelaars en ontwerpers. Deels kun je het misschien leren maar grotendeels moet je er ook gewoon talent voor hebben. Ik kan ook prima een uitgewerkt ontwerp nabouwen (en op punten verbeteren), maar als je mij vraagt om een ontwerp from scratch te maken dan zit ik uren te prutsen en eindig ik meestal met iets dat eruit ziet alsof ik zojuist het met mijn DeLorean heb opgehaald uit 1993 Terwijl wij designers in dienst hebben die in een paar uur een prachtig ontwerp uit de grond stampen, ze kunnen het alleen niet bouwen.

Het gros van de mensen die zich 'webontwikkelaar' noemt komt ook echt niet verder dan het op punten aanpassen van een bestaand design. Daarom zijn WordPress en Bootstrap zo populair en zijn er zoveel websites die op elkaar lijken. Mensen die het allebei heel erg goed kunnen zijn vrij zeldzaam.

Dat gezegd hebbende: er zijn natuurlijk wel wat kleine dingetjes die je kunt doen om iets er 'professioneler' uit te laten zien. Gebruik bijvoorbeeld een niet-standaard lettertype (dus geen Arial, Times, etc.), gebruik ruime marges/padding, werk met grijstinten i.p.v. keihard zwart, gebruik kleuren die elkaar aanvullen. Maar ook dat is allemaal zoveel makkelijker als je er aanleg voor hebt.

[ Voor 16% gewijzigd door NNF op 14-07-2014 09:03 ]

[maniak]

dat eruit ziet alsof ik zojuist het met mijn DeLorean heb opgehaald uit 1993

Oke.. ik moest even lachen hier.

Ik ben erg blij dat mensen toch hun ervaring/werk proces will delen. Geeft mij, en ik hoop anderen, ook de nodige tips.

[Tom]

maniak schreef op zondag 13 juli 2014 @ 19:49:

Nu wil ik zelf een een design maken vanaf het begin, dus vanaf een leeg wit blad. Maar eerlijk gezegd, ik zou niet weten waar te beginnen.

Mijn vraag is dan ook, welke stappen doorloopt een designer om van een leeg wit scherm tot een mooi design te komen? En welke tools worden hierbij vaak gebruikt? Zijn er opleidingen en trainingen waar je dit kan leren? Of moet je het gewoon "in je" hebben om een goede designer te worden?

In principe is er nooit een leeg blad, voordat je gaat ontwerpen zou er al een interactie ontwerp (wireframe) moeten liggen. Ik combineer het meestal, maar dan heb ik in m'n hoofd al een idee hoe de interactie moet plaatsvinden.
Je weet dus welke elementen er op het scherm staan, (grofweg) waar ze staan en hoe ze werken. Dat ga je een grafische invulling geven.

Dat proces is moeilijk uit te leggen. Het is gevoel voor balans, kleuren en typografie wat je moet hebben. Veel proberen en steeds verder verbeteren tot er iets staat wat "klopt". Of dat echt te leren is weet ik niet. Je kunt er wel beter door worden door veel naar andere zaken te kijken. Dat hoeven geen websites te zijn. Ik haal m'n inspiratie uit allerhande zaken die ik zie.

Staar je niet blind op tools. Mensen die denken dat je alleen met de nieuwste en meest uitgebreide versie van Photoshop een goed ontwerp kunnen maken hebben het niet begrepen. Pak een tool die voor jou fijn werkt. Uiteindelijk is het een set met pixels die een bepaald kleurtje hebben, niet meer dan dat.

[maniak]

Tips zoals http://www.colorcombos.com/ zijn wel erg handig voor mensen zoals ik. Tevens begrijp ik dat velen gebruik maken van een foto/afbeelding database, al dan niet een betaalde variant, ipv zelf met afbeeldingen te moeten komen.

[MrMonkE]

Een goede designer moet je volgens mij in je hebben. Je kunt ook mooie dingen maken als je niet een goede designer bent, het kost alleen veel meer iteraties en veel meer tijd. Commercieel is dat meestal niet aanvaardbaar.

[Zerora]

Designer hier.

Werkwijze die ik meestal toepas:

• Eerst brainstormen
  • Wat is het onderwerp?
  • Wie is/zijn je doelgroep?
  • Wat wil je bereiken met je site?
• Hoe wil je je informatie presenteren?
  • Welke pagina's moeten er komen?
  • Hoe wil je tussen deze pagina's navigeren?
  • Statisch of dynamisch? CMS systeem of niet?
  • Andere webtechnieken?
  • layout indeling? 1 kolom, 2 kolommen of meer? Header/footer?
• Ontwerp maken (in Photoshop/Fireworks/etc...)
  • Laat je inspireren door populaire websites/templates/etc...
  • Zelf kritisch naar kijken als je klaar bent
  • Anderen (die jou goed kennen) ook kritisch laten kijken
  • Wijzigingen doorvoeren.
• Content invullen
  • Ga je teksten schrijven (of laat het door iemand schrijven)
  • En de rest van de content ook vullen.
  • Dan nog eens kritisch naar kijken door jezelf en weer die anderen.
  • Wijzigingen doorvoeren.
  • Website publiceren!!

[Verwijderd]

NNF schreef op maandag 14 juli 2014 @ 08:57:
Dat gezegd hebbende: er zijn natuurlijk wel wat kleine dingetjes die je kunt doen om iets er 'professioneler' uit te laten zien. Gebruik bijvoorbeeld een niet-standaard lettertype (dus geen Arial, Times, etc.), gebruik ruime marges/padding, werk met grijstinten i.p.v. keihard zwart, gebruik kleuren die elkaar aanvullen. Maar ook dat is allemaal zoveel makkelijker als je er aanleg voor hebt.

Met Arial kan je eigenlijk niet mis. Je moet juist niet te veel met hippe fontjes gaan klooien, daar zie je vaak aan dat iemand niet zoveel ervaring met e.e.a. heeft.

[Verwijderd]

Zerora schreef op woensdag 16 juli 2014 @ 00:57:
Designer hier.

Werkwijze die ik meestal toepas:

Correct. En naar mate je veel uren spendeert, groeit je ervaring er dan ook naar.

Op ten duur worden vele zaken een automatisme, wat tot je voordeel werken kan. Minder uitbesteden, meer zelf en vooral effectiever doen.

[incaz]

Zerora schreef op woensdag 16 juli 2014 @ 00:57:
Designer hier.

• Eerst brainstormen
• Hoe wil je je informatie presenteren?
• Ontwerp maken (in Photoshop/Fireworks/etc...)
• Content invullen

Hmm.
1. no prob
2. no prob
3. TOTALLY FAIL
4. no prob

Het is alles uit deel 3 waar ik zelf dus vastloop.

[Zerora]

Begin eens met de onderdelen van stap 2 een vorm en kleur te geven en ze te plaatsen op je witte vlak. Je zal zien dat het op die manier vanzelf ergens op gaat lijken. Gewoon simpel beginnen. Simpele effen vlakken gebruiken. Dan heb je iig al een basis waar je uit verder kan werken.

[ Voor 7% gewijzigd door Zerora op 17-07-2014 02:31 ]

[maniak]

incaz schreef op woensdag 16 juli 2014 @ 16:31:
[...]


Hmm.
1. no prob
2. no prob
3. TOTALLY FAIL
4. no prob

Het is alles uit deel 3 waar ik zelf dus vastloop.

Heh.. zoooo herkenbaar... Mijn probleem dus ook..

[Verwijderd]

Het is niet voor niets een vak hè Er zijn genoeg mensen die maar wat aanrommelen, maar om zoiets goed en vlot te doen moet je toch een beetje weten waar je mee bezig bent.

[JJ93]

Het blijft inderdaad lastig. Ik vind het designen van een website op zich wel interessant, maar ik ben veel beter in het daadwerkelijk ontwikkelen.

Bij het opnieuw maken van mijn eigen website heb ik eerst eens rondgekeken bij andere websites. Wat spreekt mij aan, en spreekt dat mijn doel groep ook aan? Ik heb uiteindelijk gekozen voor een combinatie van flat design, grote blokken en het volledig opvullen van het scherm, indien nuttig.

Je wilt bijvoorbeeld niet tekst hebben waar zinnen 2000px breed zijn, dat leest gewoon niet prettig. Maar een Google Maps kaartje of een afbeelding kan je best de hele breedte mee laten stretchen.

Verder heb ik mobile-first toegepast en is m'n hele website een aantal stappen responsive. Ik probeer ook zo goed mogelijk gebruik te maken van de nieuwste HTML5 tags. Zoals <section>, <figure> en <nav>. Maar dat is dan weer meer de technische kant..

In ieder geval ben ik zelf tevreden met het resultaat. Is toch een stuk leuker om alles zelf te maken dan overal plugins voor gebruiken in combinatie met bootstrap/wordpress o.i.d. Dus ik zou zeggen: kijk wat je aanspreekt in andere websites, maak een aantal schetsen en beslis wat je ongeveer wil. Ga aan de gang en blijf doorbouwen tot je iets hebt dat je geslaagd vindt.

[Verwijderd]

naast alle goeie tips die ik hier heb gezien, heb ik nog een belangrijke meegekregen op mijn stage webdesign, dat je je eigen website/designspullies beter door een collega (iemand anders) kan laten ontwerpen. Ik merk dit zelf iig wel, maar dit zal niet voor iedereen gelden.

En tja, als je niet zeker bent over je eigen creatieve qualiteiten, gewoon lekker naapen! Goed gestolen/nageaapd is beter dan slecht verzonnen!

[incaz]

Wat betreft het naapen moet ik ook zeggen dat ik te weinig mooie websites ken. Zengarden had mooie voorbeelden, maar is toch wel oud. De meeste websites zijn zo saaaaai en lelijk. En vervolgens blokkeer ik mezelf ook makkelijk omdat ik voor mezelf de lat ook wel meteen vrij hoog leg.

[Verwijderd]

incaz schreef op donderdag 17 juli 2014 @ 18:57:
Wat betreft het naapen moet ik ook zeggen dat ik te weinig mooie websites ken. Zengarden had mooie voorbeelden, maar is toch wel oud. De meeste websites zijn zo saaaaai en lelijk. En vervolgens blokkeer ik mezelf ook makkelijk omdat ik voor mezelf de lat ook wel meteen vrij hoog leg.

behance, dribbble en verynicesites zijn leuke plekken voor inspiratie! Daarnaast dingen als CSS-tricks om grappige dingetjes tegen te komen, is ook erg leuk!

[ Voor 3% gewijzigd door Verwijderd op 18-07-2014 11:58 ]

[Boelie-Boelie]

Via Springest is misschien wel een goeie cursus te vinden: http://www.springest.nl/internet-media/webdesign/

Een mogelijke werkwijze: wanneer je voor een bepaalde organisatie een site bouwt, heeft het vaak al een soort merkgevoel. Red Bull komt als merk heel anders over dan de Rijksoverheid. Zo'n merkgevoel geeft richting, of zegt iig wat er niet kan. Neon of Comic Sans op Rijksoverheid werkt niet zo goed. De vraag is wat je associeert met het merk waar je voor bouwt. Een budgetmerk heeft vaak andere kleuren dan een corporate merk (bijv. geel+rood zoals Kruidvat of het oude McDonald's, vs. blauw+wit bij Cap Gemini of KPMG). Vandaar dat de info van je opdrachtgever en over de doelgroep je al een richting kunnen geven (en daarmee wat gerichter spelen met colorwheels).

Dat geldt voor kleuren, maar ook voor stijl. Voor stijl zou ik idd vooral veel designs bekijken (buiten de markt waarvoor je de site bouwt) en als je er 5-10 mooie hebt, voor jezelf zien te verwoorden waarom je het geschikt vindt (welke elementen doen het 'm; misschien is de stijl leuk maar de kleur niet, of v.v.), wat er niet geschikt aan is, wat de overeenkomsten zijn. Misschien heeft de stijl wel een naam en kun je gerichter zoeken voor inspiratie. En zo kun je ook plaatjes zoeken die je associeert met het merk of die stijl. Eigenlijk ben je op deze manier een moodboard bij elkaar aan het zoeken, je leidraad voor de uiteindelijke stijl die je wilt creëren.

Ook kun je plaatjes bewerken zodat ze passen in die stijl en/of Photoshop-brushes in die stijl gebruiken. Die plaatjes kun je opknippen of combineren in je design. Uiteindelijk kun je dan met al die puzzelstukjes een aantal conceptjes maken om de functionaliteiten aan te kleden die je al had gepositioneerd in je wireframe. Als het goed is.

[Verwijderd]

Boelie-Boelie schreef op vrijdag 18 juli 2014 @ 22:13:
Via Springest is misschien wel een goeie cursus te vinden: http://www.springest.nl/internet-media/webdesign/

Een mogelijke werkwijze: wanneer je voor een bepaalde organisatie een site bouwt, heeft het vaak al een soort merkgevoel. Red Bull komt als merk heel anders over dan de Rijksoverheid. Zo'n merkgevoel geeft richting, of zegt iig wat er niet kan. Neon of Comic Sans op Rijksoverheid werkt niet zo goed. De vraag is wat je associeert met het merk waar je voor bouwt. Een budgetmerk heeft vaak andere kleuren dan een corporate merk (bijv. geel+rood zoals Kruidvat of het oude McDonald's, vs. blauw+wit bij Cap Gemini of KPMG). Vandaar dat de info van je opdrachtgever en over de doelgroep je al een richting kunnen geven (en daarmee wat gerichter spelen met colorwheels).

En dit maakt het imho zo lastig om het voor jezelf te maken, want dan ga je persoonlijke eigenschappen verwarren met wat je mooi vind!

[vpm]

Ik snap het niet helemaal. Je geeft in OP aan al 15 jaar in het vak te zitten en vele designs te hebben gerealiseerd, maar zodra je het voor jezelf moet doen lukt het niet? Wat lukt er dan niet? Ik kan moeilijk geloven dat je werkelijk geen ideeën hebt qua design-elementen, kleuren, onderwerpen.

Uit eigen ervaring weet ik dat het vooral moeilijk is met één concreet design te komen; ik maak eerst diverse mockups (wireframes, kleurvlakken, ps designs) en beslis dan wat ik waarvan houd, overnieuw begin - om uiteindelijk een design te hebben staan.

Ik heb mijn taken als designer laten vallen gezien ik er weinig talent voor heb (muv fotomanips), maar tegenwoordig is het wel wat makkelijker dankzij de vele html/css frameworks. Met dingen als Bootstrap staat de helft van je design al. Kleurtjes aanpassen, wat extra klasses en id's en klaas is kees.

Ik herken zeker wat je bedoelt, met het falen van het blanco-design, maar je moet er niet in blijven hangen.
Het is uiteindelijk gewoon belangrijk dat je begint. Ik maak een globaal plan / schets van mijn schermen (per onderwerp, wat ik (hoe) wil laten zien) en bouw steeds verder. Incrementeel ontwerp/ontwikkeling, dus. Een beetje scrum-achtig.