Once upon a time, I wrote a World of Warcraft add-on called "SexyMap". Basically, it provided a bunch of functionality for your mini-map, and it made it skinnable in a crapload of interesting ways, so that people could build maps that thematically fit with the rest of their UIs.
As of right now, it is registering at 4,692,196 downloads.
Nobody customizes the damn thing. In every screenshot I've ever seen with someone using it, they're using the default skin. The really creative ones do a hue-shift on the default skin. It ships with a good dozen+ skins, and has an editor built into it to let people easily build more. The only time that functionality has apparently been used is when I was building the initial default skin set.
Default Bootstrap annoys the heck out of me, too, but I've learned that people just don't customize things even if you give them the tools to do it. If it's good enough out of the box, they just leave it alone. Bootstrap is good enough out of the box.
I expect years upon years of default Bootstrap websites. We'd best get used to them now.
Spot on. If your audience is basically anyone outside of the HN echo chamber, then default bootstrap is just fine.
I used to build big internal webapps for big companies. My design skills are only slightly better than those of a drunken orangutan.
After discovering Bootstrap, I used it to build a static prototype of a new system I was pitching to one of my clients. Not only did they spend nearly 10 minutes gushing about how clean and gorgeous and minimal the design was, they approved the project immediately and suggested that I re-skin an older webapp with the same theme.
After I told them that I'd used Bootstrap to build the mockup, they said "Oh yeah, I think one of our other teams is using that too. Good stuff!" I still got credit for being a design genius.
If you are building an app for attorneys, pool cleaners, CPAs, gardeners, insurance agents, property managers, window washers, dog walkers, code enforcers, self-storage facilities, mailbox companies, dentists, or payroll supervisors, then in 99% of the cases, they have never even seen a UI half as beautiful or usable as as the bare default Bootstrap styles.
Niche software is, as a general rule, terrible. It's clunky to use and looks even worse.
So, again, if you're building software for designers or people who hang out on HN all day and get annoyed by UI uniformity, then by all means invest a lot of time and money coming up with something unique. But if you're selling to people somewhere else out there in the greater world, that time and money will be 1000x better spent in getting to know your customers, finding out how to reach them most effectively, and creating a compelling offer.
Hey man, I agree with you. I mean, I used that customized version of bootstrap (that lead me to write this article) to skin an app I was working on and I still hear praises on how awesome it is and how much better it looks than their prior software.
I just feel like that extra nudge of color customization, the new icons and so on could make it shine even more. And honestly, I think just about every dev out there would appreciate it too. I'm not saying spend half a day on it, keep it to 30 minutes max of playing around with it, that's it.
I agree with you and moreover I don't see a problem with default Bootstrap sites.
I know a few dozen restaurant sites alone that I could only dream of being remotely as pleasant to look at as a default Bootstrap site.
The internet has come a long way since the era of Geocities, faux 3D gifs and blink tags, and I am very thankful that there are tools to make a site look passably pleasing with very little effort. I will gladly get used to them.
Bootstrap should come in 25 subtle-variants, and a random one should get picked/compressed/served with each download. Like Magic The Gathering // Pokemon booster packs. Remember those? You never knew what you were going to get.
I agree with you though. Also, most of the customizations I've seen of bootstrap look like garbage. Seeing the same bootstrap styles EVERYWHERE is definitely getting old and annoying, but I have to force myself to remember that Bootstrap is pretty damn cool and had some great design thought put into it.
The variations? Typically: not really. The first example that comes to mind is FoundationDB (a local DC startup woohoo!) but they took Bootstrap and in my opinion made it worse: http://foundationdb.com
I wouldn't necessarily say that the FoundationDB site is bad styling, more that every single info page seems to be a massive wall of text. Could do with some pruning.
> Default Bootstrap annoys the heck out of me, too, but I've learned that people just don't customize things even if you give them the tools to do it. If it's good enough out of the box, they just leave it alone. Bootstrap is good enough out of the box.
It's also the case that most people using Bootstrap are using it because they can't design anything of comparative quality, so most people using it are not in a position to make it better even if they wanted to.
I don't disagree, but I think it's important to make the distinction that the OP's argument isn't "replace Bootstrap with your own framework", it's "tweak it so it doesn't look like you just drove it off the factory floor". He even gives examples of tools you can use to do so. You don't have to be a designer; just tweak the colors and some of the paddings and you have a very different site.
(Hi, thank you guys for letting me monetize my hobby! :D)
The authors of SpeedTree, a game rendering middleware, had the same experience;
> We launched SpeedTree with just a few dozen tree and bush species, assuming that our customers would prefer to bypass the library and develop their own plants. But once our first licensees started sending us screen shots and demos, we were surprised to see many of our original trees in them, little changed from those we had provided in that first small library.
Tools like Bootstrap are a means to an end for a lot of people. It's enough to get theme there, and not be horrible — gets them back to focusing on their original problem.
(Also: thanks for SexyMap, my wife and I loved it! On default settings.)
Good observation, and I think it lines up with the "good enough out of the box" argument.
Most non-designers probably feel lost when trying to come up with an initial design framework, and Bootstrap gets them up and running, then once it passes the "this doesn't suck anymore" line, they just stop worrying about it.
(Glad you enjoyed the addon. On the default settings. :)
Every client that I've ever worked with has asked for a huge degree of customizability: drag-n-drop widgets, WYSIWYG content editing, themes, etc.; invariably, none of it ever gets used.
Your example is too specific in terms of context. Add-ons in WoW are usually minimal in design, out of the way and not attract attention to itself (besides the info it is displaying). Unless your default skin has blinking lights, rainbow colors, detracting the user from actually gleaming the info the addon is displaying, a user has no reason to mess with it.
Bottomline, UI Addons in WoW are meant to be minimal in design (just look at all the popular unit frames, action bars addons, even yours - all minimal and functional). There's no reason to ever jazz up the UI for WoW - that'd be self defeating.
But Bootstrapping is different - it will depend on the function, which stage of the product is at and purpose of the site. Each scenario is different.
I agree that they're different in that website design is very much about building a brand, but a WoW UI is possibly even more in need of good design than a website, because its sole purpose is to provide a tremendous stream of realtime information to the player in a way that will let them manage it all and respond to it quickly. There's much more information to manage, and everyone will want it managed differently, so it seems to reason that people would want to take a tool with flexibility and use that flexibility to mold the display to their preferences. That was certainly my expectation when I was writing it.
The reality was that for whatever reason, people don't - and the default is big and garish, and doesn't fit with their UI at all, and somehow it remains unchanged.
My experience as an author and player is that most addons are not "minimal"; they're often plain, which is not anywhere near to the same thing. My most popular addons (tens of millions of downloads worth!) were also the ones that provided the broadest range of visual customizability, and I've seen a huge range of visual configurations for them. On top of that, SexyMap is definitely the least "minimal" out of the bunch (in terms of skin; it actually makes the UX much more minimal over the default minimap), so I'd expect it to be the most commonly customized, but it practically never is, to the point that "Oh look, a screenshot with a default SexyMap in it" has become a joke among my friends.
When I say minimal, I mean minimal in terms of look/clutterness. Not minimal in terms of function.
Your addon (from screenshot on Curse) is extremely minimal. It just have a map - that's it. It doesn't mean it doesn't have any more fuctions/tweaks. Compared to default UI, where you have strokes on top of strokes, you have those other minimal circles that live around the map, you have all these options. Your addon essentially removed those from the map UI (or hide them till user wants them/turns them on), hence minimalism. You have different skins, but they don't take away from the function of your addon. It's minimalism is constant. Hope that's not making it more confusing.
Thinking more about this, instead of having the players be compared to Twitter Bootstrap users, you (the add on developer) are the bootstrap user. You have all these options to use Blizzard's default UI and color, but you didn't. You made your own :)
> Add-ons in WoW are usually minimal in design. There's no reason to ever jazz up the UI for WoW - that'd be self defeating.
I'd disagree, even the defaults of a lot of the custom UI add-ons were overdone and I had to scale them back. The majority of the people making add-ons aren't designers themselves, so the outcome of their efforts is going to be based on their experience or needs, not necessarily on the idea that UI should be minimal.
Additionally a good portion of these add-ons were made specifically to be very visible and add functionality that was either hidden or not available in the game. Screenshots from some of the top raiding guild members were overwhelmed with buttons, notifications, etc. because if your macro is good and communication is consistent, you just need to focus on these more intentionally-prominent add-ons.
You're saying the exact same thing I am. I mean minimal as in non fluff stuff ie: the gargoyles Blizzard has around their Actions Bars.
Also a reason why WoW Custom UI Addons is a perfect example, because the developers aren't designers, that's why most of them are minimal in aesthetics. So without trying, they're minimizing the visual aspect and focusing on the function already.
Bartender is a good example - tons of customization and tweaks but it's minimal in design. It's just buttons. No fancy background, borders, colors. Just purely the icons.
Perhaps we downloaded different add-ons or I just never found the right one. I had to uninstall quite a few because I was specifically looking for the ability to do clean and simple and instead got really loud and annoying without the depth in customization needed to fix it. Those that did offer the ability to truly extend the interface made it way too tedious to do so. It got to the point where I was trying to find a dev on Curse to help me create better options before ultimately deciding that I didn't want to be tied to supporting something on a game I was already putting too much time into.
I've spent a ton of time customizing my Bootstrap-based site, but I didn't use the available tools.
Why? Because like most programmers, I build things incrementally. The first iteration looked like a typical Bootstrap site until I started to replace default components, such as the navbar, fonts, and buttons.
Overall, I'm not very impressed with customization tools, and I'm sure real designers would be even less apt to use them since it's easier to write some extra CSS.
Agreed. Look, I'm not saying do this for everything but if you want to stick with Bootstrap default or don't want to mess with the settings too much, or just aren't a front-end dev per se, at least use those techniques stated in the article. I did it for my own projects but I've also built other projects where I just pasted in some BS stuff that I found fitting (for example, their table styles).
Rather than stick with the default (for rapid app/site devs), spend that extra small amount of time to make your product distinct.
If you're working long-term on a larger project, i don't suggest this as the route to take (ie. customize bs and just stick with that) and agree with you that things SHOULD be more customized to what you need.
I find as a programmer/business person of ONE, if I spend too much time customizing at the onset I'll spend way too much time on things that won't matter.
Customization, colors, etc can come later when I get all my other things done.
It literally took me 10 minutes to change some colours and adjust some border radius sizes. That coupled with not using the big ticket bootstrap navbar left me with a site that was not obviously Twitter Bootstrapped. I am not a designer.
I've found there is an interesting corollary to this: a good default configuration is more likely to make your product* successful than a poor default configuration with a lot of customization options.
I'm not saying that products shouldn't strive to be as customizable as possible, just that providing the product with a set of sensible defaults will go a long way in adoption.
* I use product loosely: anything from text-editors, phones, cars, subway sandwiches.
Completely agree. I think sites that customize bootstrap should have presets that you can work of.
I'm not a designer so when I see so many options I'm overwhelmed and don't really know where to start, but if they gave different presets that you could preview then you could find the one that best suits you and modify small things you'd like to change.
Right right, check out boottheme and some of the other resources in the article! Boottheme shows you everything RIGHT THERE. You can even do a "dice roll" and have colors/settings scrambled to your liking. The scrambler actually works pretty well too and half the results aren't too bad either.
I did exactly the same thing -- was looking at boottheme and wondering how to generate something other than the default. Never occurred to me to wonder what the dice icon did.
Is there a crazy reason that why a project owner couldn't from the server side define 7 or so different sane default versions of their GUI and serve them at random from the same download link so that some of the work would be put to use?
As we are now working in the post-Bootstrap era, if I ever put out a GUI library, I think I might do just that.
I can personally attest to you being wrong. I skinned the hell out of Sexymap. Thanks, btw, you made my life a lot easier, and I actually primarily used your mod to figure out LUA.
It's been said here before, but I'm fairly sure the only people "disappointed" and "annoyed" at the many sites using Bootstrap are web developers. Of course we notice UI frameworks because it's our job to create websites.
However, the vast majority of users don't give a half a cent about what UI framework the site is using, let alone know what a front-end toolkit is. All they notice is that it is easy for them to interact with the app, probably much easier than if the developer had coded it. In fact, the site is probably built sooner anyway since the developer didn't have to spend the time to create a UI by themselves.
> I’m sick of seeing the same damn buttons. I’m sick of seeing that same damn toolbar up top. It’s driving me crazy.
Take this advice with a grain of salt. As much as I agree with this statement, the fact is, if your audience isn't a group of people familiar with bootstrap, then this probably won't be a problem.
"It's been said here before, but I'm fairly sure the only people "disappointed" and "annoyed" at the many sites using Bootstrap are web developers. Of course we notice UI frameworks because it's our job to create websites."
Are you sure you meant Web Developers? It sounds like you meant Web Designers.
I wouldn't use Bootstrap for any client-facing website, but other agencies I know have tried it and those that work on the lower-end of the client scale have had trouble with clients not wanting to pay when the look of certain elements looks almost exactly like those on other sites they've been to.
Bootstrap is a decent tool, but it has been abused by non-developers and non-designers that cannot develop or design their own pages. It's hardly surprising, and it's a testament to how good Bootstrap can be. However, I hope that Twitter eventually scales back some of Bootstrap to allow people that use it for its intended use to get more out of it.
I've been using Bootstrap more and more for mostly one reason: it's responsive grid. I'm sure there are alternatives, but it required very little effort to find Bootstrap and it does what I need it to do effectively. The other features are a bonus I can choose to use or to leave out.
Most of BS's javascript features need to be loaded separately and if you use LESS, you can scale back a huge chunk of the CSS if you don't plan to use certain CSS features.
It's true that users won't be annoyed by a standard Bootstrap site, and in fact is preferable to many high traffic websites that just look absolutely terrible. The point is, however, that it doesn't give your website/business/product very strong branding if your website looks just like 10 other ones someone has seen. It's not a problem with usability so much as it is with creating something beautiful that actually represents the brand and evokes the right emotions. Stock Bootstrap doesn't do that. Totally fine for blogs, presenting a weekend project, and many other use cases, but there are also many instances when it would be a very poor decision.
If anything - look at WordPress, Tumblr, Indexhibit/Cargo Collective and all of the other sites that rely heavily on themes. Spend a few seconds on Cargo Collective if you haven't and then think about all of the designers' portfolios you've seen that use that exact layout. Only reason you might not notice it off-the-bat is because the content is different and they're usually so minimal you think nothing of it.
Additionally, if you spend any time looking at the uploads to Dribbble, a lot of those layouts look similar to each other regardless of pre-existing templates simply because they needed to get something up fast or they just liked another person's concept so much that they took it and modified it just enough.
That being said, it'd take a few seconds to change that black bar to a brand color to make it look passably different.
I have used many frameworks of the past, but Bootstrap is in a different league coupled with LESS. It just is.
I see Bootstrap as being not too dissimilar from iOS UI. In the early days, you saw a lot of UI's built on Apple's native guidelines without much deviation. It was just difficult, the SDKs weren't fully baked for it. If you wanted to maintain compatibility as Apple progressed rapidly, you stuck to the basics.
Now you're seeing all sorts of amazing UI's built upon a solid fountain for interacting with multi-touch mobile apps. Similarly, Bootstrap is an equally great foundation for building responsive web apps that just continues to get better.
As it becomes more of a standard, then more time becomes available for the veneer. After all, that's really the only thing people are complaining about — something rather superficial and has no real impact on value of the product. What is does to the user experience is an open debate (more graphics = slower on mobile). I'm on my 3rd project with Bootstrap, and finally feel like I have a grip on adding veneer programmatically after some trial and error.
Want to start a small-cap cash cow? Get some great designers together and go make the next WooThemes for Bootstrap.
"something rather superficial and has no real impact on value of the product."
Have you A/B tested that? Cavet: To normal real world folk, bootstrap is shockingly new-high-tech. But you would be surprised how much, say, a dark green background will help a forestry related website or a swiss bank.
This is excellent stuff and we need more of it. If simply to eliminate the drudge work of defining GUI's so we can get back to building value in our companies.
Color theory is simple to apply with CSS. The type of veneer I'm describing goes way beyond that. Fortunately with CSS3, more of it is moving to the style sheet but it was very tedious until LESS and mixins came into the picture.
Don't forget split testing suffers from ceiling effect.
> I’m sick of seeing the same damn buttons. I’m sick of seeing that same damn toolbar up top. It’s driving me crazy.
If only html/css/js/browsers had default decent(or even non-decent) standard gui widgets from the beginning, there won't have been a need for bootstrap, and hence no need for getting riled up over buttons looking the same.
Making "submit" button different on every site you work on might have a purpose; it's just that that "purpose" totally eludes me.
I don't know what app the blog post is talking about, but if you decide not to use an app because it uses default bootstrap theme implies 1) either you don't need the app and are just fidgeting around; 2) or the app has so much competition that people are making decisions based on trivialities; 3) or you are the kind of person who decides he wants a silver car first and then decides what kind of car he wants. As a developer, if it's 1, you aren't a priority. If it's 2, I will have to check if bootstrap is the reason people are picking up the competition over me - if it isn't and I already have ample competition breathing down my neck, I have other things to worry about. If it's 3, I will be bothered only if there are many like you who want a silver car first and bother about the mileage, pickup, handling etc next; if that isn't the case, you can shop for your silver car elsewhere.
The submit button isn't the problem. Look at the default HTML styles. What sites out there still use that blue color for a link? It's one of the first things that gets redeclared in CSS.
As far as the audience, yes, I was just messing around with a few apps and looking at them. Each time I felt like there was something drawing me away from using it. Design is not disjointed from app usage. It's part of usability, it's part of the allure of an app. Read up on it.
Also, it's an EASY fix. Don't want to look like every other page hosted on Github or any other small app page? Customize bootstrap. Within 30 minutes, you're capturing audience, but not only that, you're standing out. It may not be specifically that bootstrap usage REPULSES people it may just be it doesn't really get them riled up about your app or make your app memorable.
> What sites out there still use that blue color for a link?
What do you mean that blue? As far as using blue for links go, I scanned my opened tabs and Google, Facebook, Github use blue for links. Bootstrap's blue isn't the browser default blue. They made it blue because most of the users expect links to be blue.
> Design is not disjointed from app usage.
I don't remember claiming it is. The default bootstrap them isn't bad design. It's better than what a typical developer or designer comes up with. Also, the user doesn't give a shit if the buttons look the same on all websites. Most of the users won't even notice.
> It's part of usability, it's part of the allure of an app. Read up on it.
Making links non-blue or changing button colors isn't usability. Read up on it.
> Don't want to look like every other page hosted on Github or any other small app page? Customize bootstrap.
I would do that if I don't want to look like every other bootstrap site. Does this even need to be said?
> Customize bootstrap. Within 30 minutes, you're capturing audience,
I missed the part where you proved changing bootstrap theme captures audience in 30 minutes.
> It may not be specifically that bootstrap usage REPULSES people it may just be it doesn't really get them riled up about your app or make your app memorable.
Since you are throwing around a lot of "maybe" and anecdotes, I will throw one of mine. I am yet to meet someone who is repulsed by bootstrap and is a customer - people who need my app and directly or indirectly pay for it.
"that blue" is the default browser blue and if you check Facebook uses a different blue and doesn't use the default underline, neither does Google and neither does Github. They all changed the default.
I'm not saying it's bad design. And if they don't notice, good for you.
it's part of legibility. And yes, it's part of usability as well
that was a point. Do you want to look like every other page hosted on github or any other small app page?
the article states how long it takes to change to customize bootstrap. It's less than 30 minutes. Within that time, you can have a site that doesn't look like stock bootstrap thus differentiating yourself from the rest of the sites that look exactly the same.
Different audience desires different stuff; however, having a site that keeps away from the default is brandable, much more so than a default Bootstrap site. Branding is marketing 101.
> > What sites out there still use that blue color for a link?
>> "that blue" is the default browser blue and if you check Facebook uses a different blue and doesn't use the default underline, neither does Google and neither does Github. They all changed the default.
Bootstrap doesn't use the default blue either.
> it's part of legibility. And yes, it's part of usability as well
It's part of legibility, but your changes aren't making it any more legible than it already is.
> that was a point. Do you want to look like every other page hosted on github or any other small app page?
Depends.
> Within that time, you can have a site that doesn't look like stock bootstrap thus differentiating yourself from the rest of the sites that look exactly the same.
Again, that depends. Consider freshbooks - a small product I use. It can very well switch to bootstrap theme or geocities era design. I won't give a damn because it's free and serves my purpose. I am pretty sure there are other invoicing solutions out there, but whether they use bootstrap or not(an example; none of them do) isn't a variable in my decision.
> however, having a site that keeps away from the default is brandable, much more so than a default Bootstrap site. Branding is marketing 101.
At this point, I will just agree to disagree. You seem to place a lot of importance on visibly differentiating a product. For me, visibly differentiating(as in changing a few less variables in bootstrap) is so low on the list that it fell down the list.
> What's your site's URL? I'd love to check it out.
Mostly enterprisy stuff. I do contractual work with Ruby/Python/Clojure.
The default HTML styles are fine as they are. You can create a document with no custom styles and it'll be perfectly legible. More to the point, old sites with unstyled HTML documents will remain perfectly legible and structured.
One could argue otherwise that the needs of the web have outgrown HTML as it was originally intended.
I can get behind the headline. However, the implementation is seriously lacking. I'm not a designer. I can't find anyone who can explain to me the hows and whys of CSS without expecting me to already know CSS. So I just copy CSS that I like.
I've implemented Bootstrap on a new site. I see your colorschemedesigner.com link. Now, how do I get these colors from it into Bootstrap? Oh, the Bootstrap customize page. Which colors from Color Scheme Designer 3 go in which boxes? If I have to edit CSS, which files do I have to edit and why?
You're a designer and you think this stuff is "easy." Speeding up your database-centric app is easy, too. Use a proper RDBMS and correctly normalize your data. What? You don't understand? Yeah, that's how I feel when designers expect me to "fix" my Bootstrap-clone website.
Edited to add: On Color Scheme Designer, I find a set of colors I think looks nice and then look at the light and dark page examples ... and they look like ass. I have no patience to sit and find something that looks nice here and drop it in Bootstrap there and discover that it looks terrible. A lovely 'download Bootstrap CSS' link on this site would save tons of time.
"On Color Scheme Designer, I find a set of colors I think looks nice and then look at the light and dark page examples ... and they look like ass. I have no patience to sit and find something that looks nice here and drop it in Bootstrap there and discover that it looks terrible."
I'd say trial and error with this is actually a great way to learn some basic color theory and develop your intuition about what looks good on a page. This is a good skill to hone and is really what the most important part of being a designer is. Once you put the time in to really study color and what looks good, implementing it will get faster every time you go.
> If I have to edit CSS, which files do I have to edit and why?
Seems to be the wrong approach. Framework code shall never be changed. The challenge is to design e.g. your own button that is based on the Bootstrap button. This approach is upward-compatible.
Assuming this is indeed the case, I'm surprised this isn't a big attention-getter on the bootstrap site. I also have no idea how I'd go about 'extending' the bootstrap button into something for me.
Okay, okay, okay, i got it. Use boot theme. Press a die a bunch of times, wait until you find a color combo that doesn't look like ASS. Download. Saved you half the steps.
The bootstrap customization page sucks. i don't really use it myself.
I just don't get the bootstrap hate. Same buttons and toolbar? Well you see the same buttons and toolbar about every page, in your browser window. It doesn't bother me.
I completely agree. The browser surrounding these fancy web applications hardly changes at all, I don't mind coming across bootstrap wrapping a cool application in the slightest. Nor do I mind finding yet another default Octopress blog.
When I see bootstrap or the default Octopress theme I know:
- it's gonna be readable
- what the buttons will look like
- the typography spacing won't be hideous
- etc.
Frankly, I'm even relieved to see a default theme like Bootstrap instead of the programmer spending a week trying to make a design and failing utterly.
That's fine. I tend to get riled up about it because there's just no variety. I understand "standards" and "defaults" the way that the browser displays stuff but this is just a bit too much for my taste.
I don't mind it because the people who use bootstrap get to spend their time doing something more productive than making a platform. I appreciate the advice about easily customizing it, though. I didn't think it would be that easy to make something unique on bootstrap.
I definitely agree with your statement. That's why I said, I know why people use it. I'm so glad I don't have to spend an hour trying to come up with styles for a particular thing and have something built in.
With that said, it's even nicer that the interface I look at for 8 hours a day is actually customized and unique.
It's funny how when people use alternative dev tools to build UIs on OS X, people complain that the resulting applications "don't look like Mac applications", but that at the same time web applications are expected to look different from one another. What purpose does that look/feel diversity solve?
I get the feeling that many of the complaints about "doesn't look like a Mac app" really mean "isn't as polished".
Chrome on the Mac isn't completely consistent with how Mac apps work but no one complains about it (as far as I know) because it's polished and works well.
Applications are about functionality. The purpose consistency serves is making the interface familiar and therefore more intuitive. Conversely, websites are largely about branding, and consequently distinctiveness. Web apps sit in the middle of these two domains.
As HN users I suspect we're seeing a far greater quantity of brand-new bootstrap sites than almost every other group on the internet. I wouldn't sweat using bootstrap for your app if you're targeting a different group.
I think people should configure Bootstrap and use different colours, and approach it not as a strict guideline but as a good starting point with useful widgets to play with. I am, however, completely happy with people using Bootstrap unconfigured, it looks good and for the most part is normally used in a really clean way. A lot of iOS apps look like the stock components, and that's fine as those components are nice and clean.
There often seems to be a bit of push back about websites looking the same, especially with Bootstrap sites, but we don't expect (and often don't want) applications running myriads of different UI styles on our desktops. Maybe it's just a sign of the times.
Totally agree. Sometimes I think bootstrap is moving us toward a more consistent UI across the web which means users benefit by not having to learn yet another set of interface metaphors. A fresh set of colors can keep things interesting, but people shouldn't be discouraged from using stock bootstrap.
I visually recognise websites I visit, app-like stuff especially.
Everyone using bootstrap has made the internet a mostly unrecognizable hogwash of same-looking stuff that I have a hard time telling apart, let alone any sort of lasting impression being left.
Think about it, even Bootstrap's page itself doesn't look like a default Boostrap template.
If the page has made no impression, doesn't that speak more about the content than the presentation? I agree on the visual aspects of being able to determine a page, but Bootstrap just provides a clean way to display some content, I'm alright with that.
And no, Bootstraps page doesn't look like a default template, but they don't say 'you must customise it', it's left up to the developer/designer/implementor.
I think that was OP's point though. Bootstrap is a framework, so please use it as a framework, not as a finished solution.
And I don't think lasting impressions are determined that much by content. I recognize pages by a sort of screenshot in my mind, it's a bit like recognizing faces. Happens too quickly for the content to come into play.
It's a finished solution and a framework, it can be picked on what you need from it. Not being trying obtuse, I just see a lot of criticism levelled at Bootstrap for creating similar looking pages, but for most of those pages they're primarily focussed around displaying content in a nice way (documentation for example).
That. Bootstap's site doesn't look like the default. Especially with the inclusion of colored images, that banner now and several other elements that most "built with bootstrap" sites lack.
All windows apps look the same. And all Mac Apps. Maybe Bootstrap is the beginning of making all things web look/work/feel similar to on another. Is that terrible?
I'd dispute that any of my apps on OS X or Windows look the same, except those from related product families like Office. Safari doesn't look like Chrome. Mac Mail looks nothing like iPhoto, etc...
No! It's not terrible at all. Not to me anyway. I'm always pleased to find another bootstrap app because I already know the UI conventions that it'll be using and it looks great.
When I started on my project I created a /css directory and then a /twitter folder underneath it full of the raw .less files. When I decided I wanted to use a bootstrap component, I would move it out of the /twitter folder into the main /css folder and then include it. It's a good way to get a lot out of Twitter bootstrap without falling into the "obviously bootstrappy" look.
Over time, I've tried to remove what I can of the bootstrap look and feel but I found it hard (for me and my below average css skills) to beat some of the items (forms, etc). My site (http://www.thetaboard.com) is definitely 'built with bootstrap' but I don't think it gives off a 100% bootstrap vibe.
Another site I've seen in the wild Built with Bootstrap that was quite difficult to tell at first pass was Bright Nest. http://brightnest.com/
The Missouri Department of Conservation's E-Testing service for Hunter's Education also uses a customized version of Bootstrap, but it's pretty easy to tell it's Bootstrap. http://www.hunter-ed.com/missouri/
Here is a quick and simple site I did this weekend. I used bootstrap because of it's responsive design support. It makes it easy to create content that looks nice on desktops and mobile/tablet devices.
The site was made 4 years ago using tables and images for titles. I just took the existing design and converted it to bootstrap, header tags, and paragraph tags. The titles are actual text now too.
I didn't make it any wider because there is not a lot of content to begin with. It just doesn't need a wide amount of real estate.
My simple solution to prevent your site from looking "bootstrap-y" is to design a mockup of what you want to achieve first (in maybe photoshop or fireworks) then re-create that interface with bootstrap & make sure you use the design as a guide. Works every time.
That's the method I've tended to use, and it's worked great for me. The problem with starting from bootstrap is that it's incredibly well designed for specific purposes, and there's a fear that changing anything is making it worst for the sake of difference. By starting with the interaction design, not only can you cut down on the elements used from Bootstrap, you can find uniqueness and utility without losing too much.
On one hand, its nice to have a one-of-a-kind site. But, I'm going to disagree that using a standard theme is a bad thing.
When I use a GUI one of the things I hate is when an app doesn't follow the look and feel of the system. This "skinz" disease ever trending upward.
So, I also tend to think every web site looking similar (and great) is a blessing. A lot of time can be saved trying to find your way around, and you'll know what to expect. The focus therefore falls to the content which was an original goal of the web.
There might not be as many design jobs open for secondary players, but it's happening all over these days, see the teachers vs. khan academy trend.
Ha! I didn't know you guys wrote about it too. Your site was halfway an inspiration for me to use bootstrap (rather than try to do my own thing) and customize it beyond recognition!
I've said it before, but I like Zurb Foundation because I felt that I had to customize a few things from the get-go: http://foundation.zurb.com/ (Not affiliated) And the built in responsive grid stuff is pretty nice, and you can still chose some of your own display components.
I should add that I think Twitter Bootstrap is perfect for building behind-the-firewall type of corporate/infrastructure apps. But using it bare on a public-facing marketing site?
I feel like the tone of this post could have been less rage-filled and more informative. I also wasn't very impressed with the end result. It still looks extremely bootstrappy to me (not that I think that's a bad thing).
Wait, what do you mean by end result? There really wasn't one, I posted screenshots of the applications I used to adjust bootstrap.
And yeah, I tend to write "passionately". I basically wrote this up after seeing five or six different apps using bootstrap -.- it gets really annoying, and I just can't stand it.
However, I'll take the suggestion of being informative over rage-filled to heart next time. Thanks!
I think the parent was talking about the screen shot with the big green rectangle in the center when he said "the end result". I, for one, thought the writing felt a bit rushed and perhaps overblown with the whole "you're lazy if you don't customize bootstrap" tone. But the tools you linked to seem like they're pretty useful, so I think you achieved your goal of raising awareness of how easy it is to customize bootstrap.
I agree (with the tone point) - it was a very good article, made some good points, but I felt like it was shouting at me. Given that I agreed with the points that rubbed me the wrong way a little.
It's nice to see people achieving visual differentiation with Bootstrap and a little bit of effort!
I'm really really glad so many developers who are starting out are using bootstrap. It makes it a hell of a lot easier to get people up to speed when they join my team. It's awesome to have someone start learning your codebase and have an easy command of the templates out of the box because they've worked with that framework before.
Now, my company Artsicle.com has a bootstrap foundation but you'd never guess it. However, whining about a good UI that works on many browsers out of the box and provides easy responsiveness? Get over yourself.
Oh I know. I'm on shared hosting, about to upgrade to a VPS. What you're experiencing now is only 400-500 people on there. I've had 5K come there just in the past hour. I'm surprised my hosting provider hasn't just...turned my site off.
I've taken the opposite route for my project http://iwaat.com. The HTML/CSS is all done from scratch with several elements stolen from Bootstrap (ex. highlighting around form fields). It also uses a background image from subtle patterns which really made all the difference vs. plain white/grey. I'm sure this workflow took longer than building off of Bootstrap from the start but I like the way it turned out.
Confused... In your article you state: "Second, I need something that I can develop quickly in without having to write any styles, my current work focuses on results rather than prettiness and UI (for all I know, they wouldn’t mind straight HTML without CSS but that would make working on it hell for me)." Same reason people use the default Bootstrap theme.
Yes, I also iterate in the article that it's quite fine to develop in bootstrap default theme; however, I would appreciate if they could at least download one of the free themes or use a SLIGHTLY modified version of it. Cool thing is, (and I stated this) they can just drop the modified version in whenever they wish to once they're done with development.
I'm wondering if this is a side effect of too many frameworks where developers have gotten so lazy, design is a total afterthought.
I actually thought the end result of this framework would've been the complete opposite of what's happening. Since developers have more time and resources, they'd take the time to experiment and put some real effort into a design.
Meh, I'm currently guilty of using straight bootstrap styles with www.kangacruise.com
I also hate the UI, but I don't think these kinds of changes would be worth the marginal improvement. I know I'll never get what I really want with these subtle changes, so I think I'm better off waiting until I can hire a designer.
I customized Bootstrap on my website. Thing is, no one knows I'm using it because of the customization. I suppose you only notice the people who don't customize it, and assume because of that, no one customizes it?
This seems like something a browser extension could resolve, at least partially. If you're a web designer, you can install this extension and then each bootstrap site would always use a random predefined CSS.
An efficient way is to learn less, work with it on the client side and compile it from the command line to css, this can be a pain on windows, I'm going to make a youtube video describing it!
One of the things I did on my Boostrap'd site, is to make the button corners sharp instead of rounded. That makes a big difference in making it look less Bootstrap'y. See fandalism.com
We use Bootswatch and are really pleased with the results (www.milelogr.com). It appears to be broken with BS 2.1, but i haven't taken the time to see what broke.
I haven´t used Bootstrap, but Hacker News Community always impulse to test the "new" ways and technologies for solve the "problems". So get one's hands dirty!
The only way to do that is to use Boottheme. Boot theme does a great job because it gives you all the responsive views, and different layouts. You can also edit html on the site to see what it would look like.
As of right now, it is registering at 4,692,196 downloads.
Nobody customizes the damn thing. In every screenshot I've ever seen with someone using it, they're using the default skin. The really creative ones do a hue-shift on the default skin. It ships with a good dozen+ skins, and has an editor built into it to let people easily build more. The only time that functionality has apparently been used is when I was building the initial default skin set.
Default Bootstrap annoys the heck out of me, too, but I've learned that people just don't customize things even if you give them the tools to do it. If it's good enough out of the box, they just leave it alone. Bootstrap is good enough out of the box.
I expect years upon years of default Bootstrap websites. We'd best get used to them now.