This style guide shows all styles that are available to authors at UX Booth. This guide also explains how to use special UX Booth shortcodes for inserting components into posts.
All headings begin at the <h2> level inside of post content. <h1> elements should never be used. You can see an example of what different heading levels look like below:
Heading Style Examples
First Heading
Second Heading
Third Heading
Fourth Heading
First Heading
Second Heading
Third Heading
Fourth Heading
Headings automatically change color depending on an article's category. No classes are ever necessary when using headings.
Generally, you don't need to worry about styling paragraphs. The one major exception to this rule is the lead paragraph which should use the .introduction class.
There is also a .indent class available to indent paragraphs.
Paragraph Style Examples
This is a lead paragraph. It is emphasised to bring readers into an article. To use the lead paragraph style, simply add the "introduction" class to a paragraph tag as shown below.
This is a standard paragraph. This is what the majority of the post copy will look like in most posts. No classes are needed when using a standard paragraph.
This is an indented paragraph. The first line of this paragraph will be indented, but the rest of the lines will appear as usual below the first line. This is just some filler text so that you can see the difference between lines oh my gosh are you still reading this? You can stop now, it should be clear what is happening by this point.
Anything in this tag will have the lead/introduction paragraph style associated with it.
This is a standard paragraph. This is what the majority of the post copy will look like in most posts. No classes are needed when using a standard paragraph.
This is an indented paragraph. The first line of this paragraph will be indented, but the rest of the lines will appear as usual below the first line. This is just some filler text so that you can see the difference between lines oh my gosh are you still reading this? You can stop now, it should be clear what is happening by this point.
A typical blockquote should be structured like below:
Quote Example
Once you know your users and can share that knowledge in a way that is actionable, it is significantly easier to design for them instead of designing for yourself.
Steve Mulder, in "The User Is Always Right"
Once you know your users and can share that knowledge in a way that is actionable, it is significantly easier to design for them instead of designing for yourself.
Steve Mulder, in "The User Is Always Right"
It's important that you take note of the following when creating blockquotes like this:
Always be sure to use the three classes above, .quote, .quote__content, and .quote__caption.
As described by the W3C, the <cite> element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc).It isn't necessary to use in every case, but it should be used where relevant.
Link <cite> when possible
If you are able to link to a cited resource, be sure to put the link inside of the <cite> element.
Example of a linked citation
Without a great interface, the power of massive data and valuable analytics wouldn’t be nearly as profound.
In Todd Warfel's book, Prototyping: A Practitioner's Guide, prototyping is described as … generative, which means as you work through the prototyping process, you're going to generate hundreds, if not thousands, of ideas.
In Todd Warfel's book, Prototyping: A Practitioner's Guide, prototyping is described as … generative, which means as you work through the prototyping process, you're going to generate hundreds, if not thousands, of ideas.
Images should be used sparingly, and only when they are necessary to better illustrate a point made in an article. Images should not be used simply to add color to posts. In other words, stay away from image fluff.
By default, an image will fill up as much space as it can in a post. If the image being used is not as wide as the content area, it will only fill as much space as it can. It is recommended that this style be used most of the time.
Default Image Example
Large Images
Large images like the one below will extend nearly to the full width of the post area, but will never extend beyond the post area.
Smaller Images
Smaller images using this same style will only display at their actual dimensions.
Large images like the one below will extend nearly to the full width of the post area, but will never extend beyond the post area.
Smaller images using this same style will only display at their actual dimensions.
Image Captions
Usually, image captions aren't necessary since an image should already be described by its surrounding content. One use case for captions would be to credit the author of the image.
Some of our posts are best presented in a Q&A format.
Interview Example
Your bio is quite impressive! You have degrees in Human Psychology, Human Biology and Cognitive Science. How did you make the transition from cognitive psychology and human biology into web design?
I was using the internet from the end of the 80s so when the web emerged it was a natural progression. I studied Human Psychology at Aston which is heavily human factors influenced and therefore similar to Human-Computer Interaction so it was a logical step to look at the relationship between people and technology. Cognition allowed me to focus on human decision making and the cognitive factors that influence how we use and feel about technology. In reality, I think I was very lucky that the web happened because my skills seemed to naturally fit understanding (researching) and making (designing) good use of web technologies and UX.
Your bio is quite impressive! You have degrees in Human Psychology, Human Biology and Cognitive Science. How did you make the transition from cognitive psychology and human biology into web design?
I was using the internet from the end of the 80s so when the web emerged it was a natural progression. I studied Human Psychology at Aston which is heavily human factors influenced and therefore similar to Human-Computer Interaction so it was a logical step to look at the relationship between people and technology. Cognition allowed me to focus on human decision making and the cognitive factors that influence how we use and feel about technology. In reality, I think I was very lucky that the web happened because my skills seemed to naturally fit understanding (researching) and making (designing) good use of web technologies and UX.
[booklist]
[book title="The Design of Everyday Things " url="http://amzn.to/1PwsuI0" author="Don Norman" image="http://assets.uxbooth.com/uploads/2016/01/Design-of-Everyday-Things.jpg"]
Don Norman, of Nielsen Norman Group, wrote this book more than two decades ago, and students of usability read it to this day. It's good stuff. His fun-yet-insightful writing style makes this one a fairly easy read, and makes a pretty basic point: make sure your users find the right action, in the right place, at the right time.
[/book]
[book title="Designing Interfaces" url="http://amzn.to/1PwsuYk" author="Jennifer Tidwell" image="http://assets.uxbooth.com/uploads/2016/01/Designing-Interfaces.jpg"]
While a lot of the information found in this book (written in 2005) can now be found online, this is another classic to have in the library. Tidwell looks at interaction patterns and various elements of user interfaces and uses real applications to showcase best practices, regardless of the technology behind the interface.
[/book]
[book title="Don't Make Me Think, Revisited" url="http://amzn.to/1PwsuYo" author="Steve Krug" image="http://assets.uxbooth.com/uploads/2016/01/Dont-Make-Me-Think.jpg"]
This is a revised edition of the Krug classic, and showcases a way to approach user-centered design in a "common sense way," as Krug puts it. This is another quick read, but one that will help those new to the field understand the way we talk about usability.
[/book]
[/booklist]
Book List with Summaries
By adding type="book-summary-list" to the [booklist] shortcode, you can display a listing of books with summaries.
Don Norman, of Nielsen Norman Group, wrote this book more than two decades ago, and students of usability read it to this day. It's good stuff. His fun-yet-insightful writing style makes this one a fairly easy read, and makes a pretty basic point: make sure your users find the right action, in the right place, at the right time.
While a lot of the information found in this book (written in 2005) can now be found online, this is another classic to have in the library. Tidwell looks at interaction patterns and various elements of user interfaces and uses real applications to showcase best practices, regardless of the technology behind the interface.
This is a revised edition of the Krug classic, and showcases a way to approach user-centered design in a "common sense way," as Krug puts it. This is another quick read, but one that will help those new to the field understand the way we talk about usability.
[booklist type="book-summary-list"]
[book title="The Design of Everyday Things " url="http://amzn.to/1PwsuI0" author="Don Norman" image="http://assets.uxbooth.com/uploads/2016/01/Design-of-Everyday-Things.jpg"]
Don Norman, of Nielsen Norman Group, wrote this book more than two decades ago, and students of usability read it to this day. It's good stuff. His fun-yet-insightful writing style makes this one a fairly easy read, and makes a pretty basic point: make sure your users find the right action, in the right place, at the right time.
[/book]
[book title="Designing Interfaces" url="http://amzn.to/1PwsuYk" author="Jennifer Tidwell" image="http://assets.uxbooth.com/uploads/2016/01/Designing-Interfaces.jpg"]
While a lot of the information found in this book (written in 2005) can now be found online, this is another classic to have in the library. Tidwell looks at interaction patterns and various elements of user interfaces and uses real applications to showcase best practices, regardless of the technology behind the interface.
[/book]
[book title="Don't Make Me Think, Revisited" url="http://amzn.to/1PwsuYo" author="Steve Krug" image="http://assets.uxbooth.com/uploads/2016/01/Dont-Make-Me-Think.jpg"]
This is a revised edition of the Krug classic, and showcases a way to approach user-centered design in a "common sense way," as Krug puts it. This is another quick read, but one that will help those new to the field understand the way we talk about usability.
[/book]
[/booklist]
Margot Bloomstein is the founder and sole proprietor of Appropriate, Inc., an independent brand and content strategy consultant based in Boston. She focuses on crafting brand-appropriate user experiences to help organizations effectively engage their target audiences and project key messages with consistency and clarity. Margot has spoken about using content strategy to improve brand experiences at conferences including SXSW and Confab, and she is the author of Content Strategy at Work: Real-world Stories to Strengthen Every Interactive Project.
Jonathon Colman
Jonathon Colman is a UX content strategist at Facebook, merging the worlds of data and creativity. He has spoken about content strategy at many conferences, including giving the keynote at Confab 2015. His epic list of content strategy resources has been growing and evolving over the past two years.
[people]
[person name="Rahel Anne Bailie" image="http://assets.uxbooth.com/uploads/2016/01/Rahel.jpeg" twitter="https://twitter.com/rahelab"]
Rahel Anne Bailie is the principal of Intentional Design, a Content Strategy consultancy. There, she and a select group of professional partners help organizations create and better manage their communication products. She is the co-producer of Content Strategy Workshops, and the co-author of Content Strategy: Connecting the dots between business, brand, and benefits, written with Noz Urbina, and The Language of Content Strategy, written with Scott Abel.
[/person]
[person name="Margot Bloomstein" image="http://assets.uxbooth.com/uploads/2016/01/margot.jpg" twitter="https://twitter.com/mbloomstein"]
Margot Bloomstein is the founder and sole proprietor of Appropriate, Inc., an independent brand and content strategy consultant based in Boston. She focuses on crafting brand-appropriate user experiences to help organizations effectively engage their target audiences and project key messages with consistency and clarity. Margot has spoken about using content strategy to improve brand experiences at conferences including SXSW and Confab, and she is the author of Content Strategy at Work: Real-world Stories to Strengthen Every Interactive Project.
[/person]
[person name="Jonathon Colman" image="http://assets.uxbooth.com/uploads/2016/01/jonathon.jpg"]
Jonathon Colman is a UX content strategist at Facebook, merging the worlds of data and creativity. He has spoken about content strategy at many conferences, including giving the keynote at Confab 2015. His epic list of content strategy resources has been growing and evolving over the past two years.
[/person]
[/people]
