Introducing The New Mojo Themes Website And Marketplace

Update: “Mojo reports that the site’s user base has doubled since the revered Brian Hoff redesigned it only a few months ago. Before the redesign, little birds told [the author] that authors could have their product on the frontpage for months and still not make a sale. The redesign seems to be at least one major factor in renewed growth and presumably better sales.” Read more here.

What was the overall goal of the redesign and how did you aim to make Mojo Themes stand out?

“There were three major tasks at hand when redesigning and rethinking the Mojo Website and Marketplace experience: Improved usability, simplified marketplace navigation / browsing, and creating a more unique and enjoyable experience that was lacking. At first we found ourselves moving far away from the brand that Mojo Themes had already established with their customers. It took us a few extra weeks of swimming in the wrong direction in order to see where we needed to be and where we needed to take it. With a fresh, lively coat of paint, beautiful typography utilizing webfont Proxima Nova, more engaging headlines and updated copy, dynamic experiences from page to page, improved marketplace browsing and rich interactions. We even gave the “Mojo Monster” a name. Say hello to Captain Horatio.”

Read more about our process, strategy and the full interview over at Fuel Your Creativity.

VISIT THE LIVE SITE

Landing Page

Actual size: http://cl.ly/652r

Log In and Navigation Dropdown Detail

Actual size: http://cl.ly/4phd

Actual size: http://cl.ly/4p5g

Marketplace Browsing

Actual size: http://cl.ly/4p82

Shopping Cart

Actual size: http://cl.ly/4ozR

Custom Charts

Actual size: http://cl.ly/4qKc

Making a Deposit / Profile Balance

Actual size: http://cl.ly/4pcw

Blog

Actual size: http://cl.ly/4p9U

Forum

Actual size: http://cl.ly/4qHw

Don’t forget to poke n’ play around with the live site. Also, will be posting and highlighting a few more recently launched websites this week and next, including The Bernard Press Obox Theme and Pulse Enterprise App Website redesign. Keep your eyes open.

I often collect and save examples of layout and typography that interests me or I find enjoyable and beautiful, so below I’ve gathered 30 websites showcasing beautiful typography and layout design for your viewing pleasures. Enjoy.

Chirp

Neutron Creations

Vigepops

Billings

Simon Collison

The Gates Notes

SimpleBits

Vegas Uncork’d

Build Guild

Epic Event

Happy Cog’aoke

Pictory

Trent Walton

OrderedList

Design Litmus

Analog

Authentic Jobs

Electric Pulp

Frank Chimero

Information Highwayman

Ligature, Loop & Stem

Matthew Henry

Ryan Clark

SVA

Veer Ideas

Fever

Squared Eye

DevDays

Sushi & Robots

The Sew Weekly

Also if you are interested, I recently had the opportunity to visit and chat with some new friends over at Two Paperdolls letterpress shop and design studio and managed to take some pictures of their beautiful antique letterpress machines, wood blocks and other studio shots (with my new DSLR). Feel free to check out the photos on my Flickr page.

Below are their responses, links to their Twitter account and a few words on why it’s their favorite.

@iamFinch‘s favorite:

“Beautiful color, typography, and photography.”

@C7Design favorite:

“The site’s beauty is in its simplicity. The gallery is really well done too.”

@andymangold‘s favorite:

“A nicely run and designed website featuring custom bicycles from all over the world. The simple, grid based & largely typographic design highlights the photography of the bikes, which the owners of Boutique Cycles maintain strict standards for. The little details give the site its personality without overwhelming the content.”

@mattdetails‘ favorite:

@danielwhyte‘s favorite:

“I love Designiskinky, for the fact that the information that i want to see is displayed in a simple fashon with a great use of white space, the logo simple and sexy, and i every time i visit the site it feels fresh, because of the great unique content.”

@lvgraphics‘s favorite:

“I love this site! Even though it is a print design focused blog, they have really taken the elements of web design and usability to heart. The images always look so vibrant and the text is always super crisp.”

