Blog #6: The Double-edged Sword of Single Page Websites

Life was much easier when
Apple & BlackBerry were just fruits.

Singularity:

Swiss_army_knife
Swiss Army knife

Picture a Swiss Army knife- one tool with several functions. The positives of it include versatility within one entity; it is multi-purposeful while being compact. The negatives entail a lower quality of operation and possible confusion when navigating for a specific tool, both due to the tradeoff of it’s adaptability and miniaturization. What defines the value of the utility knife is it’s balance between those two sides of the spectrum. This idea can be metaphorically compared to a single page website- one site containing several pages all working in harmony with each other to execute a goal. A writer on web-savvy-marketing.com defines this type of website saying, “A one page website is simply a single page website that uses only one HTML page. When clicking on navigation links, the user scrolls down the page or jumps to that particular content’s section.” This trendy adaptation has critics all around, so lets take a look at 2 examples of single page web designs, one of which implements it beautifully while the other needs revision.

The Good- My Provence Festival:

When discovering the My Provence Festival 2013 website you are first confronted by the striking aesthetic of the art on the homepage. The homepage is the hub of any site; it sets the tone for what’s to come and how to get there. The beauty of this one is it’s whimsical, yet retro vibe that is translated through all of the artwork and typography. The design is unified, thus the navigation is clear to the user about what & how they should explore.

Provence-homepage
My Provence Festival 2013- homepage

The global navigation is traditionally placed at the top in a row, and stays stationary as you scroll. This is extremely simple, yet effective placement because you can jump to any section of the site and know exactly how to navigate despite the large amount of contents.

Provence-navigation
My Provence Festival 2013- navigation

The grace of this design lies in it’s details. When scrolling downward from section to section the page falls slowly in a slight bouncy transition- this in combination with the highlighted name of the section in the nav bar clearly demonstrates what portion of the site you are on. Consequently, the various sections of the site are unified artistically, yet categorically separated in a cohesive way.

Provence-creations
My Provence Festival 2013- creations

Interaction and an ever-changing interface is one of the several things that separates web from print, and My Provence Festival’s website exploits that beautifully. There are many points of interest that provide satisfaction and participation for the user. It’s as if there are hidden gems that the consumer can discover by actively scrolling, clicking, flipping, and revealing images and information.

Provence-jury

Whether through the inspiration from animation, or concentration of information in an organized fashion, My Provence Festival’s website utilizes the benefits of a single webpage to it’s fullest.

The Bad- Ousback:

A benefit of single page web designs is that they can evoke a simplicity that allows the viewer to concentrate on particular sections. There may be a lot of information but it isn’t overwhelming, rather it greets the user in a welcoming way. Unfortunately, the website iamousback.com not only negates capturing the users attention with a valued homepage, but doesn’t include any information at all. The simplicity is striking, but in a confusing sort of way. This notion of questioning the site is then reinforced with the absence of clear navigation? Sure there are two buttons/options at the top, but ‘listen’ and ‘connect’ could mean any number of things.

iamousback-homepage
Ousback- homepage

Despite the confusion and because of the eye-catching artwork, I decided to take the plunge and click ‘listen’. I appreciated the easy transition from section to section, but when I wanted to go back and explore the ‘connect’ link I couldn’t find the navigation bar to take me there. Regardless if the band (which I have only now realized that’s what the title means because of the song links) wants to promote their music with links to purchase and listen, they are missing a vital aspect of the website that connects all the pieces of the puzzle.

iamousback-listen
Ousback- listen page

iamousbackRight now pieces of iamousback.com are jumbled & missing. Their product is great, but their promotion isn’t, and to their detriment it could cost them fans. Through a reevaluation of hierarchy, navigation, incorporation of information the site has the pieces of a single page website that need to be properly fit together.

The Band- Jack Johnson:

