Ask HN: What are your design hacks for better web design?

Is there one typography book you'd recommend in particular to start with?

Butterick's Practical Typography[1] is free online and a really good read.

To go beyond just one book there are good posts and book recommendations on Typekit Practice[2].

[1]:http://practicaltypography.com/

[2]:http://practice.typekit.com/

Every design I do is different, so I wouldn't have any specific rule of thumb. But there are some common things I do related to the process of designing; I guess you could call it my own personal best practices. The first thing I'll do is start with colors, and come up with 4-5 different colors that compliment each other and convey some sort of theme or feel. Once I have that down, then I get into the graphic design and create a logo. Once that's created I'll start to do the general layout for the website. The first part I work on is the UI and navigation. I'll usually storyboard all the pages of the site, and come up with what I call a navigation strategy. This will allow me to determine what type of UI and navigation elements I'll be using for each type of device. This gives me an opportunity to ensure that the navigation experience will be consistent across multiple devices. Once this is known, I'll decide on what frameworks I might use (if any) to help prototype the design faster. In some instances, and depending on what the website will be doing, I might combine multiple frameworks and use custom builds of each one as not to overlap. This allows me to pick and choose what parts of each framework will compliment what I'm building. So for example, if I'm designing for a Phonegap App or Web App, then I'll use certain frameworks. If it's for a Blog or Website then I might use other ones. Once that is decided, then I'll move on to building. Make sure you put lots of comments. I use my own custom set of css media queries that allow me to do specific designs for every major device in both portrait and landscape views. I always start with the tablet's (design for tablet first). I'll usually start with portrait, and then move on to landscape. Once the tablet view is done, then I move on to Mobile (also portrait first, landscape second). The last view I work on is the Desktop view, with 1366px wide being the most common resolution. But I also make sure it works well on 1920px+ wide resolutions. Using the css media queries, I can do this multi-view prototyping using the same files, usually using Firefox Responsive Design View to change the resolutions and orientations. If the html syntax needs to change for different views, then I'll use the media queries to control that as well. This allows me to prototype pretty fast for mobile, tablet, and desktop. Getting it production ready requires more steps, but hopefully this helps!