@joshontheweb‘s favorite:

“I think this site very nicely designed. It is a simple design but no detail is overlooked. I love the javascript transitions he uses on portfolio items. The theme switcher is a nice touch, but I am partial to the “Day Theme”.

@wrccdesign‘s favorite:

“Texture, graphics, and cartoons working well together”

@neueblanc‘s favorite:

“Legarconblue is one of my favorite designed website because of its minimal, grid based layout topped off with amazing functionality and contrast.”

@Filipquivreux‘s favorite:

@urbanrenewal‘s favorite:

“Phenomenal design. Each post is unique, colourful and a joy to look at. And the content is good too. A rare combination.”

@bigwavedesign‘s favorite:

“GoToChina is such an innovative site, easy to use while still looking stonking! There is nothing I would change on this site which immediately places it higher than all the others and I keep coming back to it when designing just to make sure I don’t get too carried away with clutter and to remind me that simple is often more effective.”

@everydayworks‘ favorite:

“For an e-commerce site, The User X is awesome. Big pictures, great navigation. Overall, very good design.”

@joshhemsley‘s favorite:

“This site really struck me as providing a brilliant & progress solution to design. It doesn’t depend on crazy graphic effects, slick color gradients or anything of the sort. It simply relays a message through strong typography, strong illustrations, creative layout and an awesome use of negative space. Best site design of 2009 in my opinion!”

@iana_‘s favorite:

“I love a beautiful arty background image combined with transparency of panels and simplicity of the layout. One of my favourite!”

@GarettMayfield‘s favorite:

“As of yesterday, this is my favorite site. It’s very clean, simple, and to the point. Their design work is awesome and right down my alley.”

@Nikibrown‘s favorite:

“I love the recently redesigned NPR site because it has more breathing room an it’s easier on the eyes. The designers also included some nice attention to detail that shows through very well.”

@cshold‘s favorite:

“Everyone’s seen it, and for good reason. Rob Morris is a CSS genius that has designed a perfect layout. The usability, functionality and pure inspirational visuals all combine for one of the best portfolio websites I have come across.”

@RichardCarter‘s favorite:

“It’s corporate and fun; exactly what come to mind when I think of Virgin as a company (section home page linked to as I think this is demonstrated better here!)”

@gavinelliott and @noel1215‘s favorite:

“When you look at art direction type sites (gregorywood.co.uk) and (jasonsantamaria.com) as the starters of the trend, often Dustin Curtis is forgotten about yet he’s been designing that way for a while and is very talented.”

“I’ve been following Dustin Curtis for months, and I love the creativity he injects in his layouts.”

@pi_r_webdesign‘s favorite:

“A beautiful design and amazing animations for this wonderful site. A great work!”

@zuno and @benjam1n‘s favorite:

“The details and functionality are amazing. Great photography, elegant type, massive amounts of content nicely organized and easy to get through.”

“Great colors, great typography, well balanced layout and awesome shoes.”

@rev087‘s favorite:

“Not exactly my favourite, usability is not one of the strong sides of the site…but the sheer awesomeness of the background “animation” idea makes me wish I designed it. Good design is everywhere; innovative design is rare.”

@jfredson‘s favorite:

“Beautiful typography and solid layout. Great usage of progressive enhancement.”

@GearBox_Designs‘ favorite:

“I’ve loved it since it first appeared on Website Design Awards. I think I think it has a lot of fun design elements and that 80s style illustration on the homepage makes me happy — haha!”

@oehowarddesign‘s favorite:

“Typography with an impact. The navigation is as striking as the use of color is stark. I just love it.”

@bnonn‘s favorite:

“The simplicity of the layout; the strong, fearless use of color; the call to action; and especially the “about” page (aka, ‘our story’). Just a brilliant site.”

@theconstruct‘s favorite:

“It’s unique, smooth and has a personality about it that I really find intriguing and ephemeral.”

