3 ms·

How I do it: 0) Start with the content. Always design around the content and the target audience in mind 1) Starting on pen and paper, I sketch 5-10 layouts i

How I do it: 0) Start with the content. Always design around the content and the target audience in mind 1) Starting on pen and paper, I sketch 5-10 layouts in a short amount if time then I try to evaluate them based on gut feelings. This is also a good time to experiment with alternatives, new ideas. Google "webdesign patterns" if you need solutions for a given problem 2) Sketch a black and white HTML+CSS version then try to add the appropriate paddings and margins. 3) I look for inspirations in web design galleries, pinterest, dribble, whatever I can find. 4) Pick a good font for display + text, good typography is key 5) Try to make something that approaches the websites you like, grab a color palette from http://coolors.co http://coolors.co, images from https://unsplash.com https://unsplash.com 6) Iterate This list is incredibly leaky, but more or less this is the process if I have to design something from scratch.

aldoushuxley001 8y ago
Any recommendation of picking a good font for display? System fonts won't be sufficient you think? I guess there's not enough font-weights with system fonts
- d3sandoval 8y ago
  I highly recommend checking out this recent article from a list apart: https://alistapart.com/article/flexible-typesetting https://alistapart.com/article/flexible-typesetting As well as this continually-updated website: https://betterwebtype.com/web-typography-resources https://betterwebtype.com/web-typography-resources Both give good high-level overviews of readability in digital typesetting and help with choosing the right fonts for the job
- kowdermeister 8y ago
  > System fonts won't be sufficient you think? They are great and battle tested of course, but a good font is something that makes a good design stand out. I feel it's a 'hidden' component that many people can't articulate that they like it in a design. It totally depends on the project though :) more on this: https://practicaltypography.com/system-fonts.html https://practicaltypography.com/system-fonts.html The Typewolf blog is great: https://www.typewolf.com/google-fonts https://www.typewolf.com/google-fonts https://www.typewolf.com/blog/google-fonts-combinations https://www.typewolf.com/blog/google-fonts-combinations https://practicaltypography.com/font-recommendations.html https://practicaltypography.com/font-recommendations.html
- megous 8y ago
  sans-serif, serif and monospace are great! The actual default fonts for the platform will be selected when you use these. And these are pretty good usually and will match the user's chioce and what the user is most accustomed to seeing, which helps readability.
vec 8y ago
> Starting on pen and paper This is really the secret. Pencil, pen, whiteboard, crayon, whatever. Anything that lets you rattle off half a dozen super low detail sketches in under a minute will work. It doesn't need to be pretty either. Just as long as it's enough to give you a feel for interacting with the page as a whole. Once you have a good solid idea for how you ultimately want it to come together then you can move to a computer to drill down into the individual details, but for getting from zero to concept there's no substitute for analog tools.
CitizenTekk 8y ago
This really sums up on how I design a website from scratch. I get more details when I get to do it by just sketching. Web design is also like an art, you have to draw it first. Plus, you get even more chance of artistic view out of it, in your own way. Then go out and browse some web inspiration about your decided niche this sure saves a lot of time.

aldoushuxley001 8y ago

Any recommendation of picking a good font for display? System fonts won't be sufficient you think? I guess there's not enough font-weights with system fonts

d3sandoval 8y ago
I highly recommend checking out this recent article from a list apart: https://alistapart.com/article/flexible-typesetting https://alistapart.com/article/flexible-typesetting As well as this continually-updated website: https://betterwebtype.com/web-typography-resources https://betterwebtype.com/web-typography-resources Both give good high-level overviews of readability in digital typesetting and help with choosing the right fonts for the job
kowdermeister 8y ago
> System fonts won't be sufficient you think? They are great and battle tested of course, but a good font is something that makes a good design stand out. I feel it's a 'hidden' component that many people can't articulate that they like it in a design. It totally depends on the project though :) more on this: https://practicaltypography.com/system-fonts.html https://practicaltypography.com/system-fonts.html The Typewolf blog is great: https://www.typewolf.com/google-fonts https://www.typewolf.com/google-fonts https://www.typewolf.com/blog/google-fonts-combinations https://www.typewolf.com/blog/google-fonts-combinations https://practicaltypography.com/font-recommendations.html https://practicaltypography.com/font-recommendations.html
megous 8y ago
sans-serif, serif and monospace are great! The actual default fonts for the platform will be selected when you use these. And these are pretty good usually and will match the user's chioce and what the user is most accustomed to seeing, which helps readability.

vec 8y ago

> Starting on pen and paper This is really the secret. Pencil, pen, whiteboard, crayon, whatever. Anything that lets you rattle off half a dozen super low detail sketches in under a minute will work. It doesn't need to be pretty either. Just as long as it's enough to give you a feel for interacting with the page as a whole. Once you have a good solid idea for how you ultimately want it to come together then you can move to a computer to drill down into the individual details, but for getting from zero to concept there's no substitute for analog tools.

CitizenTekk 8y ago

This really sums up on how I design a website from scratch. I get more details when I get to do it by just sketching. Web design is also like an art, you have to draw it first. Plus, you get even more chance of artistic view out of it, in your own way. Then go out and browse some web inspiration about your decided niche this sure saves a lot of time.