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

31–40 of 48 posts

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

#31

Post by nikkwong »

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, 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 :)

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

#32

Post by vosper »

string wrote: post #30
httpsterio wrote: post #19

Earlier quoted context omitted.

Sans serif fonts are more used on body fonts, because they're more legible on screens. On paper, it's the opposite. Text size plays an important part here, because the serifs in serif fonts makes the letters stand out better on a smaller font size and the serifs "guide" you to the next words, making the paragraphs flow better together. With HD screens and proper font rendering, sans serif fonts are generally faster a…

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?

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

#33

Post by goobynight »

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…

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.

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

#34

Post by otras »

news_to_me wrote: post #16
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…

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

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/

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

#35

Post by wolco »

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.

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

#37

Post by megous »

aldoushuxley001 wrote: post #25
tiborsaas wrote: post #21

Earlier quoted context omitted.

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…

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

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.

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

#38

Post by megous »

aspit wrote: post #6
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…

Here's more on that! http://uxmovement.com/content/why-you-should-never-use-pure-...

> White has 100% color brightness and black has 0% color brightness.

There's no 100% black. People should stop with this nonsense. My monitor's black is pretty greyish by default. It gives nice illusion of blackness because it's also very bright with the whites, so contrast is high, but try comparing a black screen and turned off monitor screen. It's grey as hell. There's no standard screen. If people's eyes are offended by high contrast, they have a contrast knob on their monitor or video card.

I really don't appretiate all those designers' concern for my eyes. It's really not called for. If I want less contrast I can move the virtual knobs on my monitor, and I'll get it set globally. Now the concerned designers just caused a double decrease in contrast on their websites compared to normal readable websites wich use #000 for body text, which is now much harder to correct compared to moving a stupid knob.

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

#39

Post by notriddle »

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…

> Also, I find HN to be very readable (which uses absolute black text)

On a background that is not absolute white. It's a matter of contrast, not black vs gray text specifically.

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

#40

Post by RobertRoberts »

debaserab2 wrote: post #18
RobertRoberts wrote: post #15

Earlier quoted context omitted.

The way I have dealt with this issue for the past decade+ is to simply offer multiple tiered pricing for my clients. By default, the lowest price is design that supports the most modern browsers. The older and more problematic the browser support required, the more it adds to the project cost. This cuts out 99% of all the old browser support issues in my business. Very rarely does someone need more than "just ok" sup…

Yeah, it just depends on your audience. It's still a problem in B2B situations. Most notably when a customer's IT is contracted. Unfortunately for me it's not a matter of price tiering, it's about producing a product that has been working for customers in outdated browsers that continue to expect it to work that have signed annual+ contracts.

Negotiations and communication can help resolve these kinds of problems. (in my experience)

The core motivator to start the discussion can be simply profit margin. I've hit points where it's not profitable, and therefore gets cut from our offerings. But if someone wants to pay extra, we can accommodate.

Is it possible that by changing the requirements/costs of the product you would lose the account/business?

The way I started this discussion is with the phrase "web standards", and these are cheaper to build towards. So "non-standard" systems cost extra to support now. But this also meant I could lower my costs on some other work, so it wasn't smoke and mirrors, it was legitimately easier and less time consuming. (also, makes everyone happier to work on standards instead of spending most of our time with hacks and debugging because reasons)

Post reply on HN