@behoff‘s (me) favorite:

A blog design that constantly amazes me is Viget Inspire. With beautiful typography, captivating colors and bold imagery the site is well done from top to bottom. I even enjoy the images of the various authors on each post — the “Inspire” part of Viget name sure lives up to the name.

What is your favorite website design? Share in the comments below.

Some of the questions below can be applied to more then just website design so I broke them down into sections for better functionality for your clients.

Company-related questions

1. Do you currently have a website? What is the URL?
2. Describe the products/services you sell.
3. Who are your main competitors? How do you differ?
4. What are your top 3 frustrations with your current website?
5. What do you like most about your current website?
6. What do your current competitors website have that you aspire to?
7. Age range of your target client base

Project-related questions

1. Technical skill level of your client base. Have a scale ranging from zero to ten with zero being the least technologically skilled and ten being the best.
2. Will your visitors require any special needs? Mobile version of site, multiple language support, larger type for easier reading, etc.)
3. Imagine your website in 5 years from now. Complete the sentence: I know my website works because…
4. Name 3 things that are most important about the design of your new website.
5. Name 3 things that is least important in the design of your new website.
6. Do you have any color preferences, existing brand colors, and/or colors you do/not wish to include?
7. What are some existing websites that appeal to you? Provide links if possible.
8. Deadline, timing or exact date of completion for your website
9. Do you have a budget you are trying to meet?

Additional questions

1. Do you need to be able to update the website on your own? (ie: CMS)
2. Will this be an e-commerce website? Will you be selling any products or taking payments on your website?
3. Do you need a copywriter? If you are using existing copy on your current website, will it need to be modified in any way?
4. Is your logo and other imagery web ready?
5. Do you have all images that you would like to be included in your website or would you like the designer to use imagery where appropriate?
6. How will you be updating the site in the future (if they are not using a CMS)?
7. Will you be needing an additional SEO help (registering with search engines, adding businesses to Google Business Center, Analytic setup, etc.)
8. Do you already have a domain and host setup for your new website? If so, do you have the FTP and host log in information accessible?
9. Any specific features you would like included? Log in ability, calendars, forums, blog, subscription services (RSS, email or newsletters)?

As with my logo questionnaire, I also like to leave my clients with a field or extra room at the end where they can provide additional details and comments.

Also next to each question that may not be so obvious what you are asking them I like to provided additional explanation, examples or notes. For example, when asking them if the need their site to be built on a CMS, I ask if they will be frequently updating (daily or weekly) or only updating once every 6 months or so. Speaking in terms that clients understand will also help to build trust — nothing is worse then spending your money on something you have no idea what you are getting. In short, save the nerd talk.

It’s always important to remember that being a graphic designer means you are a problem solver. You cannot solve a problem without knowing what the problem is – ask questions.

Below are a few techniques I generally go with when styling my type and aspects I considered and incorporated while designing BrianHoff.net.

Line height

First off if you are not specifying your type size in ems you should be. “The results show that, across all browsers, text at the medium browser setting is rendered identically to text set in pixels. It also demonstrates that text sized in ems can be resized across all browsers.”

Another reason I set my type in ems is because it’s easy to find a good line height, which I usually set as 1.5em. No matter what size type you use, generally a good, readable line height is 1.5em of the font size for body copy.

Your CSS should look something like this:

.bodytext p {
font-size:1em; /* 1em=16px */
line-height: 1.5em; /*1.5em of a 1em (or 16px font) = 24px
}

All caps and small caps

Whether you are dealing with print or web, a string of capital or small capped letters should have some additional letterspacing.

I’ve always used a 1px letterspacing for most all caps and small cap type — it’s a nice balance on the web.

Your CSS should look something like this:

.bodytext p {
font-size:1em; /* 1em=16px */
letter-spacing: 1px;
}

Comfortable reading measures

Having a comfortable reading measure (or width) not only allows your web page to have better structure, but allows text to be easily read.

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”