“An individual action, multiplied by millions, creates global change.” This quote by Jack Johnson references his recently wrapped up tour, From Here To Now To You. Performing in intimate historical theaters through Europe, Canada and the US, Jack along with his fans, band, touring crew, and venue operators were mindful of their environmental impact. I not only appreciate, but also admire this care and resourcefulness. Johnson’s lyrics and beliefs, are then wonderfully translated to his website jackjohnsonmusic.com/.  Using natural wood textures, iconic vector imagery, and a cool color palate evocative of Mother Nature, his homepage invites you to come along on a musical journey.

Johnson-homepage
Jack Johnson- homepage

Beginning with navigation, it sits in a row at the top providing a foundation for the header composed of his name and a complementary song to listen to while traveling his site. San serif faces are used through the entirety of this website and lend themselves to his smooth, universal musical aesthetic.

Johnson-navigation
Jack Johnson- navigation

Johnson’s passions translate openly through his lyrics, just like obvious grid when clicking on the linked page entitled ‘Music’. With square modules framing his album covers there is clear organization between albums and soundtracks. By hovering over each image you can either click on its link to purchase, or just scroll over each to learn the title of the album and record label that made it.

Johnson-music
Jack Johnson- music page

Johnson-personalityWhat I love & aim to portray in my single page website is Jack Johnson’s intimate, cozy character. Utilizing design tools such as type, color palette, and imagery, I will exploit the singularity and cohesion of the page style to exemplify Johnson’s music. All in all, rather than being overwhelmed by the advances in technology and web design, let’s use them for the betterment of culture, and take advantage of their innovation.

Sources:

Advertisements

Blog Post #5: Design Can Change the World

Good design is thorough down to the last detail. Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.

Dieter Rams

Don-Norman
Don Norman, former Vice President of the Advanced Technology Group at Apple

Design is not only responsive to, but also a catalyst for culture. The ebb and flow of trends dictate the designs of that time period. Design tells stories and animates history in such a way that it has become imbued into our everyday lives. This reciprocal interaction between user and interface can be seen digitally in what is called ‘user experience’ (UX). Termed by technology guru, Don Norman, he describes UX saying, “I invented the term because I thought human interface and usability were too narrow. I wanted to cover all aspects of the person’s experience with the system including industrial design, graphics, the interface, the physical interaction, and the manual.” Thus the relationship between man and design is at full force when considering the dynamics of UX.

UX-graph

At the AIGA Jacksonville event on November 7th, notable user experience professional Nick Finck elaborated on this topic in terms of its influence in today’s world of cultural digital obsession. Design can change the world… in fact it’s already started to. Here are some tips Finck suggested to keep in mind when considering the “nuances of UX.”

3Design is in the Details: With the influx of talent in the world of design a key component that sets people apart is their attention to detail. As classic industrial designer Dieter Rams so poignantly stated, “Good design is thorough down to the last detail.” User experience craves for detail in aspects such as loading time (for example see images loading on Pinterest), navigation (for example see CNN’s global navigation for iPads and tablets), transitions, which all encompass ‘delight moments’ in time where the user and the experience unite harmoniously.

Winchester_Mystery_House
Winchester Mystery House- the opposite of simple

Superbly Simplified: The notion of simplicity is often overlooked as unfinished or amateur, but something should be said for the grace & elegance when it’s achieved properly. As master artist Leonardo da Vinci put it, “Simplicity is the ultimate sophistication.” Finck exemplified the antonym of this in the construction of the Winchester House.

Pay Attention to Process: Good design is a process, it isn’t happenstance. The process provides the building blocks to which design tools are applied. Finck stated that a good experience sells more naturally than pushy, overt designs that focus on making profits. So what does this mean to the user? It means the experience needs to not only be profitable, but enjoyable. The best way to figure out those needs of the consumer is through the researching process- research, test, research some more.

research
The Research Process
pope
Pope Inauguration comparison

It’s Our Job: Design can change the world- just think of the power that means for a  graphic designer? Look at the photo on the left of the Pope’s inauguration in 2005 verse 2013. It is not only the time of the digital age, but rather we are a digital people. Our emotions, memories, and passions are being recorded and documented with applications that were unfathomable just several years prior. It’s our job to respect the profession while exploring its boundaries. In terms of UX we need to observe it in action, understand the context, and always keep in mind the ultimate goal of producing a dynamic experience. Be the forward thinker, “We are the makers of our own state.” (Gandhi) We are designers, innovators, engineers of culture, so lets use our tools to design a better future.

