"Whitespace feels modern"?
I like the concept, but I wouldn't be taking design advice that starts with that.
Bootstrapping Design
51–60 of 70 posts
Re: Bootstrapping Design
#52Cool idea! Some inputs: I don't want to spoil your party, but on Windows 7 this site is barely readable because of the used web font. This is happening in Chrome and IE9. In Firefox it looks a bit better.
By the way, personally I think some parts of the page feel a bit cramped. Overall, I don't 'get' it intuitively.
Re: Bootstrapping Design
#53Thanks for submitting this. I'm the author. I'm still in the process of writing and would love to make this a collaborative project. If you have topics or ideas you'd like to see covered, please leave a comment or shoot me an email. hello@BootstrappingDesign.com I'll also be sharing excerpts with the mailing list and on my blog.
As a developer I often struggle with the following things: Picking a color scheme. What colors work well together? Why do they work well together? How do I find good color schemes? Is there a formula or something? White space. How much should I have? I normally just operate in increments of 5px until I think something looks good. "Looks good" ends up being smaller than other sites when I actually compare though. Font…
Regarding your question, "how do I find good color schemes?", here are two web sites I found useful in the past:
http://colorschemedesigner.com/
Poking around Color Scheme Designer should also answer your question "is there a formula?" -- the answer is yes, there is (bad taste notwithstanding).
See also http://en.wikipedia.org/wiki/Color_theory and this old comment of mine: http://news.ycombinator.com/item?id=2130084
EDIT: this page, linked from the Wikipedia article, is also quite informative: http://www.worqx.com/color/
Re: Bootstrapping Design
#54Thanks for submitting this. I'm the author. I'm still in the process of writing and would love to make this a collaborative project. If you have topics or ideas you'd like to see covered, please leave a comment or shoot me an email. hello@BootstrappingDesign.com I'll also be sharing excerpts with the mailing list and on my blog.
Something that would be hugely useful to me (a code monkey who knows good design when he sees it but is incapable of producing anything that looks nice himself) is a chapter that covers a few essential skills in Photoshop or Fireworks. Basic nuts and bolts stuff like: - how to use a few simple effects and filters to blend images in to backgrounds or do a cutout or colorize an image to match the sites colour palette -…
Great suggestion. Learning design software, at least basics, can be productive.
Some designers will disagree on this point—many are moving away from Photoshop altogether. However it's more difficult to try color variations for a gradient by typing in hex colors, for example. Including up some basic techniques would make sense. (Every professional designer has a few go-to tricks.)
I'm thinking about providing some free design files with the book. Just basic elements, like buttons, styles, etc than can be adaptable. (And easy to translate into CSS.) Would that be helpful for you?
Re: Bootstrapping Design
#55My experience is primarily back-end development, so I'm a complete UI design dummy. I have a stupid question that I always mean to look into "when I have time" - - given topic, perhaps someone on this thread can answer. Why does the font in the input box on the bootstrappingdesign lander look so screwy and hard to read, relative to the rest of the page? (I'm running Chrome on a vanilla Windows 7 box.) http://i.imgur.…
As mentioned it is a problem Windows has rendering fonts. More accurately, it is a problem all non-IE Windows browsers have rendering fonts. Open the site in IE9 and you'll be able to enjoy it as intended. I would also advise you not to fiddle with the ClearType tuner, in my experience it will not help you with this problem.
So what is the solution here? I'm sure its not that I should be running IE9 :-)
I'm experiencing the same problem rendering the site on Chrome in Windows 7. I tried running through the ClearType tuning thing - with no success.
However, it appears that Chrome on Windows is the problem here, as it also renders fine in Windows Firefox. Chrome and Firefox in Ubuntu works fine as well.
Here is a Windows 7 comparison of Chrome vs Firefox rendering:
Re: Bootstrapping Design
#56Earlier quoted context omitted.
As mentioned it is a problem Windows has rendering fonts. More accurately, it is a problem all non-IE Windows browsers have rendering fonts. Open the site in IE9 and you'll be able to enjoy it as intended. I would also advise you not to fiddle with the ClearType tuner, in my experience it will not help you with this problem.
So what is the solution here? I'm sure its not that I should be running IE9 :-) I'm experiencing the same problem rendering the site on Chrome in Windows 7. I tried running through the ClearType tuning thing - with no success. However, it appears that Chrome on Windows is the problem here, as it also renders fine in Windows Firefox. Chrome and Firefox in Ubuntu works fine as well. Here is a Windows 7 comparison of Ch…
This is getting interesting. For me on Windows 7 Firefox (both 7.0.1 and the current Beta version), Chrome, Safari and Opera all have this issue while IE9 does not. Which version of Firefox are you running?
Edit: Additionally, if I use the so-called "F12 Developer Tools" in IE9 to switch the browser mode to IE8 the font will have the same problem.
Edit 2: I found this article http://www.owlfolio.org/htmletc/legibility-of-embedded-web-f... - I also found a few references to being able to activate hinting for the fonts used in the embedding process. Not sure what the options are from TypeKit (the service used on this site) and I can't check on my own TypeKit account as their website is currently down for maintenance.
Re: Bootstrapping Design
#57Thanks for submitting this. I'm the author. I'm still in the process of writing and would love to make this a collaborative project. If you have topics or ideas you'd like to see covered, please leave a comment or shoot me an email. hello@BootstrappingDesign.com I'll also be sharing excerpts with the mailing list and on my blog.
As a developer I often struggle with the following things: Picking a color scheme. What colors work well together? Why do they work well together? How do I find good color schemes? Is there a formula or something? White space. How much should I have? I normally just operate in increments of 5px until I think something looks good. "Looks good" ends up being smaller than other sites when I actually compare though. Font…
I'd like to second this. Especially the "why". I do recognize a good design when I see it, and there's an overwhelming wealth of tutorials on the web. But, for me, the link is missing - _why_ does this look good?
Why is Helvetica better than Comic Sans? There must be a reason other than "obviously, it looks better". Don't hesitate to show me the math, and the formulas. I got a machine with me. It can calculate pretty good.
Re: Bootstrapping Design
#58Earlier quoted context omitted.
So what is the solution here? I'm sure its not that I should be running IE9 :-) I'm experiencing the same problem rendering the site on Chrome in Windows 7. I tried running through the ClearType tuning thing - with no success. However, it appears that Chrome on Windows is the problem here, as it also renders fine in Windows Firefox. Chrome and Firefox in Ubuntu works fine as well. Here is a Windows 7 comparison of Ch…
This is getting interesting. For me on Windows 7 Firefox (both 7.0.1 and the current Beta version), Chrome, Safari and Opera all have this issue while IE9 does not. Which version of Firefox are you running? Edit: Additionally, if I use the so-called "F12 Developer Tools" in IE9 to switch the browser mode to IE8 the font will have the same problem. Edit 2: I found this article http://www.owlfolio.org/htmletc/legibilit…
The version in the screenshot is 7.0.1. Now I am realizing that Chrome is rendering lots of sites without anti-aliasing, not just bootstrappingdesign.com. Just something about that site made me notice it.
Re: Bootstrapping Design
#59Earlier quoted context omitted.
Thanks so much for the list. I'll make sure it's covered.
Also: I am a colorblind engineer. How can I pick color schemes that don't make infants cry and write copy that isn't a legendary cure for insomnia?
John Hicks (of Firefox-icon-fame) is a colorblind designer. He gives some hints for coping on his blog sometimes -- http://hicksdesign.co.uk/tag/colourblindness/
Re: Bootstrapping Design
#60Earlier quoted context omitted.
So what is the solution here? I'm sure its not that I should be running IE9 :-) I'm experiencing the same problem rendering the site on Chrome in Windows 7. I tried running through the ClearType tuning thing - with no success. However, it appears that Chrome on Windows is the problem here, as it also renders fine in Windows Firefox. Chrome and Firefox in Ubuntu works fine as well. Here is a Windows 7 comparison of Ch…
This is getting interesting. For me on Windows 7 Firefox (both 7.0.1 and the current Beta version), Chrome, Safari and Opera all have this issue while IE9 does not. Which version of Firefox are you running? Edit: Additionally, if I use the so-called "F12 Developer Tools" in IE9 to switch the browser mode to IE8 the font will have the same problem. Edit 2: I found this article http://www.owlfolio.org/htmletc/legibilit…
I only see the issue in Chrome and IE Typekit does provide samples of how the fonts render in various browser/OS combinations: https://typekit.com/fonts/calluna
(Click "Browser Samples" tab.)
It's definitely a limitation of @font-face and something I should have accounted for in the design. Apologies for poor legibility.