5 ms·

I have a question about web design from a complete idiot: how do you do it? I mean, really, from scratch, how is it done? I have heard that people used to desi

I have a question about web design from a complete idiot: how do you do it? I mean, really, from scratch, how is it done? I have heard that people used to design in a graphics program (Photoshop, Gimp) what the website should look like and then tried to translate that to CSS, html, and js, or maybe just to React these days. Is that how it's done? Right now when I want something to look a particular way, I go into a CSS file, guess at what a good value might be for a colour or a size or a font, reload the page in the browser, see how it looks, and iterate a few times. Sometimes I use the web browser's webdev tools to try to see the changes in these numbers a bit more live. What is it that people actually do? How do you even begin to do something as crazy as CSS painting? http://diana-adrianne.com/purecss-vignes/ http://diana-adrianne.com/purecss-vignes/ I would love to see an intro to web design that starts like those intros to programming that begin with, this is how you install a text editor, this is how you use git, a programming language has variables and functions, and so forth, e.g. http://swcarpentry.github.io/python-novice-inflammation/setup/ http://swcarpentry.github.io/python-novice-inflammation/setu...

news_to_me 8y ago
> Right now when I want something to look a particular way, I go into a CSS file, guess... This is what I used to do, before I started really getting into web design. Then I discovered Sketch, which really changed the way I think about it. When you design with CSS, you're also constantly struggling with responsiveness, HTML structure, and a bunch of little things that are sort of irrelevant to how it looks. Sketch (and similar apps) let you focus just on the look, which is great. Need a div with a background color? Stick a rect right there. It really helped me get into the flow of "designing" instead of "building". (Also, this design blog really helped me get started, coming from a web developer's perspective: http://learnui.design/blog/ http://learnui.design/blog/)
- fabricexpert 8y ago
  The problem with this approach is that you get nice screenshots that look great, but the implementation doesn't always match up. Sometimes that last 5-10% of the design that was so easy in Sketch is a complete pain to implement correctly, and it gets skipped. You end up with a half-baked implementation that doesn't look quite right.
  - news_to_me 8y ago
    That's fair, but if you're also a developer I think it's pretty easy to keep a "how hard would this be to implement?" in the back of your head. And of course, design/development is a process. I'd argue that getting most of those development details mostly out of your head is well worth the creative freedom it affords.
- otras 8y ago
  One way I've sped up my work with Sketch has been the Zeplin plugin [0], which auto-generates CSS stylings for a page designed in Sketch. In my experience, getting a Sketch file from a designer and using Zeplin makes it very easy to translate into proper CSS. [0]: https://zeplin.io/ https://zeplin.io/
tiborsaas 8y ago
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
nikkwong 8y ago
I run a little design agency (www.beaver.digital) where I do all the design and coding. I didn't study design (or coding for that matter), but over the last year or two I went from novice to advanced pretty quick. I don't know what the precise rules of thumb are, but I usually start by creating the layout + content in illustrator, which would be akin to making any other type of art. Once you have the illustrator file, writing the code is actually the easy part. It's taxing, but the creative work involved in creating the actual illustrator file is always much more difficult (at least for me). To your point, I've thought about sharing the actual process in more detail if people expressed interest. I've had a few friends and family members ask, but maybe I'll drum up some lessons someday if I'm convinced anyone might watch them :)
- astoellis 8y ago
  I know this is 5 days late and a dollar short, but I'd absolutely watch lessons following this process.
goobynight 8y ago
Wireframe/design -> HTML + content. That is the start. When I worked at a startup, I was able to outsource ALL of our CSS work, as long as I gave them well-structured HTML. I saw the look our designer wanted, broke it down into pieces that I could define in HTML and then made that. I knew what CSS could do, was able to tweak their stuff, and could do it given enough time, but the lesson here is that it all starts with your structured document.
wolco 8y ago
How does one go from photoshop to bootstrap aside from manually copying over ideas. 15 years ago we were slicing into 9 piece boxes and changing the side panels to the background image and setting to 100% height repeating the image. The trick was always to slice with this in mind.
- hithereagain 8y ago
  A lot of designers are now using tools like Sketch which help with this process, providing exportable CSS for various elements.
