Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

A Web Design Crash Course: From Developer to Developer

zen-of-programming.com

Post reply on HN
Print view View original

41–48 of 48 posts

Re: A Web Design Crash Course: From Developer to Developer

#41

Post by CitizenTekk »

tiborsaas wrote: post #21
jordigh wrote: post #14

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 C…

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 th…

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.

Re: A Web Design Crash Course: From Developer to Developer

#42

Post by thisOtterBeSrc »

jordigh wrote: post #14

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 C…

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-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/

Just edit the css and press ctrl+enter.

Re: A Web Design Crash Course: From Developer to Developer

#43

Post by string »

vosper wrote: post #32
string wrote: post #30

Earlier quoted context omitted.

That's strange to hear, in my experience serif fonts are most definitely used more for body text (referring to paragraphs of text) on sites where legibility is a primary concern. Look at the websites of almost any well designed news outlet (Bloomberg, NYT, Guardian, Reuters, etc). I say this as someone who previously worked for a type foundry that has worked with major organisations on corporate type projects and now…

> Look at the websites of almost any well designed news outlet Is it possible that some of this is news-site-specific, due to their heritage as print media, and an online design aesthetic that references (or harkens back to) that?

Yes definitely, this is what I understood by the cultural effect httpsterio was referring to. I still stand by my statement though, I've had far too many meetings discussing this exact topic.

Re: A Web Design Crash Course: From Developer to Developer

#44

Post by systoll »

otterpro wrote: post #5

> Black text on a white background can cause eye strain because of too much contrast. I use dark greys for my content. Then, there is still a lot of contrast, but not as much as there would be with black text. Is there such thing as having too much contrast, in the context of text relative to its background color? I still feel that this blog's text needs more contrast, not less. Perhaps it's only me, but the gray tex…

It's an interaction between user preferences, equipment, configuration, and environment, and we don't really have the information to cut through all that.

An HDR monitor displaying ~1000 nits on black in the dark room is great for film, but no-one would want to read text like that. On the other end of the scale, if you're out in the sun, trying to eek out as much time out of your iPhone as possible, you've probably set the brightness so that you can deal with black on white, but reducing it further would be unwanted.

You can't know what your users are actually seeing, and even if you could, there's a layer of personal opinion on top of all that.

IMO, the only reasonable assumption you can make is that most people have their devices set up so that they're happy with the OS itself -- and every mainstream OS [but especially iOS] uses a ton of #000 on #FFF.

Re: A Web Design Crash Course: From Developer to Developer

#45

Post by swaggyBoatswain »

jordigh wrote: post #14

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 C…

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

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/fea...

Re: A Web Design Crash Course: From Developer to Developer

#46

Post by hithereagain »

wolco wrote: post #35
jordigh wrote: post #14

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 C…

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.

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

Re: A Web Design Crash Course: From Developer to Developer

#47

Post by SOLVM »

Great question. As with all this stuff it takes time. As I know that I can't cover this fully in a post I'd just like to suggest a couple tools to aid you in this process. For a design application, use Figma. LevelUpTuts has a great series on learning Figma. Then use CodePen as a scratch pad for the css/html programming part. You can even copy and hack other people's code to learn how they do it. I'd strongly suggest watching CSSGrid.io for learning css layout. CSS is a mix between layout and style.

My biggest advice is to start by trying to code stuff that other's have already designed. I would recommend going to dribbble.com and searching for "websites" or "ui." This will give you a ton of designs that you can challenge yourself to make. Thus, the design work is done, you just need to practice the coding part. As a result, you will learn what looks good and how to make it. For example, try to make this with html and css.

https://dribbble.com/shots/2982612-About-Eisley https://dribbble.com/shots/4566630-Article-preview https://dribbble.com/shots/3585571-Creative-Design-Agency-We...

Good luck!

Re: A Web Design Crash Course: From Developer to Developer

#48

Post by astoellis »

nikkwong wrote: post #31
jordigh wrote: post #14

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 C…

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…

I know this is 5 days late and a dollar short, but I'd absolutely watch lessons following this process.
Post reply on HN