Customize Twitter Bootstrap To Not Look Bootstrap-y
antjanus.com
antjanus.com
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.
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.
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 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.
I would, in those cases, prefer to see BS
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
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.
(also hi, I work for Curse :D)
(Hi, thank you guys for letting me monetize my hobby! :D)
> 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.
http://www.gamasutra.com/view/feature/130550/middleware_post...
(Also: thanks for SexyMap, my wife and I loved it! On default settings.)
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. :)
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.
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.
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 :)
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.
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.
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.
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.
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.
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.
Too many options.
Works pretty well too.
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.
If you can't spend a few hours to customize your company's website why would I trust you to do anything else?
Customizing settings for screenshots or videos of a game? Not as important.
You should really check it out!
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.
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.
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.
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.
Normal (i.e. non-artists/designers) don't care. I present Craig's List as exhibit A.
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.
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.
Don't forget split testing suffers from ceiling effect.
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.
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 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.
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's your site's URL? I'd love to check it out.
>> "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.
One could argue otherwise that the needs of the web have outgrown HTML as it was originally intended.
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.
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.
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.
You extend it by using what CSS offers.
The bootstrap customization page sucks. i don't really use it myself.
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.
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.
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.
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.
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.
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.
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.
honestly, the forms, tables etc. those styles are okay with me. It's just that toolbar and buttons that goes against grain for me.
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.
It is pretty simple to make bootstrap not so bootstrappy, just view source and take a look at my inc.css file.
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.
Disclaimer: I'm a front-end designer.
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.
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!
It's nice to see people achieving visual differentiation with Bootstrap and a little bit of effort!
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.
Wonderful shameless self promotion! I don't see no reason to be shy about what you want with your blog posting.
That said, I might need a designer in the near-ish future. Email is in my profile.
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.
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.