Sources:

Blog Post #4: Researching Good Reads

Make no little plans; they have no magic to stir men’s blood.

Daniel H. Burnham 

Topic Research Erik Larson

The Devil in the White City is an enthralling fictional mystery novel that places you in the midst of action at the Chicago World’s Fair of 1893. Authored by Erik Larson, the pages draw you in as if you are participating in this triumphant event. Larson is known for the historical mystery genre and applies a striking tone and mesmerizing attitude to other books such as In the Garden of Beasts, Thunderstruck, and Isaac’s Storm. Keeping in line with the spirit of his novel’s, one would assume the authors website to be equally engaging. Unfortunately though, I was not so impressed. Lets evaluate why.

Beginning with navigation, it is placed in the traditional format at the top above the hero image. Creating a row of clickable tabs it’s clearly organized to be viewer friendly for easy navigation. Sitting next to it, the author’s logo- his important writing objects consisting of a pencil and Oreo’s, and the hero image- the view from his lake house, are prominently placed at the top.

Larson-navigation

Within each tab there are links in the left hand column for further exploration. For example, on the About The Author page you can click on other links to contact Erik, learn where/how he does his best writing, and about his beloved dog Molly. Another example of this can be seen in The Books tab that includes a list of his novels with links to each in the left local navigation column. Therefore, the layout of each page is the same, with the content changing to be appropriate for each subject.

Larson-AboutTheAuthor Larson-Books

Continuing from the navigation and hero image to the body content of the site, there is a red color block that separates the two. This design choice throws me off because of its bright hue that contrasts from the hero image’s coloring. The content is organized in a 4-column grid structure situated on a white background. On one hand this allows for the dark coloring of the book’s covers to stand out, but on the other hand I believe it is a poor design choice and doesn’t explore the various ways to highlight these award-winning books. What I do appreciate though is the social media links to interact with Larson via email, Twitter, Facebook, and Flickr placed in the left most column, highlighted in red type. He is known for interacting and communicating with his fans and as an avid reader of his I appreciate this effort.

Larson-body

By exploring the website it becomes evident that the most important part is where he has links to purchase and learn about each book. Not only does this information make up the body content of the homepage, but also is repeated on each page in The Books tab and Contact tab. Granted, the reasoning makes perfect sense- you want to repeat the books because they are the product your selling; but the design choices they approach this in are not as clearly communicative. To fix this, the images should be larger, the titles of the books should not be in a condensed style typeface, and the Buy Now link should be more obviously highlighted. Larson is a fabulously dignified author, thus his website should reflect that.

Topic Research- Other Authors

Historical mystery authors have the task of recounting true events in a respectful, and interesting fashion. Erik Larson is in good company with other author’s of this genre such as: James Patterson- an ex-FBI agent who recalls crimes he investigated; and Charles Todd- a pen name used by the mother-and-son writing team Caroline and Charles Todd who recount events at his previous job at London’s Scotland Yard. All three authors are renowned and successful, and although their websites should, they do not showcase that.

Looking at Patterson and Todd’s website we are welcomed with recognizable global navigation sitting on top of attractive hero images. They both utilize san serif typefaces and create a row of tabs similar to Larson’s at the top. The subjects for each tab contain similar content such as books, contact, events, and about the author.

Todd-navigation

Patterson-navigation

The information found on each page is analogous with important sections for detailing about each book and purchasing information. Both Patterson and Todd display this differently from Larson though. Taking advantage of the grid system they horizontally orientate the books separately in each row. Columns then organize the book summary and purchasing information to create a unified layout that emphasizes each book individually within the context of a cohesive website.

Patterson-Books

Todd-Books

Conclusively, all three author’s- Larson, Patterson, and Todd, contain similar content, but are organized differently. As information architect and user experience designer Steve Krug would say about making a successful website, “Don’t make me think!” It’s about the effortless enjoyment the user experiences when exploring a website that characterizes it’s success.

