Great, Another Bootstrap Site
drawar.com
drawar.com
As a small example: with bootstrap, buttons look the same, so users instinctively recognize them without additional mental effort. Developers can focus on developing applications that are functional and usable, rather than tweaking CSS to make things "look right".
I think bootstrap, and the non-coercive standardization of web applications it is fostering, is one of the most important developments of 2011-2012.
I do think means there will be less need for straight-up aesthetic designers, with UX and information architecture becoming more important.
When I talk to other designers and inevitably get into arguments with them about standards, I try to get them to see it from a consumer's point of view for non-IT products.
There are a lot of non-IT products that have the same design: doors to houses, door knobs, rear-view mirrors, tires. The list goes on.
While it's fun to see a new design to a Web site/app, even as a techie I sometimes struggle with using the sexiest websites simply because the designer has changed what I perceive to be a standard usability feature. I can't imagine what Joe 6-Pack thinks when he encounters these sites.
The argument this blog post makes isn't that there's a problem with standards, but that a lot of people are using bootstrap without any modification - which is ironic, because modifying bootstrap is vastly easier and safer than creating a new design from scratch.
It takes very little to adjust the colors of the buttons provided by bootstrap, or the links, or add a texture to the background, or change some fonts out (Google webfonts makes this ridiculously easy). When this isn't done, the site leaves no lasting impression unless what it provides is so amazing I can't possibly forget it (this is pretty rare).
For me, power tools would be something that goes at the far functional end of a functional/aesthetic design scale, and even then companies will use widely different colors to separate themselves from their competitors and make them easy to recognize. Perhaps there's something to be learned there.
While most knobs looks similar, you always can see before even touching whether this knob is a rotating one or just press a handle. Furthermore, I have never seen a door with a knob to be placed 10 inches from the ceiling (or the floor), something that would definitely be considered "original" and "nonstandard".
For example, both a button with a gradient simulating a curved surface with top-down lighting, and a button with flat color but a drop shadow indicate they are to be pressed. But, both can have a very different visual impact.
The same is true of knobs, switches, push bars, and so on. It's possible to vary the style without straying from the established affordances present. The article's point about Bootstrap is that people are given a factory for making different color doors and windows, but not bothering to change the colors despite the ease of doing so that the framework provides. The result being that the houses are all starting to look kind of dull.
just how many way can you click a button?
Using the door handle metaphor, and example would be a handle that's a few inches from the floor and looks almost the same as a handle at 32 inches but is better served by pressing with your foot. Visually the same but very different interactions.
NO. It is NOT a good thing. When it comes to visual design, things are supposed to look different. Twitter is meant to look different than Facebook and facebook should not look like Amazon. That's how you create mind-space . Bootstrap kills that - they all just look the same.
I can't remember name of one site that was made with Bootstrap. because there is nothing special,visually, to remember. No visual cue.
> Developers can focus on developing applications that are functional and usable, rather than tweaking CSS to make things "look right".
That's cool if you are building for just developers. But when it comes to non-devs, you don't want to confuse them, visually, with some other website. Remember, for many Facebook is a that "blue" site. With so many people taking bootstrap as it is, it's going to be... un-special.
I remember my friend discovering facebook themed Tumblr theme. People actually confused it with facebook and made comments like
"Why can't I update my status?"
"Who the hell are you and what are you doing on my fb?"
..
Also, the author is not saying Bootstrap is bad. In fact, it's good that you can focus on dev and have good defaults on CSS and design. But leaving it there is BAD. (read above, why). Take it forward.
Quick Fix: Don't use the Bootstrap top bar. Seriously, that's one major shift.
- Another Pissed at Bootstrap websites Designer
Note: You could change colors / gradients and some visual design aspects and things would be different.
> NO. It is NOT a good thing. When it comes to visual design, things are supposed to look different. Twitter is meant to look different than Facebook and facebook should not look like Amazon. That's how you create mind-space . Bootstrap kills that - they all just look the same.
It depends on your goal. If you want to make an application that people use all day, having a unique UI is probably not a win. If you used Netscape back in the day you can use Chrome today and not have trouble. Consistency itself can be beautiful.
If you're making a marketing site, then your designer can go wild (as long as everything is being tested for effectiveness).
> If you want to make an application that people use all day, having a unique UI is probably not a win.
Not discussing user interface design, it's about visual style. Button should look like a button, but not so much like other site that user confuses your site with someone else's.
>Consistency itself can be beautiful.
Yes, same with search engines, if you used Google you can use Yahoo. But still their visual design is different in many ways if not search result. You can tell Yahoo from Google but not two Bootstrap sites.
Consistency is good for usability. Again, Button should look like a button, but not so much like other site that user confuses your site with someone else's.
If you are relying on the style of your buttons to distinguish your site from all the others, perhaps you should be spending more time on building out the content/functionality of your site.
I often find that designers are more worried about how a site will look in a portfolio than whether the end users will get anything out of the site.
I agree, sites should be styled. Bootstrap makes it amazingly easy for those developers who want to build an MVP. Tweaks are nice, but if you have zero design skills, they may or may not be necessary.
One would be a fool to simply ignore a web project because they were built on Bootstrap. If it's not relevant to your needs, sure, ignore it. If it can help solve your problems, pay attention to the app and don't worry about the design so much. If it makes a ton of money, I'm sure they can re-invest some of that back into making it look better.
Bootstrap should be taken as a base where from we can start building our applications right away while being real agile cause it provides us with mostly used design patterns and interactions which if we require can differ from in our design iterations (!imp). So again its essentially a framework providing some conventional patterns for development which I presume is bit like convention over configuration paradigm.
I would agree with the point that visual style matters as its is something which will molds into your brand identity and must be unique as all products are unique in one way or other. So yes its really a fail when most of the developers choose to maintain same Visual style in their sites which is to me is an utter disrespect of brand identity and something that must be avoided.
>Consistency is good for usability. Again, Button should look like a button, but not so much like other site that user confuses your site with someone else's.
As far as Usability is concerned to my understanding it is not affected in any way by fact that 2 sites have visually similar buttons but it is rather defined on the basis of content they provide and how it is presented(!imp). Difference between usability and visual appearance is quite understood I guess.
You might want to consider reading this post by Dave Winer "Why Bootstrap might be very important" http://scripting.com/stories/2012/03/07/whyBootstrapMightBeV... and Twitter Devblog - A brief history https://dev.twitter.com/blog/bootstrap-twitter
The other half to this is I care more about content & usability than aesthetics. Bootstrap lets me produce and consume content more readily. So, I'm a fan.
The examples list of beautiful, usable, and identifiable products and services is long. People learn new patterns quickly - you just have to do a decent job designing the pattern.
Bootstrap's "non-coercive standards" are really just CSS shorthand for an approximation of Apple's successful, so-simple-it-feels-generic, already-easy-to-copy example. Anyone who never invested in a brand or consistent visual language before (and therefore simply wouldn't have a brand or consistent visual language) now just piggybacks Apple's aesthetic. Bootstrap is a small step further on the already well-worth path.
Snapping widgets together like lego bricks and declaring the result to be a "good" interface because it adheres to "standards" is sometimes true, but not nearly as often as you would think, and in my experience leads to interfaces that map closely to the underlying system, but not at all to what the user actually wants to do.
It's good that a non-designer can use bootstrap to create a decent looking site, heaven knows the world is not over-burdened with good-looking websites, but neither we nor the "users" want every web page, or every web app, to look the same.
It absolutely is beneficial to a newbie to say "Oh! This site looks a lot like xyz.com, maybe I can log in with this button."
Bootstrap is a wonderful tool for getting your app out there without having to do much on a design level. But I believe that websites with a distinct look and easy UI that reflects their functionality is way better than a monotonous string of websites with no distinction between their design.
For instance Twitter's design is beautifully streamlined for it's functionality, which is to show a constant flow of micro-information. As opposed to HN's listed threads which show link based data. These designs even though they differ seem "natural" based on their functionality and require little to no mental effort.
Good UX does not require mental effort.
Furthermore, a unique look is how others identify sites. It's Twitter's UI looked exactly like Facebook's, more would have trouble distinguishing the two. This would hurt the site's capability to make an impression in the user's memory.
With no distinction between websites, how will the casual user remember you?
You're kidding, right? What about emotional design, making something that connects the user to your app?
That's a tough decision. I'm not sure there's a "correct" answer. I think it depends on what you value, and what you believe your target user will value: a better product, or a better website.
If you're actually building a product to sell people it behooves you to put some effort into deviating from the base styles.
On the other hand if you're like me and use it every so often for a one-off project that you have no plan on monetizing then why not? I don't particularly care about the UI look and feel, I just don't want it to look awful which it would if I were to design it myself. Bootstrap gives me a decent looking sane UI with guidelines for me to follow to keep it all sane. Other than that, I just want to work on functionality.
Most sites in the early stages will have few visitors and due to variety of interests it's unlikely that a single person will be using a large enough number of these sites to start realizing this problem.
As the successful sites grow larger and move beyond the early stages it's likely the developers will have access to more resources to improve their site theme over time and move away from the bootstrap look.
I'm sure the idea here is "oh, I'm just making a quick MVP, or even a pre-MVP, or a weekend project, and Bootstrap makes the design super easy!" But if you're not going to change it at all, you might as well stick with browser defaults and not include a stylesheet at all - at this point, uncustomized Boostrap looks just as tacky as a site that was black serif text on a white background with blue and purple links.
It's easy to fix, and it's fun. Just take an hour to experiment - your site deserves it. Change up the fonts! Get a nice header font, especially if you're using a big "Hero" badge. Look at the Google Web Font gallery for some inspiration. Get some unique colors - different shades for different elements, build a nice visual hierarchy.
Drop the top nav bar, unless you're doing docs or something that could actually use it. It looks a bit tacky, especially "position: fixed", when it's unnecessary.
Now, on the other hand, you don't have to change everything. Leave the button gradients as they are, the grid system isn't exactly going to stick out, etc. You just need the overall look of your site to be unique - individual elements don't matter as much. http://www.savng.com/ is built with Bootstrap, but you couldn't tell it unless you really were looking (and thus noticed the "Add a deal" button and the pill navs at the bottom).
Just be a bit different. It's easy, and rewarding.
This whole "bootstrap backlash" is just a storm in a teacup and a waste of bandwidth.
1. Product, hardware or software, gains the hearts and minds of hackers everywhere. 2. Backlash.
I've tried to hit a sweet spot with Bootswatch (http://bootswatch.com), keeping it a quick-start solution for hackers while adding variety to the defaults.
You have to redo your changes for each new Bootstrap version, right? AFAIK, Bootstrap is not themeable and you better extend it than change it.
I think the problem is that it's not very easy. And that's why you see so little variation (combined with a certain amount of laziness, of course). Editing the CSS directly is pretty much impossible for mere mortals. And of you're not familiar with LESS and compiling styles, you're going to have trouble.
I am pleasantly surprised to see it mentioned as a good example of Bootstrap based sites. On a unrelated note, I am not sure how you found it since I have really advertised it yet :o
To echo the same sentiment as avolcano, Bootstrap can be easily modified both via Less or CSS. And this is coming from someone who has rudimentary knowledge in both. A little change here and there can go a long way in differentiating your site from all the other bootstrap clone.
Here are a few low hanging fruits:
1) Colors -- Change the color of the top nav bar, links, text, and etc, as color has a tremendous affect on the look and feel of your site.
2) Font - Changing fonts is easy with Google Web Fonts and font hosting services like Typekit. Like color, it also affects the look and your feel of your site.
3) Laytout - Experiment and try different layouts, 1 column, 2 column, 3 columns and etc. Look at various sites within the same niche (and outside of your niche) for inspirations.
Here are some great resources that I've used in making my site:
1. Google Web Fonts
2. Typekit
3. Site Inspire
4. Siiimple
5. Grid Based
6. Minimal Exhibit
7. Design seeds enclosed (this is a godsend if you don't have a back ground in color theory like me)
8. Little Big Details
Lots of them and I'm still going to use their service regardless.
"How depressing is it to go through this gallery of sites built with Bootstrap?"
How depressing is it to go to some site that's been hyped up, see a great design, and then see no compelling product behind it?
And I think that's a good thing.
This idea would be valid if the universal alternative to using Bootstrap is some impressive design stitched together by your in-house crack team of designers. But I'm sure the alternative to Bootstrap for most people is for the developer to use his own html/css know-how to construct something passable as he goes.
So, for most people, I'd wager that Bootstrap is mostly just a time optimization that saves the developer from spending time on a design that would have been far less impressive anyways, that saves the developer from burning time that could be allocated to the actual product.
I find it silly to condemn people for how they allocate their time.
Even the whole pro-Bootstrap chorus of "But it's just a standard interface for the web" is silly. Really? I have yet to even stumble across a Bootstrap website in the wild that wasn't linked to from a Show HN. Are these monthly Bootstrap rants conflating the HN echo chamber with the internet? Weekend solo-dev projects with funded business websites? I guarantee it.
The likening of Bootstrap to Wordpress' default theme is telling. Does anyone here really encounter WP's default theme in the wild? I sure don't. Maybe the majority of WP installs still have the default theme, but it's in the same way that the majority of WAMP installs still have the default "It Works!" Apache screen on localhost.
I just don't get the point. If Bootstrap really was some prevalent interface that most of the web started using, then you guys that do have the crack team of designers at your disposal should be excited! Here's your chance to stand out! But I'm using Bootstrap because it's literally faster than any other alternative I can think of until I have someone separately working on a UI branch that I can merge into my code.
If I took your advice and stopped using Bootstrap because you assume "I don't care enough" to make a custom design, I'd end up with something that will probably look worse and guaranteed to take much longer to create giving me more bottlenecks as I get hamstringed by aesthetics when I could instead be funneling my efforts into business logic and not into something that's rather trivial to switch out when my app is deployed and my time frees up to address less-critical concerns.
Bootstrap provides some of this for web applications. I'm not trying to keep my users from being "bored"; I'm trying to give them a simple approachable application where they can get stuff done. A gratuitous re-design serves only the ego of the designer.
I love the look of bootstrap sites. Having identical looking sites beats the shitty design most of these sites would have had before bootstrap.
When I see that grey-black gradient nav bar i go "Haizz yet another bootstrap site."
The LESS files are a goldmine for me. Pre-made mixins, cross-browser support, responsive media queries, color functions
For me the LESS is being underplayed while the "default" style CSS is being overused.
http://twitter.github.com/bootstrap/download.html
Also, it now has responsive design built in, and I am not going to spend my time building that from scratch; I'm going to use a framework!
There are definitely a few sites that look barely-out-of-the-cookie-cutter...however, there are others that are only vaguely bootstrappish at a glance.
What do people consider the minimum amount of alterations before a bootstrap site looks unique enough? Besides color I mean....font-spacing and sizes? Going from a 12-col grid to 15/16/20-grid?
1- Navbar, the dark gray will not fly, tweak the height of it too or remove it all together.
2- Background of your container, give it some life. Here is a good place to start- http://subtlepatterns.com/
3- Special font for your branding/ H tags, boom (http://www.google.com/webfonts)
4- change up the button colors a tad, if only one, the blue one, it seems to be everywhere.
The above items will take you 15-30 min depending on how many combinations you try out & will take you pretty far.
For every spoiled designer turning away in disgust from a cookie-cutter bootstrap website, there are 50 web apps being created which would not exist without bootstrap !
For example: at dotCloud our ratio of backend/frontend engineers is 10/1. We've got people (me included) who can automate a cluster of hundreds of machines but are basically UI-impaired. Bootstrap has multiplied our individual velocity by at least 10: now our core platform engineers take the time to write web tools because it's achievable in a couple hours.
And when we finally grew our frontend team there was a point of reference for building a style guide, reusable page elements, etc.
For my site, https://www.voo.st/ we just used a bunch of elements from bootstrap and also parts of the core. We integrated that into an existing theme that we bought for cheap.
For example, the buttons and the form elements are great, we took the header bar and made it a footer. I really think that with some creative thought, bootstrap is really great and much needed in the community.
A nice palette of widgets and views makes for a consistent and fairly intuitive experience. Nobody argues Mac apps look too much like one another. Folk get angry when they stop looking like Mac apps.
But this is the web, not the Mac. Websites are expected to look different from one another. But when a engineer starts customizing bootstrap so that it "doesn't look bootstrap" I think the end product is often a broken design with awkward colors, margins and compositions.
I think the author of the OP would enjoy a greater set of bootstrap themes, something like bootswatch.com and furthermore it seems like a great opportunity for a company like themeforest.net or someone similar.
Bootstrap is popular not because of visual styling. What sets it apart is incredible documentation and programmer-friendly semantic markup. Regarding bootstrap as a theme is a disservice. Bootstrap is a framework which could use some more high quality visual themes.
Get over yourself.
The perfect example is iOS apps. Can you imagine your designers simply copying and pasting from iOS's default theme? It's very bland, it turns off users before they even use it (which in effect, is bad UX. Bootstrap has both + and -, good UXer will see this and adjust accordingly/depending on the phase of the product). I use this resource for my wireframe/mockups http://www.teehanlax.com/blog/iphone-gui-psd-v4/ Personally I won't ever use it in a beta product/website as is.
There's nothing wrong with bootstrapping to map out user flow, and give clear indication a button is a button, a list is a list etc. But when it's time to up your game, give access to the public, default bootstrap visual/color needs to go.
Humans judge a book by its cover. If you release your bootstrap website, users will have to work and over come the barrier of your bland looking site and then decide if it's worth it to try your product.
PS: The point about lawyers have crappy websites and yet we still use them is because our expectations changes depending on the organization. Do we expect government websites to be wow and dazzle us? Do we expect a new Apple product's website to use bootstrap? Do we expect a 2 month old startup website to be featured on Behance's frontpage?
And remember who your early adopters are – if it's people that scours HN or see countless bootstrapped sites, what are they going to think when they see your site? Would they be understanding and go 'Oh its okay - they're a startup, I'll give them some leeway when it comes to visual design' or 'Would they go eff this, these guys don't care about design or visuals. I'll come back later'.
Not everyone goes to a website and bemoans yet another instance of Helvetica. Hell, most people couldn't identify Comic Sans if their lives depended on it. When I go to a site I want to get the information I want and do what I need to do quickly. In and out. If they're using a readable font, familiar icons, and common colours, per se, I don't care about originality.
It make sense for designers to see those things. It also makes sense for designers to be offended by the notion that Bootstrap may automate some of what they do. But extending this to Bootstrap == evil isn't rational.
Caveat: there are some sites that need to delight you. Content sites, e.g. NY Times, Facebook, etc., should put higher value on branding through UI. But inducing that this is necessary for all sites isn't tenable.
So thank you sir. I will bury my Bootstrap dislike deep, deep down where noone can detect it. At least I get to vent my jQuery dislike nowadays.
Client identity should be based on a unique brand, and bootstrap, short of major tweaks, does not provide that.
To umm, boot, boostrap is a wee bit on the heavy side for my liking (80KB css minified), and the javascript features are not mind blowing (for example, would prefer flyout menus like in Foundation or HTML Kickstart).
I'm rolling with Skeleton and jquerytools (sadly behind the maintenance curve) on the front end.
If bootstrap becomes themeable, I'll consider using on the front end, but until then, differentiation is king in my book.
"Seeing a default Bootstrap “theme” site makes me leave it right away because I feel the person doesn’t care about what they are doing."
That's a great way to miss out on content, which I believe is the reason many web sites exist in the first place. I read lots of great articles on HN and unless the site is absolutely hard to read due to font size or contrast, I don't really notice what theme it's using.
To me, this comment comes across as snobbery. Us "in the business" types can spot these things, but in the end, does anyone care but us? Design is ridiculously important when selling a product or establishing a brand, but I don't believe design is a substitute for content.
I made http://convertunixtimestamp.com/ over the weekend, and I used bootstrap mainly for the responsive design. But I tried to customize it enough so that it wouldn't be recognizable as a bootstrap site.
And I chopped about 85% of it out b/c it just wasn't needed.
Bootstrap solves most of this. That is why it's becoming prevalent. The only way this trend will stop is a high-quality cross-browser WYSIWYG editor.
I agree bootstrap is spreading, maybe we see it a bit more being in the startup space. But, any average internet user I've let try out a quick idea in bootstrap has always commented on how nice it looks for a demo.
About variety, the more developers get used to Bootstrap, the more they will modify it. For many, just using anything this polished is a big jump, we just have to encourage customization of tools like bootstrap (much like 960js and others allow).
Basically none of the general public will say "Hey, this is a Bootstrap'ed application, I'm not using it." They just do not know nor care what Bootstrap is. If it looks professional and works as they expect, they will be happy.
So what if it's another bootstrap site? At least it's not some times new roman on a green background monstrosity.
I haven't used Bootstrap yet, but I plan to use it when I finally get around to making my personal website.
At the minimum, pick a different color scheme from http://bootswatch.com/#gallery
Layout: http://dcurt.is/
Transparent border: http://blog.dustincurtis.com/the-dcurtis-manifesto
More broadly, it seems as though a lot of people on HN often respond to posts as if the author and submitter are one and the same. I recently saw a post, submitted by Jeremy Ashkenas, about why the author doesn't use CoffeeScript. The top comment directly challenged the submitter, calling out 'his statements', as if he were the author.
also, I really suck at design, I f*cking hate it, it takes me weeks to produce something acceptable even with bootstrap...what am I going to do?