thisOtterBeSrc 8y ago
Here's a nice ebook which will give you a feeling for what professional designers actually do. There are also links to sites for inspiration. This will give you a feel, for what is actually possible (crazy stuff out there). https://design-process.netguru.co/chapters/01-project-introduction-and-setup.html https://design-process.netguru.co/chapters/01-project-introd... Btw. if you want to trial&error your css theres this amazing online tool called jsfiddle. Theres a section for html css and javascript. If you do not need the javascript, just leave it empty. Here's a simple example: https://jsfiddle.net/frq75sud/5/ https://jsfiddle.net/frq75sud/5/ Just edit the css and press ctrl+enter.
Kagerjay 8y ago
You need to know a good deal of CSS rules to make that painting. Best to memorize these. Its like asking a fresh art student to make a style on par with piccaso or van gogh. You need to know a few art rules (rule of thirds, vanishing points, color theory, etc). Every website has its own unique art style and its own set of rules. Learn them before breaking them In general, build a frontend template looks like this 1) pen + paper low fidelity markup. Also called "Wireframing". Your just making boxes inside boxes, and highlighting the relationships those boxes have with each other. Usually its some idea in your head and inspiration drawn from multiple sources. 2) [Optional] High fidelity markup in Figma / Sketch / Photoshop/ Gimp / AfterEffects Etc. This is where you can identify color schemas that work, font sizes and typography, and fine tune the final version of the end result 3) Inspiration from an idea elsewhere normally (dribble, existing site, a infographic printed catalog, etc). You can skip steps 1 and 2 if this applies. 4) You should have an idea of how all the major HTML and CSS components will work. What CSS properties you will msotly use (rotate, position absolute), etc. You have an idea on the big picture and how everything fits together. You choose between making things in pure HTML/CSS vs loading it as a image/SVG instead. Doing the latter option is almost always easier. 5) JS first or HTML first approach. JS first approach would utilize something like react, that's only if you are working complex UI interfaces that deals with alot of data binding (the example you linked doesn't qualify). You would best be taking an HTML approach first in this instance, e.g. write the HTML, write CSS, reiterate until done. I highly recommend checking out layout land once you have a good fundamental understanding of basic CSS/JS/HTML. It teaches you "how" to think like a webdesigner, choosing between different CSS rules etc. The author is the head designer at mozilla https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag For more crazy mathmatical designs, you would need to learn SASS (precompiled CSS) as well generally, and some mathmatical principles (high school geometry is a must, etc). The best source to find these designs is in codepen/dribbble. For very advanced design CSS tutorials, I really enjoy watching @DavidKpiano and @shshaw for these. https://www.youtube.com/channel/UCtmYk7H-NNYLEe_LgBRYomA/featured https://www.youtube.com/channel/UCtmYk7H-NNYLEe_LgBRYomA/fea...

news_to_me 8y ago

> Right now when I want something to look a particular way, I go into a CSS file, guess... This is what I used to do, before I started really getting into web design. Then I discovered Sketch, which really changed the way I think about it. When you design with CSS, you're also constantly struggling with responsiveness, HTML structure, and a bunch of little things that are sort of irrelevant to how it looks. Sketch (and similar apps) let you focus just on the look, which is great. Need a div with a background color? Stick a rect right there. It really helped me get into the flow of "designing" instead of "building". (Also, this design blog really helped me get started, coming from a web developer's perspective: http://learnui.design/blog/ http://learnui.design/blog/)

fabricexpert 8y ago
The problem with this approach is that you get nice screenshots that look great, but the implementation doesn't always match up. Sometimes that last 5-10% of the design that was so easy in Sketch is a complete pain to implement correctly, and it gets skipped. You end up with a half-baked implementation that doesn't look quite right.
- news_to_me 8y ago
  That's fair, but if you're also a developer I think it's pretty easy to keep a "how hard would this be to implement?" in the back of your head. And of course, design/development is a process. I'd argue that getting most of those development details mostly out of your head is well worth the creative freedom it affords.
otras 8y ago
One way I've sped up my work with Sketch has been the Zeplin plugin [0], which auto-generates CSS stylings for a page designed in Sketch. In my experience, getting a Sketch file from a designer and using Zeplin makes it very easy to translate into proper CSS. [0]: https://zeplin.io/ https://zeplin.io/

tiborsaas 8y ago

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

nikkwong 8y ago