Topic Research- Publisher

Publishers have the arduous task of taking the raw result of an authors mind, and transforming it into a tactile product appealing to consumers. Published by The Crown Publishing Group, a subsidiary of Random House publishing, The Devil in the White City is in good hands with the world’s largest book publishers. They are a prominent company in the industry and their beautiful website exudes that distinction.

RandomHouse

Exploiting the grid system to full extent The Crown Publishing Group highlights books that they’ve published with large images while consecutively respecting each one, as it’s own entity. They further aid the viewer by including global navigation tabs that can direct you to each author or book.

RandomHouse-navigation

CrownPublishing-authorsThe purpose of the publisher’s website differs from the author’s website because the author has to exhibit his novels in a detailed fashion focusing on the notion of himself as the author; compared to the publishers website that has to entirely separate each book while reflecting their background presence as the publisher. Keeping this idea of separation yet interconnection in mind, the most important element on the page is the product- the books. Regardless of whose website it is- Larson, Patterson, Todd, or The Crown Publishing Group, the most accentuated aspect of the page is the product. Product equals money, and money equals success, thus the design choices spotlighting the books have to reflect that. Tools that accomplish this include large images placed in a grid system for separation, a continuous alignment of a square motif, color variation between each cover, and respective links for discernable navigation. As you dive into the meat of the site, for example the Authors tab, the local pages carry the grid system and create a unified composition with many varying elements on the page. As a user I so appreciate this organization and easy navigation.

Visual Research 

Inspiration sparks creation. As I enter into this task of creating a website for my final project, inspiration from other design professionals is what helps drive me into making a special product of my own. Here’s a couple websites that are beautifully designed and will become a muse for my project.

MichaelKors

  • Who can’t appreciate the class and elegance of Michael Kors. Not only do his product’s radiate grace and style, but also his website reflects that sensibility. The visually simplistic, and yet aesthetically beautiful site draws you into shopping through his products. The color scheme, and typefaces choices appeal to a universal consumer while at the same time establishing a luxurious attitude.

Case3D

  • Case 3D is company that specializes in visualization and animation services to help professional designers and creators such as architects, interior, construction, and industrial designers, engineers, and realtors, 3-dimensionally visualize their products. Their philosophy stresses working as a team to fulfill the needs of each client. The website creatively intertwines that notion of teamwork, and relates it to the user experience of interconnectivity in the website. It relies on the users participation, and therefore he/she feels welcome and appreciated, already establishing a connection a possible customer.

Gnosh

  • The gorgeous handwritten typeface on G’nosh’s website is eye-catching and unique just like the gourmet dipping sauces they sell. The organic nature of the type contrasts beautifully with the photos of the food on the black background. All of the type is clickable, providing fun, unexpected user activity with various entry points. The various entry points allow for more options for the viewer to become satisfied, and find what they need.

NicolasWill

  • Nicolas Will is an award-winning art director who has worked with top interactive & advertising agencies throughout the country. What I admire about his website is the intimate setting the user is immediately confronted with on the homepage. The large photo background shows his approachability, while also displaying his creative aesthetic as a design professional.

SoundCloud

  • SoundCloud is a library for all things audio. They specialize in spreading local bands and archiving classic videos. What was interesting is they only have 2 global navigation tabs: home, and explore. Akin to our final project also having few tabs I explored how they organized their information so concisely and attractively.

All In All

Research is in integral part of the design process. It informs and inspires decisions to respect the purpose and content that your designing for. Authors may not have the most gorgeous websites, but this doesn’t have to be seen as a downfall. The glass can be considered half full because it provides us as designers more job opportunities, and chances to imbue your passion onto the world stage of literature. Grasping other peoples successful designs even though they aren’t in the book or publishing realm, can expand the degree of imagination, and insight as inspiration.

Citations:

http://crownpublishing.com/

http://www.jamespatterson.com/

http://eriklarsonbooks.com/

http://charlestodd.com/