Your CSS should look something like this:

DIV#col1 {width:400px; }

DIV#col2 {width:50%; }

DIV#col3 {width:33em; }

[code example courtesy of: http://j.mp/DLgE]

Hierarchy and contrast

Establishing a distinguishable and relevant hierarchy allows readers to easily scan your website and allows them to pull out which information is most important or secondary. A good hierarchy allows information to be digested in chunks, thus allowing your reader to retain more information and stay longer on your site.

Although my about page has a lot information on it, one can still easily scan the various sections and pull out only or all the information they want.

Also, contrast is very important as well, especially when pair typefaces:

"When pairing typefaces, it’s important to be able to tell that there are two distinct typefaces in play, but contrast has other uses as well. Very different typefaces can play off of each other in complementary ways or resist each other to create a bit of tension, while typefaces that appear too similar can weaken the message and confuse a design’s visual language."

Layout

When designing brianhoff.net I established my layout around the 960 grid system, which helped to keep things aligned and orderly, which works out well for content heavy sites.

Having good layout helps to improve readability and scalability for your readers.

*Website has since been lightly revised from the above design.

Readability

For something that you "read" having good readability is key. For example, Times is easily readable set in 14px font, it is very hard to read at 8px on the web. Instead, try a typeface with a larger x-height, like Georgia or Verdana.

Remember, typefaces are not just about looking good. They are many beautiful typefaces out there, but so often they are misused. Typefaces were created to serve purpose and were originally designed to work in a specific setting, medium or time period.

Embrace differences

A common question I get asked about my site is "how did you achieve those fancy ampersands (& symbol)?"Below you will find the CSS:

span.amp {
font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
font-style: italic;
}

Once they receive the above response, the next question is "well, not all computers have that font." With that being true because we all use different computers, with older and new operating systems, and different web browsers, a website will never look exactly the same, but that doesn't mean it's a bad thing; embrace the differences.

Just because PC users that use IE (possibly) are not seeing the same ampersands as someone on a new Mac running Firefox, that doesn't mean they are seeing something that doesn't look good or doesn't work. For the people that don't see what you intended, 90 percent of the times don't even know what they are missing.

Typography is the backbone of good web design

As web designers surrounded by trends and other design/graphic elements, we often forget the main reason people visit websites — to read and find information (quickly and easily).

Take away all the extra design elements and all we are left with is the type. Unlike glassy reflections, wood grain textures, and shiny buttons, communication with type is timeless.

So why not pay more attention to the backbone of a good web site design? The next time you start designing your website start first and focus on the type — the strength of a design lies within the type.

Further reading on web typography

• On Web Typography and Font Pairing
• The Elements of Typographic Style Applied to the Web
• Introduction to Typekit

SPONSORED LINK:

Learn typography tutorials with psd-tutorial.com

While each blog design will vary from project to project, below are the basic areas and elements to consider when designing a custom WordPress blog, along with images of my client’s new blog.

The header

While a header seems like a pretty typical area to always include in a blog design, a few things to include in the header area include:

• Logo/name of the blog
• Tagline
• Navigation
• Subscription and social networking buttons
• Search box

Also when designing elements such as the navigation, consider things such as rollovers and image sprites and how they will look and interact.

Main content area

This area typically requires the most attention, as there are various areas and elements to be considered. To keep things a clearer I broke down the main content area:

Text/copy styles:

• Titles of each post (H1)
• H2, H3, H4, H5, and H6 subtitle styling
• Paragraph text, address and preformatted text
• Quoted text
• Ordered lists
• Unordered lists
• Bold, italic, underline and strike-through text
• Hyperlink color/rollover
• Image styling (ie: border color/thickness)

Post meta data:

• Comments
• ‘Published on’ and/or ‘publish by’
• Excerpt text (ie: Continue reading »)
• Tags
• Categories

Page/article navigation:

» Excerpt text (ie: Read more »)
» Page navigation links

Page and individual article appearance:

• How many posts will appear per page
• How each post will be divided from the previous and next post

Sidebar(s)

This area will most likely be the most unique from blog to blog. From single sidebars to double sidebars to sidebars with sidebars this is where you can get creative and also add great functionality to a blog. Here are things to consider when designing or choosing sidebar items:

• Social media links
• Subscription links (RSS/Email)
• Info about the blog
• Search functionality
• Categories
• Popular articles
• Most commented articles
• Flickr photo stream
• Recent news
• Twitter update(s)
• Advertisements
• Recent posts
• Blogroll (other blogs you like)
• Links
• Email forms
• Contact information
• Archives

Comments

Intrigue visitors to comment by having a well designed comment area. When designing the comments section consider the design and layout for:

• The number of comments on the post
• Gravatars
• Anonymous reader icons
• Data and time of comment
• Hyperlinks within comments
• Persons name/handle
• The authors reply in the comments (make it stand out from the readers)
• How the comments will be separated from the previous and next comments
• What number comment they are reading (ie: 2 of 15)
• Text styling

‘Leave a comment’ form

• Fields you would like the commentor to fill out (ie: name, website, twitter, message)
• Submit button
• Subscribe to comments by RSS
• Notification of comments by email
• Mandatory field indicators (ie: *)
• ‘Remember me’ check boxes
• Comment ‘preview’ button/option
• Bot prevention question field
• Text styling/formatting for user

Footer

The footer is another area that you can get creative with if you like or just leave room for copyright information. Here are some things to consider:

• Copyright info
• Navigation
• Contact info
• Social media links
• Resources
• ‘Back to top’ scrolls
• RSS and email subscribe options
• About info
• Hosting info

Other information to consider

If I’m handing off the PSD file to be coded I also like to include an instructions file that includes information such as:

• Background repeats (ie: repeat-x, repeat-y)
• Posts shown per page
• Line height of text (ie: 1.5em)
• Line height of lists (ie: 1.75em)
• Rollover information for buttons, images and text
• Visited, inactive and active link color
• Lettering spacing (where/when needed)
• Image border thickness (ie: 3px)
• URLs to all links (if your developers are setting that up)
• Any jQuery plugins
• How many posts show show in the sidebars “Top Posts”
• How the ‘Read more’ should be stated (ie: Continue reading this article »)

While the blog is still being developed by WPCoder, you can view the entire image source file until then. Will update with link once theme is up and live.

In the midst of redesigning TDC (stay posted for the redesign in upcoming weeks!) I had researched other blog designs and have gathered some of my favorites I came across to share with all of you. Below are 32 enticing blog and news websites with beautifully designed custom blogs.

TheBoldItalic

Biggest Apple

Alpine Camp blog

Viget Labs: Advance blog

Think. Do. Create blog

Squarespace blog

Jonathan Snook

Jason Santa Maria

Purple Raincloud

Carbonica

arktyp

Sushi & Robots

Rob Across America

ATEASEWEB.com

5 Pieces

Owltastic

Objectified blog

North

New to York

Max Voltar

Made in England

Viget Labs: Inspire

Ghostly International

cynosura

CNN (recently redesigned)

Brand New

Bobulate

Big Spaceship

bigcartel

Bearskinrug

AIGA

Ad Fed

As the web becomes increasingly intertwined in our everyday lives (like it not enough already) the more print publications and news papers are moving towards online media, in addition to blogs, this also results in websites maintaining and taking influences from their printed form — relying heavily on layout and hierarchy.

Below are 25 content heavy websites that utilize a beautiful structure, layout and hierarchy in their design.

Fusion Ads

zendesk

Blik

The Swish Life

The Humble Gourmand

The Feast

Lord Likely

9513

We Are The Friction

Revive Africa

Pure Grips

Housing Works

Nosotros

Livestream

CSR360

Comhaltas

Checkout app

Change.org

AIGA

Agentia Kairos

Design Shack

Simplified Safety

The New Yorker

Good

What are some of your favorite well-laid out website designs?

While ‘Googling’ articles that could potentially help them out, I came across some rather beautiful and creative websites of art and design schools, as well as more than you’d imagine, horrific ones — you’d expect a higher standard for a design/art school wouldn’t you? Below are 27 creative and visually appealing websites of various art and design school worldwide.

School of Visual Arts

Domus Academy

Corcoran College of Art + Design

Ringling College of Art and Design

School of the Art Institute of Chicago

USC Interactive Media

Portfolio Center

Otis College of Art and Design

Parsons The New School for Design

Cornish College of the Arts

University for the Creative Arts

Minneapolis College of Art and Design

Stanford Institute of Design

MIT

Art Center College of Design

Copenhagen Institute of Interaction Design

Piet Zwart Institute

Harvard University Graduate School of Design

California Institute of the Arts

CarnegieMellon Design

BIOLA

Kendall College of Art and Design

Massachusetts College of Art and Design

Savannah College of Art and Design

Kutztown Communication Design Department

Expression College for Digital Arts

Moore College of Art and Design

Sponsor:

With a Westwood College associate degree in graphic design and multimedia, you’ll quickly learn answers to questions like that and have a blast doing it.  With your graphic design degree, you’ll be prepared for positions such as advertising and design coordinator, graphic designer/artist, graphic and web designer or production manager.

Does your university or design school have a beautiful and creative website? Please share in the comments below.

Business Inspirational Collections

1. 21 Simple But Impressive Corporate Websites of Top Brands
2. 30 Most Inspiring Business Websites
3. 30 Beautiful Real Estate Websites
4. 50 Excellent Corporate Website Designs
5. 40 of the Best Websites of Non-Profit Organizations
6. 50 Inspirational E-Commerce Websites
7. Corporate Showcases and Typographic Resources

Color Inspirational Collections

1. 30 Beautifully Blue Web Designs
2. 50 Beautifully Dark Web Designs
3. 40 Inspirational Black & White Websites
4. 25 Inspirational Black Websites
5. 35 Black Web Designs That Show Us That Once You Go Black, You Never Go Back
6. 33 Nicely Designed And Well-Colored But Simple Web Designs

Portfolio Inspirational Collections

1. 50 Excellent Designer Portfolio Sites
2. 25 Gorgeous Graphic Designer Folios
3. Top 25 Amazing and Original Portfolio Designs of 2008

Misc. Inspirational Collections

1. Amazing 2008 November Websites
2. Top 100 Web Designs of 2008
3. 100 Websites With Outstanding Artistic Design

Typography Inspirational Collections

1. 27 Beautiful, Typography-based Web Designs
2. 15 Beautiful Typography Inspired Websites
3. 101 Examples of Text Treatments on the Web
4. 20 Examples Of Dark & Minimalist Website Designs With Great Typography
5. 40 Beautiful Examples of Minimalism in Web Design
6. 20 Elegant & Clean Websites
7. Stunning Modern Websites Design

CSS Inspirational Collections

1. 30+ Awesome CSS Websites
2. The Best CSS Designs of 2008
3. 50 great websites designs for your inspiration

‘This N That’ Inspirational Collections

1. 30 Beautiful Menu Examples
2. 30 Beautiful Website Footer Designs
3. 50 Inspirational Website Introductions
4. 36 Beautiful Login Page/Form Designs
5. 50 Beautiful Websites with Illustrated Landscapes
6. 50 Beautiful Hand-Drawn Web Design
7. Showcase of Beautiful iPhone App Websites
8. 35 Inspirational Software and Application Websites
9. 25 Great Examples of Using Gradient Effects in Web Designs
10. 41 Sleek Single Page Websites
11. 50 Monochromatic Website Designs

Feel free to add your own favorite inspirational collections in the comments below.