Design Shack
designshack.net · Group blog · on HN since 2011
A web and graphic design site publishing tutorials, tool reviews, and resource roundups on CSS, Bootstrap, fonts, logos, and responsive design.
What HN saysHN links it for its Twitter logo geometry article and Bootstrap resource list; one commenter criticizes a grid layout article for lacking markup examples.
47HN people shared it
14linked it in comments
44stories submitted
326story points
2 years agolast shared
2011people per year2026
Most-shared posts
- 1Twitter’s New Logo: The Geometry and Evolution of Our Favorite Bird3 people · 2 points · first shared 2012 · discussion on HN
- 2Sass vs. Stylus: Who Wins the Minimal Syntax Battle?3 people · 2 points · first shared 2012 · discussion on HN
- 320 Awesome Resources for Twitter Bootstrap Lovers3 people · 2 points · first shared 2012 · discussion on HN
- 4Zurb Foundation vs. Twitter Bootstrap2 people · 140 points · first shared 2012 · 50 comments on HN
- 5Tips for Combining Google Fonts2 people · 5 points · first shared 2011 · discussion on HN
- 6Review of CSS Hat: Photoshop layer styles to CSS3 with a click2 people · 3 points · first shared 2012 · discussion on HN
- 75 Really Useful Responsive Web Design Patterns2 people · 3 points · first shared 2012 · discussion on HN
- 8Does Adobe finally understand developers?1 people · 60 points · first shared 2012 · 27 comments on HN
- 9What the Heck Is CSS Specificity?1 people · 55 points · first shared 2012 · 20 comments on HN
- 10Bootstrap Goes Responsive1 people · 5 points · first shared 2012 · discussion on HN
- 11200+ Pinterest Boards for Designers to Follow1 people · 4 points · first shared 2012 · 1 comments on HN
- 12Responsive Design: Why You’re Doing It Wrong1 people · 3 points · first shared 2012 · discussion on HN
- 13Focal Point: Intelligent Cropping of Responsive Images1 people · 3 points · first shared 2012 · discussion on HN
- 14Interesting Trends in UI Design - Apple inspired everything?1 people · 3 points · first shared 2012 · discussion on HN
- 15Meet CodePen: Dribbble for Coders1 people · 3 points · first shared 2012 · discussion on HN
What HN people wrote when they linked it
tylershuster · 2025-04-02
https://designshack.net/articles/graphics/twitters-new-logo-the-geomet…
Kagerjay · 2018-07-08
I find math-based designs to be really appealing for a timeless logo design
A good example of this is twitters design
https://designshack.net/articles/graphics/twitters-new-logo-the-geomet…
blaze33 · 2012-10-01
http://bootsnipp.com/ & http://designshack.net/articles/css/20-awesome-resources-for-twitter-b… were recently posted here although they doesn't perfectly match what you're suggesting.
lutusp · 2012-09-10
> A Brief Look at Grid-Based Layouts in Web Design
Yes, most certainly "brief". Somehow the author managed to write the entire article without once showing an example of the HTML/CSS markup one would use to create a grid. Here's a bit more depth:
http://designshack.net/articles/css/rolling-your-own-grid-layouts-on-t…
It turns out that Microsoft has created their own vendor-specific version of grid CSS, all elements of which are prefixed with -ms- (as in -ms-grid). But I recommend that people avoid the vendor variations on the grid system, and I'm not the only one making this recommendation:
http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html
cosmie · 2020-02-19
Google doesn't directly sell data in the first place - they leverage the data they have to improve the value of their ad network (in the form of enhanced targeting and attribution capabilities). It's actually in their best interest to _protect_ the data they have on you, as it's a primary competitive advantage they have over other ad networks.
As far as the unsavory interpretation of how they could conceivably use Fonts data to further that end: calls to download their fonts are another touchpoint with the Google ecosystem, and a theoretical vector for further tracking the browsing behavior and device graph of an individual.
That said, traditional font licensing for commercial use is absolutely bonkers[1][2][3]. Even if Google is using the data they collect from serving font files to feed into their user tracking, they've done a service to the web[4].
[1] https://designshack.net/articles/typography/what-is-a-font-license-and…
[2] Working at a creative agency, I learned that we can't so much as legally use a client-dictated (and licensed) font in a mockup without paying thousands of dollars for a license ourselves.
[3] Webfonts tend to be licensed on a per-pageview basis. One client got hit with a temporary flood of scraping/bot traffic, and the biggest economic impact was the unexpected six-figure font bill that month. We convinced them to put the site behind Cloudflare and used a Worker to strip out the font include for suspected bot traffic and…
amoitnga · 2019-01-29
Being able to produce nice, competent design requires a very different skill set from the one developer has. It's not our job to know what are complementary colors, what is hierarchy etc. But when handed sketch/photoshop design it's part of my job to implement it.
It's not a coincidence that you brought up positioning.
> I can't center my divs properly.
I remember having a similar feeling. What made it click for me was searching for some articles like "how to master css".
Btw, just did that search and this is the article I remember I went over https://designshack.net/articles/css/5-steps-to-drastically-improve-yo… which is the first result.
Understanding how to position things I think was the biggest aha moment: floats, box model, the difference between positions such as fixed, static, absolute etc...
I think if you go over resources mentioned in that article you'll be good enough.
It feels like there is this idea that CSS is very simple, not a real thing, so we don't dedicate the time to learn it.
You wouldn't expect to be good with React after one day, would you? It takes time to learn js, having that base it's easy to pick up React in a few days. And then you read articles on best practices, staying up to date with new versions etc.
CSS requires much less, but still some time and effort. Treat it as technology, give few days, don't skip steps, just sit down and learn it.
You can't solve `x + 5 = 10` when you don't know what `2 + 2…
armchairhacker · 2022-12-21
Is this related in any way to Flux, the now-defunct WYSIWYG website creator? (https://stacksocial.com/sales/flux-7, https://designshack.net/articles/html/how-to-build-a-website-with-flux…
theoh · 2017-03-16
I'm in the field (recent MA in art).
Colour theory, beyond the important concept of complementaries, is very unscientific. I'm not aware of any credible, rigorous scientific findings about colour and emotion that are actually used by artists. (I'm not saying that no credible research will ever exist: see links here https://designshack.net/articles/graphics/the-science-behind-color-and… )
Painters (etc.) choose and apply colour in an intuitive way. Some artists are known as "colourists" for their skill in orchestrating colour effects. The way to learn is to look at that kind of work and absorb the aesthetic.
johnchristopher · 2015-06-23
A long time ago I did some googling (aka `research') on the subject and indeed I found out that using serif for printed documents is non negotiable ; it's supposed (and I agree with that) to let the eyes decrypt words faster and smoother than when reading sans serif. Oddly enough sans serif is easier to decipher on screens. I don't know yet which kind of fonts I should use on my e-reader though.
The web seems to think it's a matter of taste and adequacy nowadays:
http://www.webdesignerdepot.com/2013/03/serif-vs-sans-the-final-battle…
http://designshack.net/articles/typography/serif-vs-sans-serif-fonts-i…
http://www.fonts.com/content/learning/fontology/level-1/type-anatomy/s…
paultreny · 2014-12-05
The one I've found that I like the most so far is:
http://designshack.net/articles/css/make-it-snow-on-your-website-with-…
But I'll have to add start and stop buttons with javascript to toggle the classes on and off.
Goopplesoft · 2013-01-27
Consider it a solid base to build on thats fairly easy to skin later on. As a developer who hates design, I gotta say bootstrap was my kick into liking design. One major tip: put patience in design, dont expect things to happen in 5 minutes do lots of experimentation and tinkering. Also try to get into less css.
Some resources:
http://ajkochanowicz.github.com/Kickstrap/
https://wrapbootstrap.com/
http://bootswatch.com/
http://fortawesome.github.com/Font-Awesome/
http://jetstrap.com/
http://www.boottheme.com/
http://designshack.net/articles/css/20-awesome-resources-for-twitter-b…
kakuri · 2012-09-03
joshwa · 2011-12-14
Related: When working out a UI idea, I work REALLY low-fi and REALLY fast. Quick thumbnail sketches of just the overall layout of elements, or the way an interaction works, done in < 2mins.
The trick is to explore the problem space quickly before even getting to the level of sketching the full UI in context.
Here's a good article explaining the process:
http://designshack.net/articles/inspiration/close-photoshop-and-grab-a…
trying to upload some sketches of mine but the szx airport wifi is oddly not giving me any upload bandwidth...
DavidSiska · 2012-11-23
Hi Sergiotapia,
there are reviews:
MacAppStorm: http://mac.appstorm.net/reviews/web-dev-review/css-hat-turn-photoshop-…
The Next Web: http://thenextweb.com/apps/2012/06/28/sweet-css-hat-turns-photoshop-la…
Design Hack: http://designshack.net/articles/css/css-hat-a-magic-button-that-turns-…
Or you can watch video review: https://www.youtube.com/watch?feature=player_embedded&v=ZcukMGBeXC…
+ you can still read what CSS Hat users says about it on Twitter: https://twitter.com/search?q=%22csshat%22%20OR%20%22css%20hat%22&s…
Hope it helps in decision process :-)