www.pinterest.com/

http://www.inverseparadox.com/2013/07/what-makes-a-website-successful/

www.michaelkors.com

www.case-3d.com

http://www.gnosh.co.uk

http://nicolaswill.com

https://soundcloud.com

Blog Post #3: Blood, Sweat, and Web

You wanna know what scares people? Success.When you don’t make moves and when you don’t climb up the ladder, everybody loves you because you’re not competition.

 –Nicki Minaj

The notion of competing products has been a force in the fiscal market since the dawn of industrialization’s existence. Whether from budget brands at Walmart to luxurious lusts at Saks Fifth Avenue, regardless of the price category, competition provides the momentum to claim your spot in the market and edge out your competitors. Two brands that pour their branding blood, stylistic sweat, and tactical tears into marketplace competition are Nike and Adidas. Applying knowledge of design techniques I aim to analyze the in’s and out’s of each website and determine how these competitors are doing in their battle for the web.

Organization & Hierarchy

Hierarchy and the organization of elements on a page are a key ingredient that determines the success of a website. It provides directions for the viewer to navigate, and communicates the importance of elements that they should view. The eye is always looking for order, therefore when it can easily understand what to do and how to do it, it will be more inclined to examine the elements and therefore the products are being successfully featured. Nike and Adidas communicate organization through their navigation features and columnar alignments. These elements go hand in hand with hierarchical order. Looking at their navigation bars, the both utilize similar placements at the top of the page.

Nike-navigation

Adidas-navigation

With the horizontal organization our eye clearly interprets this as navigation, and allows for easy access when shopping through the various sections. Hierarchically, the placement at the top of the page is significant because it relates to the major categories that each brand provides. Therefore the navigation bars provide the basis of each brand’s products and exhibit a platform for them accordingly.

What’s interesting is the way both Nike and Adidas employ similar layouts. As you scroll down and explore their page, they both have rectangular gridded sections of imagery that allude to the crisp, edgy, sleek design of their products.

Adidas-main-page Nike-main-page

What makes the organization and hierarchy of each page become so successful is the way they both advocate and showcase their appreciation for the grid…

 Grids Systems

Grid structures are a thing of beauty. As an aficionado for organization myself, I’m attracted to the balance and symmetry that grids provide. Creating modules of allotted spaces not only aids the designer, but the viewer as well. As notable Swiss graphic designer Josef Müller-Brockmann once said, “One must learn how to use the grid; it is an art that requires practice.” By examining Nike and Adidas grid structures it becomes evident how they attract attention to specific products and engage the viewer in shopping throughout the page.

Nike-gridBeginning with Nike’s grid it is clear they are using a square motif. Whether displaying their shoe products, or providing social links to participate in, the square grid system flaunts a balanced and beautifully articulated division of ideas.

Adidas-gridAdidas exploits the grid system as well, but in a rectangular design instead. Using vertical orientation with minimal gutter spacing in-between, the grid provides a platform for the product to seduce it’s viewer, which in turn creates a possible consumer.

For an in-depth examination of the grids take a look at the two images below. They highlight the alignment and point out the square style for Nike and rectangular motif for Adidas.

Adidas-grid-layout Nike-grid-layout

Texture

Adidas-texture Nike-textureTexture is a central element of both Nike and Adidas website’s because they directly relate to the quality of their products. The comfortable and functional aspects of their product’s fabrics are therefore reflected in the textures on the webpage. They imitate the tactile nature of shoes, clothes, and accessories. For example, on the Nike women’s running shoe page, a gritty, high contrast image mirrors the aesthetic of the shoe it’s displaying. On the Adidas men’s training apparel page, the image with a smooth, spotty background texture works in conjunction with the fabric of the jacket’s they are selling.

Color & Whitespace