I run a little design agency (www.beaver.digital) where I do all the design and coding. I didn't study design (or coding for that matter), but over the last year or two I went from novice to advanced pretty quick. I don't know what the precise rules of thumb are, but I usually start by creating the layout + content in illustrator, which would be akin to making any other type of art. Once you have the illustrator file, writing the code is actually the easy part. It's taxing, but the creative work involved in creating the actual illustrator file is always much more difficult (at least for me). To your point, I've thought about sharing the actual process in more detail if people expressed interest. I've had a few friends and family members ask, but maybe I'll drum up some lessons someday if I'm convinced anyone might watch them :)

astoellis 8y ago
I know this is 5 days late and a dollar short, but I'd absolutely watch lessons following this process.

goobynight 8y ago

Wireframe/design -> HTML + content. That is the start. When I worked at a startup, I was able to outsource ALL of our CSS work, as long as I gave them well-structured HTML. I saw the look our designer wanted, broke it down into pieces that I could define in HTML and then made that. I knew what CSS could do, was able to tweak their stuff, and could do it given enough time, but the lesson here is that it all starts with your structured document.

wolco 8y ago

How does one go from photoshop to bootstrap aside from manually copying over ideas. 15 years ago we were slicing into 9 piece boxes and changing the side panels to the background image and setting to 100% height repeating the image. The trick was always to slice with this in mind.

hithereagain 8y ago
A lot of designers are now using tools like Sketch which help with this process, providing exportable CSS for various elements.

thisOtterBeSrc 8y ago

Here's a nice ebook which will give you a feeling for what professional designers actually do. There are also links to sites for inspiration. This will give you a feel, for what is actually possible (crazy stuff out there). https://design-process.netguru.co/chapters/01-project-introduction-and-setup.html https://design-process.netguru.co/chapters/01-project-introd... Btw. if you want to trial&error your css theres this amazing online tool called jsfiddle. Theres a section for html css and javascript. If you do not need the javascript, just leave it empty. Here's a simple example: https://jsfiddle.net/frq75sud/5/ https://jsfiddle.net/frq75sud/5/ Just edit the css and press ctrl+enter.

Kagerjay 8y ago

You need to know a good deal of CSS rules to make that painting. Best to memorize these. Its like asking a fresh art student to make a style on par with piccaso or van gogh. You need to know a few art rules (rule of thirds, vanishing points, color theory, etc). Every website has its own unique art style and its own set of rules. Learn them before breaking them In general, build a frontend template looks like this 1) pen + paper low fidelity markup. Also called "Wireframing". Your just making boxes inside boxes, and highlighting the relationships those boxes have with each other. Usually its some idea in your head and inspiration drawn from multiple sources. 2) [Optional] High fidelity markup in Figma / Sketch / Photoshop/ Gimp / AfterEffects Etc. This is where you can identify color schemas that work, font sizes and typography, and fine tune the final version of the end result 3) Inspiration from an idea elsewhere normally (dribble, existing site, a infographic printed catalog, etc). You can skip steps 1 and 2 if this applies. 4) You should have an idea of how all the major HTML and CSS components will work. What CSS properties you will msotly use (rotate, position absolute), etc. You have an idea on the big picture and how everything fits together. You choose between making things in pure HTML/CSS vs loading it as a image/SVG instead. Doing the latter option is almost always easier. 5) JS first or HTML first approach. JS first approach would utilize something like react, that's only if you are working complex UI interfaces that deals with alot of data binding (the example you linked doesn't qualify). You would best be taking an HTML approach first in this instance, e.g. write the HTML, write CSS, reiterate until done. I highly recommend checking out layout land once you have a good fundamental understanding of basic CSS/JS/HTML. It teaches you "how" to think like a webdesigner, choosing between different CSS rules etc. The author is the head designer at mozilla https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag For more crazy mathmatical designs, you would need to learn SASS (precompiled CSS) as well generally, and some mathmatical principles (high school geometry is a must, etc). The best source to find these designs is in codepen/dribbble. For very advanced design CSS tutorials, I really enjoy watching @DavidKpiano and @shshaw for these. https://www.youtube.com/channel/UCtmYk7H-NNYLEe_LgBRYomA/featured https://www.youtube.com/channel/UCtmYk7H-NNYLEe_LgBRYomA/fea...