Episode 11 · 30:55
How to Design a Website - The Creative Process
Tom walks through the creative process of designing a website, from understanding the purpose and collecting references to sketching, testing and stepping away when the work becomes visually numb.
The episode treats design as a sequence of decisions rather than decoration, with memorability and clarity as practical tests for every idea.
The useful bits
What to take with you
- A visual decision should support what the site needs a visitor to understand or do.
- References are ingredients for a direction, not templates to trace.
- Rough sketches make structural ideas faster to compare and discard.
- If a logo or layout cannot be recalled simply, the idea may need clearer hierarchy.
Watch the conversation
The original episode.
Full conversation
Transcript
Transcript generated from YouTube captions. Dan/Tom speaker attribution is AI-assisted and may occasionally be incorrect.
But this is this is the one thing that we can just split off into miniature videos or whatever um well it might be a long one that's true it might end up being another episode so we've just we just happened to wear the same things the following week yeah I just need to turn it inside out it's always black on the outside I just need to wear my hoodie underneath my t-shirt um basically creativity how do what's the creative.
Process from A to B when it comes to design so you've had something in your brain you've drawn it in a sketch on an iPad like really rough outline and you start to like materialize the idea from a thought to a a 2d dimensional thing with black and white or with a bit of color and then you want to like digitize it just basically creating that drawing on the sketch or the paper drawing or whatever into a designed version on.
Figma as you're doing that you realize it doesn't meet your own expectations of your brain um because ah it wasn't how I thought it was going to be which is fine it's a case of just iterating so I would say like the first thing is looking at examples of stuff that we've already done so if you look at our current website and the way that that's laid out the difference between where it is now and let's say that website.
Version is there are things like typography sizing right so the fonts that are being used are a little bit more like visual so it looks more intentional because it's like it's like a theme um I'm trying to think of like a if you saw a font you kind of resemble it to a particular brand right because sometimes fonts make you think a particular brand so I'd be like using like headings uh paragraph and stuff like with the correct fonts straight away lift it.
Then the second thing is like textures and shadows and stuff uh lift it again so for example harsh colors and and color blocks um work from a wireframe kind of skeleton mode but really the thing that makes something nice is sometimes the kind of like the subconscious like feeling or textures or layering or like um kind of one thing on top of the other or the fact that there's a background image and it's faded out it's the composition which is basically like.
A b and c together in a particular way makes it look nice rather than the fact that it's just a right it's the way that they all hang together and the positioning of a is over here B is over here and C is over here so I'd be like take what we've already said quick question yeah the creative process in a very simplistic like you're trying to teach a kid way do you class it as a and b.
And then you go back to a go back to b or you like a b c d or you like A1 A2 A3 so do you go what I mean by that is do you do sketch a design B you put the B back into a so now that's a how do you get to B to like the next stage or is it a more you're just starting all over the place a sort of scatterbrained or is there more of a quite succinct.
Process because in a weird way I'm quite logical and like process but for some reason when I come to design I feel like I'm the most unprocessed version of myself as if I'm more following my emotions rather than my logic so it's like a new it feels new to me of exploring this style which might be different both of us might have different ways or it might be very similar but you might have learned how to ride the waves of.
Either the randomness or you've been able to formulate it it's a great question and there's so many different ways so I'll try and succinctly explain one particular way that that works right and we'll frame it in the the realm of web design so the only way to do this the ultimate way to design a website um basically there's some extra contexts so from a website perspective a lot of the time the content drives the success of the page because of SEO right search.
Engine optimization so typically what I would do is I would write a web page out in a Word document with the kind of different things you want to do so whether or not firstly you're obviously going to do a title then you're kind of going to do a sub heading to that and then you're probably going to come up with three things so let's say if this is a website let's take our product page we have three products to um to kind of.
Showcase so the title of the page would be our products and then you would have maybe a Sublime maybe not and then you'd have three kind of like boxes and each of those would have a heading and that heading would be like product a right so let's let's call them out like actually physically so first one be like one product is um to Do's right which is our dyslexia friendly to do app so heading number two would be to do's.
And then it would be a paragraph like this app helps anybody Focus on tasks by visualizing one task at a time and providing quick Solutions when you get stuck you can break down a task and you can also complete attack so you can um pass a task over right to say it's too hard so it doesn't interrupt your flow and the most important part is rewarding yourself this app does all that stuff right so you do something like that a couple of.
Lines real sure to the point and then the next thing is it's going to be a button right it's going to be a button to be like download now and basically there's going to be an image of the app and then on the on the other two slides it'll be exactly the same but it'll be the reverse in the sense of like image on the left text on the right the second box will be text on the left image on the right like you.
Could do it like that or nowadays I'm kind of like basically people read down one line um and sometimes moving it over left right left right is a bit um it's good from a design visual perspective but not if you're trying to just scan through to see what's interesting right um because it's easier to read all the headings when they're all aligned up in the same vertical way so I'd be like that's broadly speaking that the layout of the page so you know roughly where.
You're going to start it's going to be like a block with a heading and then three repeatable blocks with an image a title a blurb and a button so then you're like okay cool let's start poking that together now for me I don't necessarily have a b c I have a A1 A2 A3 A4 A5 then I'm like duplicate A5 and then call it B and then do B1 B2 and then now you have two designs so you.
Like push one design really really far and then you duplicate it and try and like strip it back or change it or like angle images or maybe do it yeah left and right left and right rather than down the middle or something you do like a slight iteration and then you'd present two because typically it's better to say which one do you prefer a or b or do you like a yes or no like it's always a better conversation when.
You say do you like a or b so always provide people with options because then there's the the less kind of like Downer and typically what they say is I like a bit of a and I like a bit of B so then you go away and create C which is a merge of a and b or you take a and just iterate Ace A5 to be A6 which is inclusive of some of the ideas from B so.
When you actually come down so that putting it together on the page you've got your mental layout or your sketch and you've got some of the rough copying stuff because what you're trying to do is eliminate some of the thinking processes to other disciplines so then there's more clarity and like you know now exactly what you're doing you don't need to think about headings and you don't need to think about like overall structure you now need to think about.
Making that happen in a visually pleasing way so you'd go to dribble uh dribble is d-i-r-b-b-b um triple B's ally.com to get inspired about how do other people do like portfolio pages and what have they done and you'd look at those things copy those images paste it into your design and a lot of the time the treatment of a design might already exist so for example we already do our headings with a tip with a typical font so we're going.
To use that font that's a non-negotiable right especially if you've got a brand that's existing now if you let's say we had no brand at all you would basically get some heading write it out and you would flick through different fonts that you like so you would duplicate the same heading into different fonts and you'd be flicking through your fonts or you go to Google fonts to find something that you liked off the back of being inspired by.
Looking at dribble and maybe you like this you know if you think of like Daft Punk or like neon like uh what's that film um um oh it's about neon driving I'm iron is one word Tron that's it true yes so Tron has this like technology like dark blue neon lights pink neon lights um has this style right and it has this very hard coded like like hard edges so you would not have like soft edges on the font the font would be a bit hard it.
Might be a bit stodgy as in like short and fatter and you'd find something like that to give you this feel then you drop that in and then you start playing around with uh like a font would be like a heading would be like heavier the paragraph text would be slightly lighter and more readable so that the heading would be stylized and you start throwing those ideas together and then you start putting the page together another thing is like.
Buttons a button is a really good place to start with Styles because that can dictate how how it's going to be so it'll start with the accent color so is the site going to be you know orange or is it going to be red or like some accent colors so again you go and search and dribble and search for like green related because you can pick a color to get it to show you um web pages that have green in it for.
Example so the button the button has a few things it has a shadow ability it has rounded corners or not rounded Corners it has um big paddings or little paddings it has long buttons or so a button is a really good place to do some style because that is like a place where there's lots of variables to play with so I would do like the buttons and headings kind of feel and then just start throwing it together you would.
Then use things like unsplash for photography free photography or you would go um there's I can't remember off the top of my head but there's some free illustrations that you can download and you can just change the accent color in the illustration so you start dropping those in and then really it's a case of well you've already from your Google from your Google doc you've got rough layout you then you've come up with your typography what works well either from a.
Brand guideline or you're basically going to look at dribble and basically copy some of the things that you like out of it and you're not copying it like for like you're taking image a taking image B and kind of like collating it together so it itself is a unique creation of an amalgamation of stuff and then I'd be like you add textures and layers if it is that kind of thing so for example when we did the Penelope.
Website um you saw the first version right it was very like white and and pale with just like the green accent color everywhere and we duplicated it and just put textures and colors so like you know soft pastel colors there's a website called subtle patterns which helps create um repeatable image background images that repeat with no like oh there's a glitch in where like the edge meets the other Edge because it's not meeting properly to create a pattern so that has.
Patterns like a flooring pattern a wood pattern a tile pattern sometimes just like a noise pattern like a static pattern that you can add so then that basically creates rather than it being like a harsh web pages of just color and text and boxes you then create this softness and a feeling of like like you could feel it right textures and stuff now thematically from a trend perspective we used to like things that looked as if we could physically touch.
It with a lot of Shadow and kind of like depth and stuff but we've moved away from that to this like flat design which is cool but there's a there's a phrase called perceived affordance now the reason why you know that a handle of a door is like you know which way to use it because of the way that the shadow is right um because if it was flat you would think it's a push door but if it was.
Like protruding out as in like you would see it physically protruding out with a shadow you know it's a pull door now if there is no if there's no like depth unless there's those buildings that have got those pull doors but really it's a push oh yeah like the Flappy dollars yeah so so well not even that just just a bad design yeah you want to add some hint to what it actually does and in adding the hint that basically means there's.
Less interpretation does this door is the door push or is the door pull you know similar with those bars you know sometimes you don't know if the bar is a push or a bar as a pull now if you see a bar typically you think it's a pull but a lot of the time it's not it's a push so they have the sign that says push like you you want to avoid the need to think about stuff and that's how like.
You know buttons are not always like just white on white with black text they've got some like framing they might have a shadow and then when you hover over it might have an interaction so all this stuff is like this flat design thing if you're just iterating iterating iterating and you're coming up with ideas you might add a background image and turn the opacity to 10 and have a background image on with then a purple overlay and like have this layering.
Stuff so I would say it's all about like layering and uh giving that that feel because if you remove the if you looked at our website like ryland.wales and you look to the blocks if they did not have that like pattern texture on the bot on the background uh some do and some don't if it didn't it would look really Bland so in adding just that pattern it's really subtle just gives it like like it's been thought out a little bit.
More but of course I also agree that everything shouldn't feel too intense it's about you know having things with breathing space and not too um too messy because we're trying to add in a bunch of ideas and stuff so when you go in with an idea do you know what do you go in more with the vision of the idea or how you would feel let's say being on a website how you want to feel so you're fleshing out the feeling or.
You're fleshing out the visual like what you see if that makes sense or a bit of both yeah it is a bit of both but I particularly am more like a feeling so for example when you first look at a website or you first look at a logo there's this um there's this test that you can do it's like a five second test right you see this thing and then you just make it disappear and you say hey.
So what what did you think anything and usually it does two things one is it memorable and two like could you well one is it memorable enough for you to like for me I'm like can you draw it in the sand right is it memorable enough from a logo perspective to redraw this thing right now right or to kind of like remember what it kind of looked like or not but the second thing is like if it is a.
Web page like what was the feeling was was it like did it look professional did it look like childish would you want to like entrust something to them so let's say you're a cyber security firm looking at their website if their website is a little bit like playful you probably don't want to trust them with your thing so there's always that like feeling that some design makes you feel um and it's about the trust aspect of it um and then it's the like.
Do you understand what it does because design isn't about just design for design sake do you understand what this is so for example like a product page do you know what this product actually does and you might be like no not really there's a bunch of nice things and there's animations and stuff I don't really understand it so that's why the Google Doc is like a good starting place for just like broad layout but then you would write the text in because really.
The text needs to be done independently of a design to some extent so you can focus on like getting the text right and usually what I'm saying is like the less text the better and the more like the more absolute like descriptive um to the point you can make it is better like I read something recently that was like we use um AI technology and analytics to enhance performance or whatever whatever I'm like that's cool for buzzword's sake.
And there is there is a place for buzzwords but like what does that mean like in what way are you using AI like what's that what's that doing like it's it's better to be like we use AI technology to give you workout recommendations based on your success in your previous workouts or something more like tangible rather than just like flamboyant wording because it's just buzzwords and you're like oh it uses AI oh it uses web3 or it uses.
Blockchain therefore I must use it you know so I would say it's broadly not yeah it is a feeling because if think about it you go on certain websites and it'll make you feel something you either trust it or you don't trust it or you want to buy you want to buy it or you don't want to buy it or you want to come back to it or you don't want to come back to it so I would say it's always.
That thing so it's always good to like step back and be like does what does now everything that I'm putting together like feel right like would I want to buy from these guys would I want to work with these guys um so there's always that feeling but ultimately it does come down to my opinion it's my opinion of all this stuff initially until then you start showing it to other people and start tweaking things because a lot of the.
Time you'll think something and that's not actually the reality so going back to your opinion it's a good segue into the next question I was going to ask um you've got an idea or you've got a feeling you put it down to paper it is not turned out how you either visualized it or felt like it was going to be how do you not take it personal to then edit that idea if that makes sense so that you're not.
Committed to but I so visualized it this way I don't want it to change how do you be in a more fluid River style rather than a lake style that you're just stagnant and you're just committed to the idea even if it might be a bad idea in the first iteration yeah to me it's about like effort right investment of effort so I never delete anything because that thing that didn't quite feel right um might Inspire something better to get.
Closer to the thing that you did visualize so I'd be like just focus on you know continual like effort in something until you do feel good about it right to a degree now you need to validate that as in are you are you like I know that there's a balance of like this didn't look like how I thought about it sometimes that's okay right because the end product that you did do is still good of a standard so if it's that case.
Then I would definitely ask you know get somebody else's opinion that you trust and like you you can like have a good relationship with them because you don't want them to come in to be like that's rubbish you bring someone in to kind of like validate cool it's not what I thought it was going to be but is this like good to get some input to then refine it so that'd be one way if it's okay that what.
You thought didn't come out you know but I I would also say that um for me I can't always think about how it will look um to start with anyway so I'm just starting and putting something together until what I ha I have in front of me feels right and looks good you know so I would say that um it is a case of like just keep going like just put in effort to like get to a place by experimenting.
And like figure yourself out cool this design didn't get there critically analyze why that's the case what's the feeling is it the colors okay let's duplicate it and change colors no it's not the colors is it the fonts no it's not so do you have like a do you have like a filter for when you're hitting let's say a dead end because it sounds like you you you keep some stuff that haven't worked out that might work in the future so.
What is your dead end monitor is it the amount of effort hours um maybe just you know it needs a lot of time and you don't have it right now how do you sort of filter out to push the ideas in the season that you're in and where to put the others on the Shelf in the archives or whatever for potentially another day or maybe never yeah it's like the gym right you never do 30 you know bench presses straight after.
Another you'll do three sets of ten like you're always going to have a little break so I I personally would be like it's not always good to sit there and put in effort until it corrects itself what you want to do is like get to a certain stopping point where okay it's materialized enough to be able to kind of like have a a sense of whether or not this is good or bad and if you don't like it at that point.
You can be like cool I'll put in another couple of hours and see where I get to like just put in a few more or you'll be like right take a break so it's always a sense of that feeling like there's no harm in taking a break because you'll never like creativity doesn't disappear like you you don't then become not creative it's just like the outworking of it might be a bit harder but you can just push through it or something so.
It's not like um it's not as if like if you go away that skill will disappear do you know what I mean so it's not um I have to stay here otherwise I'll lose uh the the kind of the positive effort that I've built up in those last five hours I think the other trouble is like if it's billable or not if it's billable I think it's very difficult because there's a pressure of you've charged x amount for this so if.
You go over or well no more so if you go over then no business is going to survive if you like quote something and then you are typically always going over right um so it's a case of if it's in that case then try and take more regular breaks and try and get input from other people to get it right um rather than like I'm gonna sit here and like basically utilize all of the time I'm also fine with going over.
Budgets on certain things because you want it to be right rather than on it like in budget I don't think right um because the end goal is more important so like because a lot of the time some will be over some will be over as some will be under so overall LOL overall it works out you know um yeah so yeah if there's a time thing then more breaks and more kind of like holding it lightly if there's no time.
Break then like explore your like you're kind of like blockers like I see yourself questions like why don't I like this go back to dribble look at stuff and like you'll spot the stuff that you do like and then just pick them all out and be like what's the what's the pattern here what's the pattern between these three images why do I like these three images but I don't like my design is because these three images use like purple instead of you know green or.
Whatever so maybe I should switch and you're just like you're just testing you're just trying and testing stuff until it feels right but again there is a moment where you like I'm not quite happy with it I've iterated I'm still not quite happy with it I should probably take a break so it's like a repeat disappointment or a repeat of frustration it's probably a good time just to step away you know go and look at something be inspired by.
Something absolutely differently go and look at a cityscape go and look at some plants go and open a comic book go and watch something go and cook something like just do something to switch um switch lanes and then come back and then you might be like what you look at is like oh actually I do quite like this and you can like recap okay from the stuff that I stopped with well actually this does look okay let's bring this.
Back in you know so it's it's not a definitive like process but I'm like if you get if you feel frustrated then spend a little bit extra time okay an hour or two hours and you still feel frustrated take a break but sometimes like if you feel frustrated in the first time take a break you know so it's that kind of feeling so just like understand the frustration that you feel the logic the logic behind the frustration why do you feel frustrated.
Oh logically it's because we're using purple and not green or I'm using this font over this one and you figure those things out by like looking at stuff you do like I'm comparing so compare it more and utilize other Inspirations like why do you like that you know Nike app well it's because they're using everything is black and white text so maybe you should just duplicate it and do black and white text maybe that will feel better like feel more kind of like.
I'm happy with it you know rather than the white background and black text that you had you know I would also say one final bit is like usually land on high now nice and that final bit drumroll please it's more the final bit of this answer another thing is like typically in web you don't necessarily use um black as an actual color you'll use like an off-black um so like one one from a hex perspective so there's like a softer.
Edge to it and another thing that's quite nice is if you designed a website and basically you have a color like I always use green because that's my vibe right you could have a tint of green in every color that you have on the page which unifies the idea so your black might be actually a very very dark green and also your um kind of like your colors on the page might have like a two percent tint of green which then unifies.
This like visual treatment to be a cohesive one thing rather than like it's a bit like all over the place so that's another light yeah little little trick that people can do as well that's good any final pointer creativity is a muscle if you do not exercise that muscle you will never get better but also what's better ultimately it's the fact that you and like are able to just do weights in a consistent manner maybe some days you can lift more maybe.
Some days you can lift less but ultimately it's you know overall like a stock market it's getting better there are moments where you hit brick walls because unless you're listening to this in a procession well even in a recession if you look at the stock market and the fact that the stock market went down in covid is now back up again and overall if you look at like the five year mark it's overall the trajectory is is kind.
Of gone in a like a vertical line going um from like like diagonally up I'm trying to explain it because I'm using my hands a lot so all those listeners yeah it's like this from the bottom left-hand corner to the top right hand corner you know draw that line that's what it's doing so I think it like don't be hard on yourself and like you just got to keep keep um keep at it and like a lot of the time.
Creativity is not necessarily coming up with something from scratch it's going to look at Inspirations and and pulling those things together one really great thing for like logos logos is about really icons right and an icon the M of McDonald's that's literally like an icon right you could draw that in the sand so when it comes to logos one great thing is like take the latter of a company so for example Ryland in Google type in R logos and.
We'll come up with a bunch of r letter logos then you look through the ones you like or dislike and then just rebuild it and color it pink instead of blue you know it doesn't it doesn't have to be that you sit there and draw 20 unique ideas of course other people would say your first 20 ideas are rubbish it's the 21st idea which is where the magic dust happens but I'm not really like I'm not really like that.
Because I don't have the money to be able to draw Tony ideas as in I don't have the time money to always do that so sometimes you have to be a bit cleverer and kind of like actually the first couple of ideas are okay and you can change it later especially with your own brand like your first logo again if you look at McDonald's logos Ford logos Apple logos they are definitely not the same logos now that they were ages ago that they've iterated.
And changed so it's okay to do that because we're always trying to Simply and if you look at them they've gone from complexity to Simplicity because we're much more kind of icon image based people that's why if you look at the Rylan Consulting logo it's an R with like scaffolding and connecting of ideas because I wanted it to be this idea of like um you know like a if you were looking at a map with a bunch of string like.
Tying dots to dots and stuff yeah it's that kind of idea is the connection of people it's the connection of ideas it's the connection of structure to ultimately build this now thing that you actually understand which is this letter r and I really like the conceptual idea behind it but really it's because I saw an r that looked very very similar and I was like that's cool I like the idea and I can come up with a with an explanation.
Behind it and then I like repurpose it to fit what I want it to fit you know thank you perfect it's a good way to end yeah that is creativity 101.