Nike-whitespace Adidas-whitespaceColor and whitespace may sound like opposites that conflict, but in design they are two tools that work in combination with each other to create striking arrangements that balance and show each other off at the same time. The whitespace is often intermingled throughout the grid structures creating a separation of space and designation for each product. For Nike the whitespace takes up the entirety of most backgrounds on each page, while for Adidas the whitespace is created using a gray gradient as the background. Color works alongside whitespace because they compliment each other. There is so much color already used in the images of the products that the white space balances it out in the backgrounds. Additionally, the color is ever-changing because you can view each product in the various colors each brand offers. Thus the design has to be adaptable and versatile for the interactivity of each customer.

Imagery & Iconography

Although Nike and Adidas are competitors it is evident that they feed off each other’s energy and aesthetic designs. Looking at the major imagery on each page- the hero, they both approach it in a similar way. A large photo of an athlete adorns the top of the page and has you yearning to wear that brand’s clothes so you can be just like that athlete too.

Nike-hero

Adidas-hero

Scale

By exploring the pages of both sites you come to realize that the scale of the images plays a major part in why it’s so attractive. The up-close and personal, zoomed in images confront and challenge you. They communicate with you on a deeper level. For instance, in the Nike training link there’s a hero image that has a focal point of eye level. You purposely can’t see the athletes eyes because you are supposed to envision yourself as that person in the picture. It is intimate yet anonymous at the same time. In the Adidas hero image on their mens shoe page, the scale of the shoe provides directional movement and we are engrossed in the perspective and color play that the scale provides.

Nike-scale Adidas-scale

Typography

Adidas-typography Nike-typographyFiguring out a way to make customer’s feel the exclusivity that comes with a sexy product, yet at the same time be inclusive for all the various people purchasing it, is a very difficult task. Nike and Adidas use gorgeous typography on their websites to help conquer this contradictory yet complementary market competition. What I find captivating is their use of san serif typefaces throughout the entirety of their websites. The adaptability, and sharpness of san serif faces reflects the nature of both their logo’s. Additionally, the san serif typefaces alludes to a fluidity, and movement that is otherwise halted by the serif corners of serif typefaces. Therefore, the typography not only is aesthetically pleasing, but works double-duty because it reflects the action, sports quality that both brands promote and sell to.

All In All

Reflecting on the investigation of the two brand competitors- Nike and Adidas, I not only admire their websites but enjoy absorbing myself in their use of design techniques. It’s intriguing that they use such similar stylistic qualities, but develop them in different ways. I myself am a consumer of both Nike and Adidas products, and through this exploration I most graciously appreciate the blood, sweat, and web tears they have poured into their graphic designs.

My Sources:

Blog Post #2: You’re So My Type

By all means break the rules, and break them beautifully, deliberately and well.

― Robert BringhurstThe Elements of Typographic Style

Typography is the veins through which graphic design’s bodily system functions. If properly achieved, it can give life to the information and thus the meaning behind the words is born. If not respected and corrected, it can singlehandedly cause the downfall of any medium in which it is placed. As Bringhurst so aptly stated, it may be appropriate and even necessary at times, to break the typographic rules. Although, in order to break them let’s first explain them and their relationship to the application of web typography.

Q & A

print-nytSetting type is an art unto itself. It calls for conversation not only between the words and the stylistic approach, but also between their meaning and the user that reads them. Lets examine setting type methodologies for print and web. Take the New York Times for example, it is rooted in a print based medium but has applied it’s aesthetic and purpose to the web. Now although they web-nytare two different mediums, canvas verses screen, they call for the same end goal readability. The process of reading though, differs between each application. Print is a tactile product; it comes in a definite size and shape, which helps the reader become acquainted at first glance. There are standard sizes and shapes in print, this allows for consistency and familiarity. Web on the other hand, is based in the process of interaction. The user dictates what is going to happen and when. The interface is ever-changing, is reliant on the computers specified preferences. How the reader interacts is based in the medium’s manner of navigation. Print applies the customary ‘reading like a book,’ turning pages from right to left and reading them from left to right, and down. Conversely, web’s navigation is different for each webpage, and has infinite methods of approach. The designer may distinguish pages using hierarchy, but the process in which the user selects and reads them is variable.

Now that we’ve acknowledged the differences, how should we properly apply them to the web? Begin from the outside in, or in type jargon, macro-typography to micro-typography. type-macro-microAs inherently termed, macro-typography refers to the overall text structure of the document; micro-typography encompasses the smaller, detailed aspects such as typeface, justification, and leading. By establishing an overall theme, you can then apply that aesthetic to the details and create a cohesive layout. For rules of thumb when setting type for web we can refer to the master of the craft, Mr. Bringhurst: larger type size (at least 12) for body copy, do not use hyphenation, only use a single word space between sentences, set opening paragraphs flush left, don’t compose without a scale, and “Kern consistently and modestly or not at all.” (Bringhurst)

Are there any restrictions to setting type on the web? Yes. Unfortunately, that’s an easy question to answer. The nature of the web is ever-changing, and so is its platform. Computer preferences differ for every computer; therefore the color, contrast, and methods of viewing the web page are adjustable for everyone. Cross platform capability is also a hot topic because of the various applications we can use to view the web on.

What is @font-face and web fonts, and what benefits do they entail? @font-face is a CSS rule, which allows the server to download a particular font to render a webpage even if the user doesn’t have that particular font installed. This benefits web designers because we no longer have to adhere to a particular set of “web safe” fonts that the user has pre-installed on their computer. It allows for more freedom, consistency, and capabilities in design. Similarly, web fonts are a font format that carries a license, which allows web designers to use real typography without losing the advantages of live, or searchable text. (http://www.webfonts.info/node/386)

web-type-header

Trends for 2013:

  • Trend to mix sans serif and serifs to contrasting effect.
  • The most common fonts for headlines are Georgia, Arial and Chaparral Pro.
  • The most common fonts for body copy are Georgia, Arial and Helvetica.
  • The most popular font size for headlines is between 29 and 32 pixels.
  • The most popular font size for body copy is between 14 and 16 pixels.
  • Headline font size ÷ body copy font size = 2.4
  • Line height (pixels) ÷ body copy font size (pixels) = 1.47
  • Line length (pixels) ÷ line height (pixels) = 24.8
  • Space between paragraphs (pixels) ÷ line height (pixels) = 1.43
  • The optimal number of characters per line is 55-75, but 75-90 is popular.
  • Body text is left aligned. Hyphenation is not used at line endings.
  • Mobile devices are mostly adapted to via responsive design, although some publications opt for a dedicated app.

IN USE

How does all this typographic knowledge come together? Well here’s two websites that exemplify beautiful typography running through their veins.

        Example: Real Simple

Real Simple ‘makes life easier’ with their clear, colorful, beautifully designed website. Originally a magazine, Real Simple has applied their identity as an organizer savvy, entertainer’s sidekick by imbuing their beliefs into the layout and typography of the website. Beginning with the nameplate, Real Simple is in a bold, sans serif typeface that marries well with the slab serif slogan underneath it.

real-simple-header

Then as you brainstorm for crafts and recipes the navigation bar for their sister sites, multimedia, and header topics is horizontally aligned at the top for easy access.

real-simple-navigation

Scrolling down reveals the most popular articles and ideas, which allows for hierarchy to take place within an organized grid system. Their grid system is much appreciated because it organizes the vast amounts of information in an unimposing, minimalistic way.

real-simple-grid

Color plays a big role in the success of any website due to its ability to unify, and balance the theme. Contrast is a tool used to attract attention and provide dynamism throughout the interface. Real Simple not only uses it in their logo, but also in the headers, and subheads. The orange and blue/teal combination gives it a fresh, sophisticated look.

real-simple-color

        Example: CO OP

coop-tabs

CO OP is a branding company that has relayed their passion for branding, onto the elegant, energetic identity of their website. The navigation throughout the website, and the user’s interaction is their main focus. The site begins prompting you to interact and play with them by hovering over each tab. What is revealed underneath is a thesis statement about their company’s purpose and beliefs. The typography is used as art.

coop-think

coop-create

coop-collaborate

The grid alignment and color are the most emphasized principles at first glance and the quirky, yet refined personality is carried beautifully throughout the rest of the site. For example, the grid is an effective and efficient method of organizing the images with according titles. It is easy to navigate and the square formats are familiar for the eye.

coop-grid

coop-typeface

San serif typefaces are used through the entirety of the website. Due to the short amount of body copy I appreciate the continuity of the face style. The universality, and approachability of the san serif applies exquisitely to CO OP’s business venture of branding companies and creating identities.

ALL IN ALL

Whether reinforcing the message, or becoming the art itself, typography is at the heart and soul of graphic design. It contributes to the structure of organizing information by applying a foundation of history and style to each letterform. The layers of rules are building blocks that take practice, time, and more practice in order to master. Once the skills are harnessed and the tools refined, we can break the rules, break the barriers of design to create an engaging, unique typographic display of affection.

CITATIONS:

Citations for images:

Citations for information:

Blog Post #1: Sexy yet signature, J. Crew

From drool worthy accessories to grandma’s sewing zippers, the Internet has everything from a-to-z. These days, online shopping is not only a craze but also an efficient method of purchasing in which customers have instant access to every color, size, style, and quantity of whatever product their heart desires. That being said, I will bashfully admit that I am an online shopping addict. I search, I shop, I conquer. Although, my bank account may not appreciate what some would call superfluous spending, my closet collection and self-confidence sure do love when someone catches a glimpse from behind of my new polka dot, silk toothpick trousers. Keep in mind; it will be a long time before online shopping substitutes for the brick and mortar building. The consequence of the Internet world is twofold, positives being the speed and convenience, negatives being the absence of personal interaction and tangible appreciation. One brand I have extensive experience with in both realms of shopping is J. Crew.

Screen Shot 2013-09-04 at 10.58.57 AM  is a clothing brand for men, women, and children that does not only sell clothes, but also the personality and spunk exuded as you put them on. It is this aura, this fashionable air that J. Crew breathes with which it deserves credit. The storefront appeal and in-house shopping is an experience unto it’s own. You want to wear the same outfits as the employees and you want to date the others. Online shopping though is a different animal, and J. Crew has not only trained it but furthermore taught it to do circus tricks. The website is set up to be user-friendly in a stylish way. The main categories are tabbed at the top with the subcategories on the left, and more personal subcategories regarding specific store information on the bottom (See picture below, or visit http://www.jcrew.com/index.jsp).

Screen Shot 2013-09-04 at 10.41.39 AM

The information is set in a columnar grid framing the left hand side of the page.  This clear alignment makes maneuvering from section to section easy for the novice or professional user. When the consumer has the ability to view more products they enlarge the selection of possible purchases. More products mean more buying, equals more money, equating to a happy consumer and producer. As you choose a category, for example ‘women’s clothing’, and click on a subcategory, for instance ‘sweaters’, it directs you to the page displaying J. Crew’s variety of women’s sweater products. (See picture below, or visit http://www.jcrew.com/womens_category/sweaters.jsp). This procedure is the same for every category; thus repetition in design and interactive treatment is key to a welcoming interface.

Screen Shot 2013-09-04 at 11.03.54 AM

Screen Shot 2013-09-04 at 11.34.06 AMThe graphically designed layout of the combination of photo and type is what makes this page, and others, so successful. The main photograph is sexy without being shoddy, and the type reflects that attitude. The san serif “sweater” heading with the sweater description in a serif typeface below is a direct representation of J. Crew’s modern touch on classics. Additionally the alignment of photos with product information below them makes shopping a breeze. For more specific options you can click on the sweater subcategories or the drop down, which shows the same information two different ways. Proximity to the button or personal preference is what delineates which approach the user would choose.

J. Crew caters to the person who wants to look good with looking like they’re trying. Easy sophistication, sexy signature appeal is the design aesthetic this website strives for, and I believe has been achieved. Whether through contrast in type choices, stylish charm of photography, or pleasurable interface usability this online shopping addict and graphic design (future) connoisseur, gives J. Crew’s website an A+.

Now go discover for yourself, http://www.jcrew.com.

Screen Shot 2013-09-04 at 11.24.09 AM