Blog Post #5 – Single Page Websites

Single Page Websites

Single page websites have become an evolving trend with recent strengthening within the design community. The format sounds simple at first but with strong design concepts and clever execution, a single page website can stand out more strongly than the more complex, multi-page alternative. If the content is focused and organized properly, a single page design can draw the viewer in and engage them without overpowering their attention spans. There are several uses for a single-page design and I am going to review sitepoint.com’s “15 Creative Single Page Web Designs” article published on September 3rd, 2013 with my own critique of the successful and less successful aspects.

Davide Baratta - 2013-11-19_23.52.05Davide Baratta

Davide Baratta is an Italian Graphic and Web Designer who used the single-page design to present his portfolio online. The site has a strong use of white space throughout with a simple and subtle texture as the background image. Most of the text is a charcoal grey with a single instance or using orange to highlight his profession.

The start of the page has a large hero image that alternates at a pretty fast pace with several examples of Baratta’s work. In the upper right corner, there is a horizontal navigation featuring the 3 primary sections of his site: the home, portfolio and contact information. The page is in Italian, but much of his imagery makes the page easy to interpret.

Below the hero image, is a quick “about me” section including a bar graph on the right that represents his strengths in the Adobe Creative Suite. Below that he has a tiled grid portfolio. The images are all interactive and can be clicked for larger versions. Finally, the page closes with the “contact” text input fields.

The overall page is short but well designed to contain most any information a prospective employer would need. It is highly organized and smart about what it contains and what it leaves out. It is an interesting combination of minimalism and thoroughness.

Reverend Danger - 2013-11-20_04.29.21

Reverend Danger

As the site says in its first sentence, “Reverend Danger” is a digital design agency that specializes in interactivity. The page contains no background image and is primarily presented in hues of blue. There are several block-styled characters that are unique in their style, but also come off as a little confusing. Some characters are clear to interpret what they are while others are harder to clearly identify what they are or what is supposed to be happening.

The navigation of the site is difficult as it is long with no apparent links to jump to an important section you may be interested in. You are basically “along for the ride” and are forced to scroll down throughout the entire body which seems to be approximately 30% of actual content as opposed to “visual stylings and humor”.

Reverend Danger - 2013-11-20_04.31.18The site seems to alternate with quirky humorous content and actual important information that a potential client may be looking for. Even when they are presenting information, it is usually cloaked in the “charater” of the site. They present themselves as specialists in “harmonious interactive design”, but the actual samples they provide are only available at the end of the page and are surprisingly different in presentation than the actual page you have to navigate to get to them. I would be hard-pressed to make any kind of comparisons in style. The style of the “Reverend Danger” site seems more like a marketing gimmick for a video game than a business site.

Pusulaweb -Istanbul Web Tasarım, E-ticaret Yazılım, Web design, Graphic Design istanbul - 2013-11-20_00.28.58 Pusulaweb -Istanbul Web Tasarım, E-ticaret Yazılım, Web design, Graphic Design istanbul - 2013-11-20_00.29.16Pusulaweb.com

Another web design company with a more simplified design is pusulaweb.com. The main section of the page is an island in the middle of an ocean and at the bottom of the page, you begin to be able to view the area below the surface of the ocean. There are 5 links in the image for “Case Studies”, “Partners”, “About Us”, “IPhone Apps” and “Contact Us”. Each link moves the page to the same area below the surface but different content.

I tried each link but they all go to the same place with the same Sea Turtle and the same anchor. I was expecting a few different locations and a little more information. Although the navigation for this site was easy to understand and use, and the content was quicker to access, the overall presentation of the design seemed pretty static for a company dedicated to web design. I reviewed some of the pages they designed and found them to be impactful and creative and much more engaging than their primary site.

They do excellent work on sites for other companies, but I don’t think their own site is a good representation of their ability.

Always Creative - Branding, Web Development, and Print Design - Houston TX - 2013-11-20_00.43.16AlwaysCreative.net

A Graphic-Design and Branding company based out of Houston, Texas, “Always Creative” uses a locked horizontal navigation at the top of the page which allows for quick access to whatever content you are looking for. Although the page scrolls vertically, the primary content sections of the site also incorporate vertical scrolling for a more “in-depth” look at their process, portfolio and company.

The portfolio itself is set up in a three by three grid and clicking on any of the images causes a panel to scroll over from the right and give you a full-page presentation of that particular company’s branding work. You can also scroll this panel left and right to see the samples of the different companies they have branded for. As this panel does not have any method of “scrolling” or navigating back to the original section of the page, it’s interesting to classify this as a “single page”. My initial reaction was to disagree with the classification, but I noticed that the web address never changes from “alwayscreative.net” into any different address.

The overall design appears to give the appearance of a site that is as wide as it is tall. It creates an illusion of going far right and left off of the main body, when in fact, it is merely vertical. The navigation functions smoothly as it transitions from content to content and thanks to the locked navigation bar, no matter where you are in the site, you can immediately jump to wherever you need to go.

Badr

Badr is a foodstuff company that was founded in Tehran. Their website utilizes what is known as “parallax scrolling” which gives the effect of viewing through multiple layers in a three-dimensional space. The site is primarily black with a rounded and serrated window that scrolls at a slightly faster rate than the imagery visible through the portal. The imagery consists of beautiful high-resolution photographs of the food they sell.

Badr Food Industries - 2013-11-20_01.10.01

As in the previous site reviewed, it seems a little confusing as to how this site classifies as  a single page with the “menu” link on the left, which then takes over the entire page with a bright yellow textured background and a visual ordered list allowing you to scroll up and down with full views of the food teased in the parallax scrolling or a “vertically-aligned” horizontal nav bar tht allows you to click directly to the section you want (of the center column) and then click the image of the center column. This takes you back to the appropriate section of the main “black page”.  There are even section of the main site that have links to “slideshows” that overtake the main site. If this is truly a single page, it is definitely fascinating and puzzling how the design allows for so many different presentations and formats in a single area.

Quechua

This was one of the more fascinating websites in the list. Quechua appears to be a clothing company that caters to outdoors activities such as hiking, camping, etc. As you scroll down the page, there is a dance of imagery all across the page with pictures scrolling at different speeds and in different directions. The images show people climbing mountains, camping or just enjoying outdoor activities and some of the pictures have white dots on the clothing they wear. The dots, when activated, take the site to one side to show the item clearly with a brief description and cost.

Quechua – Look Book Spring Summer 13 – Découvrez la nouvelle collection ! - 2013-11-20_04.42.15

On the left of the page is a static series of 5 circles connected by a continuous line. This is the site’s vertical navigation. If you hover the mouse over it, the name of the section fades in and clicking the link takes you to that section automatically, although not necessarily in a “quick manner”. It doesn’t leap to the section you want so much as automatically scrolls you to that section at a faster pace. I suppose they did the work and really want to make sure you see the effect.

Although the site is beautiful and definitely fun to navigate, it doesn’t provide an easier method to find any specific item or items you are looking for. There is no kind of filter to only look at shoes or backpacks, etc. The effect is still stunning and would definitely intrigue the casual shopper to browse their entire catalog, just to see how the page presents the content in such a dynamic fashion.

Every Last Drop – An Interactive Website about Water Saving - 2013-11-20_01.33.57Every Last Drop

Every Last Drop” is essentially an interactive public service announcement for water conservation. It is reminiscent of watching a cartoon in the way it is designed. You can either scroll down the site, which creates a smooth transition from scene to scene. The page is designed to be a journey from beginning to end, so there is no method of navigation to get to a specific section of the site.

You follow the main character through his day and as you go along, you receive small amounts of information concerning how much water the average person consumes both through their own actions and through the activities going on around him.

The site does an excellent job of engaging the viewer through the fun graphics and small, easily digestible bits of information. At the end of the “day” you can view a video to obtain more information about how to save water. There is a noticeable mechanism at work in that it forces you to go to the end of the site. If you stop at some point and try to “rewind” or scroll up to see a previous section again, and then try to advance to the section that follows that one, the page will speed past it back to the farthest section you reached previously and attempt to move forward from there. As you reach the end, you can start over and navigate forward from there.

My Provence

The “My Provence Festival” is a yearly creative art competition meant to promote the Bouches-du-Rhone as a destination. The site has a fixed horizontal navigation at the top of the page and each section of the site takes up the browser on its own. There is no capability of gradually scrolling through the content as scrolling immediately slides the next section up or down, replacing the previous one.

MyProvence Festival - Fourth edition - 2013-11-20_01.53.03The most unique section I found on this page was the “creations” area that shows a full page grid of pictures of a man and woman viewed from behind. If your mouse cursor comes into contact with any of the individual squares, the image is immediately replaced with one of the works of art featured in the competition.

MyProvence Festival - Fourth edition - 2013-11-20_01.59.59The design of the site fits well with the content in that it gives the feeling of creativity in a surrealistic environment, for example… the “Jury” section showing male and female legs underneath a strange half-sphere. There is a lot of imagery that is used and not really explained. There are several instances of tall, narrow pyramids as some kind of symbol for the event and much of the imagery has a 1950’s quality to it as well.

The navigation bar at the top of the site makes it easy to get to the content you want, but the flow of the site makes you want to explore it section by section.

Buchholzer

Buchholzer is a catering site with a brilliant use of color and parallax scrolling. This page is in German and as you scroll down, you come across samples of the food they offer, circular shapes and sectional fields of color floating in the background and scrolling at different speeds.

Buchholzer Catering in 30655 Hannover – Ihr Partyservice - 2013-11-20_02.10.17

The design gives an almost dreamlike quality of falling and at the same time, makes the food seem “light”. There are several links within the page that opens a large grey panel to the left with more in-depth information – should it be needed – without cluttering up the flow of the main page.

On the upper right of the page is a very simple vertical navigation that quickly slides the page to the section you want to read or it will open the grey panel on the left to provide information you are looking for.

Teapot - Toast, thé & 3d - 2013-11-20_02.21.19Teapot Creation

I believe this site is for a French Graphic Design firm that specializes in 3D rendering, animation and presentations for business. “Teapot Creation” shows off their rendering work in a scrolling 3D environment. Cups and saucers in the foreground scroll past at various speeds,giving it that sense of dimensionality that is represented in their work portfolios. This was one of the better sites in representing themselves and their work within the design.

The use of color in the page is sparse. The majority of it is at the beginning and even then, it’s only the brown from pieces of toast, small green bushes and tiny red dots. I would have like to see more of the page in color to show off their skills more. As it stands, it almost appears to be limited to black and white objects, even though I know it’s not true.

The navigation on the right side of the page is unique in that it is represented as a line broken into 5 sections. Only the current section shows the name next to it, unless you hover over it.

Moka

Moka is a Graphic Design house based in Argentina. They appear to specialize in branding and digital media. The design of the site is similar to the Davide Baratta website reviewed earlier in that they provide just what is needed by potential clients and not try to dazzle the viewer with too many visual tricks.

The logo and horizontal navigation are set up as a header for the page and as you begin to scroll down, the header shrinks and locks to the top of the page so it is always available should you need to move to a different section of the website quickly. The overall color scheme is black and cyan on a white, non-textured background. The next section is a four by four grid of tiles showing off the company portfolio images and when you hover the mouse over the individual images, a slightly transparent field of color appears over it with a summary of what you are looking at.

Moka _ Estudio de diseño web y multimedia (Santa Fe, Argentina) - 2013-11-20_04.48.12The next section provides brief descriptions of the company, the services they provide and the staff. The section following next is probably the least successful part of the site. The “Some of Our Clients” area has a bright cyan heading, but each of the client names and logos beneath it are very close in value to the white background, making them nearly invisible unless you hover over them with your mouse cursor. If you were simply scrolling down the page, you would probably miss them completely. Even the map to locate their business incorporates the black, white and cyan palette – which I thought was a nice touch. So often, the map that is included looks pasted on.

Ousback _ Love all, serve all. - 2013-11-20_03.01.12Ousback

This is kind of a strange website for a musician or band. iamousback.com is very small and you don’t get much of a feel for what the music is about from the site itself. There is a logo that looks like it was drawn on with finger-paint and behind it are two images that alternate at regular intervals – and asteroid and a starry sky. Underneath this are four panels with circles containing images that are difficult to identify. These panels create a slight hovering effect when you “mouse over” them and clicking them plays one of the artist’s songs.

The only other content on this site provides links to email, Facebook and where to buy the album. The site seems to be designed for those who are already fans because you won’t find out anything about the artist on this site. In fact, the majority of the content on this page appears to be intended to direct you elsewhere, whether it’s Facebook or a site called Bandcamp, intended to sell the album and the individual songs. As a matter of fact, after clicking the link to iamousback.bandcamp.com, I find there is more actual information about the artist there than on the single-page site. It makes the original site seem almost unnecessary.

Yay Festival

I’m assuming this website no longer exists as the link only sends it the Facebook page.

You Waste A Lot Of Time At Work - 2013-11-20_03.18.23Atlassian

This page is similar to the “Every Last Drop” site as it presents itself in the form of a public service announcement. It uses parallax scrolling and very bright colors and illustrations to inform about the amount of unnecessary interruptions involved in attempting to communicate with one another at work. Several infographics, interesting statistics and funny characters keep you reading and absorbing the content until the end of the page with an unassuming blue bar set as a link stating “Don’t Become Another Statistic”. Activating this link takes you to the actual site that they intended for you which is the Atlassian company selling you productivity and communication software. The site also has a responsive design that is viewable at several different sizes.

Ian James Cox

Ian James Cox is a freelance digital designer that has designed a very unique way to showcase his skills. The background texture is crumpled paper and the content, including the navigation on the left sidebar, looks like it was made with a black magic marker. The text has a hand written quality and, along with the illustrations, are in black and white.

Scrolling down the page creates the feel of following a hand drawn map and gives the illusion of a huge space that allows you to scroll left and right off the sides of the page, even though you are only technically moving up and down. As you follow the map, you come across locations dedicated to work Ian has done for other companies. The first stop shows his work on a children’s version of the BBC network including a link to the site. Each stop along the map has samples of artwork and animations and the map appears to scroll in all different directions and twisting and turning around corners.

Ian James Cox - Freelance Web Designer Manchester - 2013-11-20_04.51.13The design gives the page a real sense of character, right to the end of it where you can leave a message for the artist. The text fields also appear to be hand-drawn. The only drawback I had about the site was the navigation and how it jumps from section to section. As you click the link for the section you want, the screen absolutely races along the pre-determined path of the map until it reaches your destination. While it fits with the map motif, it is somehow visually erratic. It would probably work better at a slower speed so you can see the transition rather than a rapid fire of unidentifiable squiggles and images.

My Analysis

I believe the popularity that single page designs currently enjoy are due to the need to quickly digest information without taxing our attention spans. To succeed in this, the website has to be easy to understand, easy to navigate and have bite-sized bits of information

From these selections, I believe the pages for Davide Barrata and Moka are the most successful designs for the use of single pages. Although they do not have the creative “tricks of the trade” such as interactivity or parallax scrolling, they are beautifully organized and provide just what is needed for content and do not over-burden the viewer with information for the sake of simply having more content.

Baratta’s website was meant as a portfolio of his own work as was Moka’s for their business. They keep the information brief and easy to digest and the visuals minimal so as not to draw attention away from the content. The images of the work they want to present are organized into grids that allow you to either click for a larger version and a closer look or to hover over it for a brief summary overlaying the image.

If you are a client looking to hire a Graphic Designer, the main things you want to know are who are they, what skills do they possess, what does their work look like, what are their references and how do you contact them. These websites provide what is needed rather than spending a lot of time and effort trying to entertain the viewer.

The website for Badr Foods was confusing and, in my opinion, least exemplifies the “single-page” concept. Although it possibly was technically only a single page, the way it was designed gave it the appearance of having several different pages and multiple forms of navigation. In a nutshell, it didn’t “feel” like a single page and it seemed unnecessary to design it as one if it was only going to appear as a regular multi-page site.

It gives the impression that the designer was attempting to show off his ability to take a single page and make it behave like a multi-page site without any reason other than “because they can”.  The other sites were much more creative as single pages and the artistry was in being obvious that it was a single page.

samtsuinews-620x383

Sam Tsui

For my next exercise, I want to design a website for an artist who is just getting started and doesn’t already have one. I have been following a singer who has gotten his start on YouTube as a cover-artist. Sam Tsui has become and internet phenomenon that has gained additional exposure on The Oprah Winfrey show and as the internet correspondent for NBC’s “The Sing Off”.

He has just recently released his first album of original songs and has been touring with Alex Goot. He has a You Tube channel and a facebook page, but not a regular website. I think this will give me a little more freedom to design something without trying to purposely distance myself from an established website.

Advertisements

Blog Post #4 – Michael Ende

60Blog Post #4 – Author Website

For my final project, I’m in the process of designing a website based around author, Michael Ende. My intention is to analyze his current “official” website and websites for similar authors in an attempt to inspire my own work.

Michael Ende was a German author of mostly children’s fantasy and was considered to be one of the most successful German authors of the post-war period. He received more than 40 literary awards and was also heavily involved in politics and political debate. His most popular works were “The Neverending Story”, “Jim Button”, “Momo” and “The Night of Wishes”. Michael also did work in the arenas of poetry, short stories and even theater.

www.michaelende.com

Michael Ende - Momo main pageMichael Ende’s official site was originally only in German but in 2011, was re-translated to an English version as well. Both versions are identical aside from the language used. The page is an off-white color with the text appearing to be either hand-written or the product of an old-fashioned typewriter. The body gives the appearance of gradually slanting down onto a dark-gray fabric background image. The top of the body has a drop-shadow that gradually narrows until halfway down and disappears. The logo for the website seems to incorporate the recent 40th anniversary of one of Michael Ende’s novels, “Momo”. The logo sits above a two-row navigation bar offering links to the Home Page, The Author, Books, Theatre, Links, Guestbook and Contacts.

Michael Ende _ 40th anniversary of _Momo_ - 2013-11-03_20.04.09

The main page has a hero image dedicated to the 40th anniversary of one of Michael Ende’s novel, “Momo” about a woman who lives in the ruins of an amphitheater and described as an “unkempt heroine”. The novel focuses on the concept of “time” and this concept is evident in the animated image on the main page.

The heroine, Momo, walks onto the main page from off of the right side and strolls down a road under the title of the anniversary and the navigation into the actual image of what appears to be a city made of clocks and eventually walks into and disappears behind the far left of the image. The animation then cycles back to the beginning and repeats.

Michael Ende _ 40th anniversary of _Momo_ - 2013-11-03_20.04.29

Below this, a “piece of the page” appears to be torn up from the side, revealing a link to “like” Michael Ende’s Facebook page. Below that the “current news” stories are housed but do not appear to be updated all that regularly. The most recent story was dated Thursday, August 15, 2013. This story was about the apparent re-design of the website in honor of the 40th anniversary of “Momo” and a declaration of more news and upcoming events to follow, but nothing since. The next most recent story was from 2011. Below the current news stories is a numerical navigation list to browse all the previous articles.

footer

The footer of the page contains an illustration of several paint cans and brushes in the same illustrative style as the hero image.

Each navigation section of the site has the same overall design except a change in the actual main image and the content. The image remains the same for each individual page within that particular navigation link. For example, the “Books” link on the nav bar provides a group of light-grey sub-groups (Fiction, Picture Book, Theatre, Poetry, Bebates & More and About Michael Ende). Each of these sub-groups have different content, but the main hero image from the “Books” link remains. In the sub-group “fiction” there are a tiled collection of images from his book covers. The puzzling part of this page is that the images appear to be in white squares that resemble the look of old “Polaroid” photographs. The image within the white borders are squares and often cut off part of the image and in some cases the actual title of the book (with no “hover” title to find out what link you are about to click).

Book Selections

Michael Ende - Biography

The logo, navigation and footer remains the same on each page. Normally, this sort of design would be ideal for consistency and ease of updating the content. However, in this case, the logo and image take up the majority of the browser when each page loads and you have to scroll down each time to get to any of the actual content and you have to scroll all the way back up to get to the navigation.

The “Biography” page of the site is a perfect example of the difficulty. The main site is broken into an unordered list of titles, each title has its own page with only a few paragraphs of information and at the bottom of those pages, a link to go one page forward or one page back, requiring you to go back to the top of the page if you want to skip to a particular article. And each page requires you to scroll to the lower half of the page to begin reading.

Another flaw I find with the design is the lack of color, which wouldn’t normally be a problem if the design was intentional (as this is), but there are a few smaller elements that do appear in color, such as the “flag links” on the upper right that allow you to switch languages between English and German, and the Facebook “like” link below the main image. Both of these are small and minor elements of the page, but as they are the only elements that appear in color they tend to draw the eye to them and off of the rest of the page.

The navigation feels awkward and could definitely be improved, but the overall design feels like a children’s book with large type and illustrations–It is very representative of the author.

Cornelia Funke

Writing HouseCornelia Funke is another German writer of youth-themed fantasy and has written several books including The Ghosthunters series and the Inkheart trilogy.  Her website is very fun and unique in its design. There is a general thin border around the browser that scales with the size of the browser, but only to a specific width before it begins to disappear. The entire main page is an image that is referred to as “The Writing House”. It appears to be a study that is viewed by looking through a bookshelf and the image moves around in conjunction with the mouse cursor. There are several interactive objects within the study, some of which are simply for fun, others as links to other pages within the site.

Book PurchasingEach link creates a “body” that goes down the center of the page while the background image of the room darkens behind it. Unlike Ende’s site, the “books” link for Cornelia’s site uses thumbnails of her book covers so you can clearly identify the book and even listen to an excerpt from the audiobook (if available). Cornelia’s biography page is much shorter and easier to read. Whereas Ende’s biography was multiple pages of a few paragraphs each, Funke’s is a single page of only a few paragraphs. It’s not as thorough as Ende’s history, so it probably wouldn’t make for a good resource if attempting to study her life story.


Page Link - Books
notesThe individual pages in her website appear to be a pinkish textured paper with a single lightly printed header with her name in the border. She doesn’t shy away from the use of color and since she is still alive, it appears as if her site is updated much more regularly. There is a notebook on her desk and when you click it, it shows the title “Notes”. In here, there appears to be several small posts, including images that are dated, similar to “tweets” but are not identified as such. These appear to provide updates to things she is currently doing or working on and the most recent appears to be dated, October 29th, 2013.

Although the “fun” of the main page appears to be of the most importance, its interface does make it difficult to find out what content is available unless you want to spend some time randomly clicking objects around the room to see what is provided where. If you are looking for something specific and quick, it can be frustrating to find.

Daniel Handler

afflicted author

Daniel Handler is best known for his series of books, “A Series of Unfortunate Events”. Although he has written other books aimed at adults, such as “The Basic Eight”, “Watch Your Mouth”, and “Adverbs”, the majority of his success has come from writing about the adventures of the Baudelaire Orphans as the character of “Lemony Snicket”. Handler even pretends to be the representative of the fictional author when dealing with the general public.  Any photos of “Lemony Snicket” presented always seem to be shot from behind, never showing his face. The fun of Handler’s “dual identity” is even used in his personal website at www.lemonysnicket.com.

The website has a light brown fabric background image and the body of the page is confined to the center 1/3 of the browser. In theme with the “Series of Unfortunate Events” style of the page, the navigation bar at the header is a series of circles surrounded by thorny branches and the titles are all negative in context. “The Afflicted Author”, “The Ill-Fated Illustrator”, “The Bothersome Books”, “Vile Videos”, “Dire Diversions”, “More Misfortune” and “Help!” are the titles of all the links available on the navigation bar and the border around the content is highly illustrative and changes only slightly in color and border from page to page.

book purchase

The character of the site also carries over into its commerce page where you can purchase books and box sets, all with descriptions written by Mr. Snicket in the same negative manner attempting to convince you to NOT purchase the books while selling you the books. In the “Vile Videos” section of the navigation, you can find a video of Lemony Snicket (with his face obscured, of course) which shows the atmosphere of the entire site.

Out of the three pages I’ve researched, I would have to say this one is my favorite. It has the perfect balance of both information and fun and is simple to navigate. There is a lot of content if you are a fan of Lemony Snicket. The only real improvement that I would seek would be to provide more information on Daniel Handler and his work outside of the “Series of Unfortunate Events” books. Out of the three sites, this was the most fun to explore and read.

Puffin Books
TheNeverendingStory1997EditionThe publisher for Michael Ende’s “The Neverending Story” is Puffin Books, a subsidiary of Penguin Books, dedicated to younger crowds. The website is very, VERY basic in design. It is more specifically focused on content over decoration or establishing any kind of “feel”. The body is much wider than that of any of the author sites and the navigation bar is across the top with a secondary navigation dedicated to the left side bar. The navigation is simple and easy to interact with. The content is very text-heavy and most imagery is in the form of small thumbnails. If the thumbnails are clicked, you are taken to that books own information page where you can get whatever information you may need on that title.

Puffin Books page

The content is the primary concern of the site and providing information. The design is very basic without a lot of creativity or personality to it. Once you leave the site, you won’t remember much about it or even have much desire to return and explore.

Visual ResearchVisual Research

My current hope for the design of my site is to bring a feel of the magical and fantastical. I want to give it the feel of a child’s imagination as it will mostly be representative of “The Neverending Story” in which that is the primary theme of the story.

I don’t want it to be illustratively heavy, but to include elements that work with the content to create an interplay between the two. Illustrations that present the content, rather than becoming the content. I see softer and more muted colors to be used along with textures that may imply a dream-like quality.

Any kind of character representation would be more obscurde and less specific. Like viewing them from behind.

A website that I found was for a frozen yogurt company called “Sour Sally” at www.hellosoursally.com. The design is based around an interactive word and a small illustrated girl named Sally. The imagery is fantastical and dreamlike and not so overly complex that it draws away from any actual content. The website is very alluring and makes you want to explore it.

Hello Sour Sally! - 2013-11-04_11.55.03

I want to make the reader the character for my site that is either exploring the site, or observing the character who is, similar to the plot of The Neverending Story. I’m hoping to create a logo and navigation that will follow to each page, almost as if a character itself. And keep the fantastical elements lower on the hierarchy than the content. Similar to this “Bridal Fantasy” website.

Website Design Demo _ Bridal Fantasy Co. Ltd. - 2013-11-04_12.05.44

Blog Post #3 – AMC Theaters versus Regal Cinemas websites

amc_regal

A popular misconception about the movie theater industry is that fewer people are going to the movies and ticket sales are struggling. According to the website “The Numbers“, ticket sales for movies have remained pretty constant from 1995 (1.22 billion tickets sold) to 2013 (1.29 billion tickets sold so far) with a spike in sales in the early 2000’s. However the amount of revenue generated from ticket sales has nearly doubled from $5.29 billion (1995) in a year to $10.53 billion (2013 so far).

The Numbers - Movie Market Summary 1995 to 2013 - 2013-10-26_23.08.54

I’ve personally held a great love for the activity of “going out to the movies”. I love sitting in the darkened theater in front of a huge screen with powerful sound and the crowd of movie fans laughing when I’m laughing, cheering when I’m cheering and jumping from scares when I’m jumping. It’s an event and a fun escape with friends or even by yourself.

List of cinema and movie theater chains - Wikipedia, the free encyclopedia - 2013-10-27_00.17.29

The two top movie theater companies in number of screens and locations are Regal Theaters, with over 7,000 screens and nearly 600 locations  and AMC Theaters with nearly 6,000 screens at nearly 500 locations (as of December 2009 per the National Association of Theater Owners). I had decided to do a side by side comparison of the websites of these two national theater chains and show the differences in approaches to selling their services and providing information on their constantly changing selection.

AMC Theaters
AMC Theatres - Get movie times, view trailers, buy tickets online and get AMC gift cards. - 2013-10-26_21.44.28
On the main page of AMC Theaters, you can see the site was designed using a tab system and the company’s red and white color scheme with baby blue accents. A lot of white space is incorporated into the design with grey highlights separating each section. They also use a standard font for the tabs of the tabs of the hero image section that matches their logo. The primary navigation bar creates drop down menus when the cursor hovers over each tab. The hero image section has three primary tabs featuring the films currently showing, a section for advance tickets and another section for films coming soon. Each film is represented by the movie posters and when you hover your mouse cursor over the images the poster slightly enlarges and is clickable.  Below that are additional tabs showing the current promotions available, such as upcoming movie marathons and any specials offered at the concession stand and at the bottom, the most recent movie-related news articles.

AMC showtimesOn the right sidebar, you can enter in your local zip code and select a favorite theater to show a constant listing of the films and showtimes for that day. A promotional image featuring an upcoming “Thor” movie marathon and a widget featuring recent AMC Theater-related tweets. The footer of the site contains all the corporate links and other assorted miscellaneous information.

Clicking any of the featured movie posters brings you to that film’s dedicated site with a summary of the film and a listing of the running time, genre, director, cast, release date, showtimes and what formats (IMAX, 3D, etc.) it is available in. The movie poster images offers a look at the film’s trailer when you hover the mouse over it. Below this information there is a widget collecting tweets directly referencing the specific film and to the right of that–a listing of all the latest movie news and showtimes at other nearby AMC theaters.

 

Regal Cinemas
Movies _ Regal Cinemas - 2013-10-26_21.47.43
The design for the Regal Cinemas website has a strong grid-like structure featuring tiles and “blades” on their main page. The appearance gives it the feel of a website that was designed to be for tablets, but the design is not responsive to changes in size. The color palette for the site is red, black and gold with sans serif fonts and little white-space is used as the grid is tight with images and tiles.

There seems to be two different navigation bars on the main page with the first appearing at the top of the site with 4 choices of seemingly directed at a more business-centered client with selections for “About Regal, Investor Relations, Group Sales and Private Screenings”. The second navigation bar of the site are 4 large tiles in the shape of red and gold movie ticket stubs which are more directed towards the average consumer and allow you to browse the movies available, view the nearby theaters, get information on their “Regal Crown Club” loyalty program and purchase gift cards and/or get information on their corporation.

The hero image section is a collection of five blades that slide over each other in intervals of time. Below this, you can enter in your zip code and see a selection of films available in your area (represented as movie posters). On the right sidebar, you have 3 tiles that are clickable links to the latest deals at their concession stands, how to purchase advance tickets and gift cards. In the footer of the site, is the standard navigation panel for any and all additional information including corporate links, how to apply for job opportunities and their social media links to Facebook, Twitter and YouTube.

The Comparisons

Although AMC Theaters is the second ranking movie theater chain, I believe its website design is far superior and easier to navigate. Most of the same information is provided by both, but AMC seems to have a much more airy design to it where Regal has a lot more information neatly organized and tightly packed together. I believe Regal’s strength lies in the organization and ease of access to its information.

Individual Film Information

On the AMC site, hovering the mouse cursor over the film posters makes them slightly larger, but on Regal’s site, hovering the cursor provides a box of information including “rating, runtime, release date, cast, genre, links to “tickets & showtimes” and a link to the trailer for the film. This makes it quicker to reference important information that AMC requires you to click the link and leave the main page to collect.
regal hover selection

Bad Grandpa Now Playing _ Regal Cinemas - 2013-10-27_19.03.19The individual film’s page for Regal has a large video widget to watch the trailer for the film whereas AMC has the poster that contains a hover link to view it. Both contain a synopsis of the film but AMC includes the information such as running time, rating and cast on their page instead of the hover-link that Regal employs to allow you to stay on the main page. Both websites provide showtime listings with highlights of the showtimes that are still available; and they both offer sections for customer comments (AMC has a widget that provides “tweets”).

Overall, Regal’s individual film pages offer more information in sidebars for different offerings they provide, such as Bollywood films, Cinema Art, On-Screen Events and their “Summer Movie Express” program. Regal also provides a listing of the current top box office and how much they have made so far.

Overall Navigation

AMC showtimesIt is important, when providing a browsing experience for those who may know specifically what they want to see that you not make them travel across multiple pages when it’s not necessary. AMC Theaters has a sidebar on the main page that gives you a constantly updated listing of all the movies in your “favorited” theater location, whereas Regal requires you to click their “Explore Theaters” tile to leave the main page and see the theater listings.

I think most people already have an idea of what they are looking for, but sometime, they may simply be in the mood for a specific genre, such as a horror film or a comedy. While browsing AMC’s site, I could find no way to filter through their selections by genre. They have the genre listed in each film’s individual site, but no way to see only a listing for comedy films, horror films, etc. Regal does have this option when you click their “Browse Movies” tile in the navigation bar. You can filter the choices by release date, category and even by ratings (PG, PG-13, R, etc.), you can also change the view of the listings from poster icons to a more detailed text listing.

comedies listings

Page Design

Regal on a 1440 by 900 monitor

With all of the movie posters and large tiles and sidebar images and advertisements, I believe that the Regal Cinemas website can appear cluttered and even a little confusing. They employ a background image behind the main page, but it is not static and when you scroll down it disappears, leaving simply black bars on the sides. The background image is nicely made but it is unclear what it is advertising unless it is being viewed on a 1920 x 1080 monitor. I have a secondary 1440 x 900 monitor and the design of the images causes the text at the top left “Share the Love” to simply show up as “The Love” and the top left’s “Join the Club” to only show as “Join the”. The “Regal Crown Club” logo isn’t visible unless you scroll the window, and even then you can only see about 2/3 of it. It appears that Regal designed it specifically to be viewed on larger monitors at higher resolution. Scaling the website to a smaller size in the browser does not effect the content and in order to view it, you must “bar-scroll” over.

responsive-AMC

AMC Theaters, however, has employed responsive web design that allows the content to scale down and the content to shift according to the size of the window viewing it. This makes it much easier to view the content with various monitor sizes, tablets and cellphones (although both companies have separate downloadable “apps” available for their customers. In the area of design, I believe that AMC edges out its competition by designing with various alternate browsers in mind.

Grid Structure
Grid Structure

One aspect in which both websites were strikingly similar was in their use of grid structure. Both sites had their primary navigation on the top header area of the page with their main content in a large black are taking up approximately ¾ of the page on the left and both sites had sidebars on the right of the page with very similar footers on the bottom.

Blog Post #2 – Getting Drunk on Liquid Layouts

“For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.”

– Richard Rutter, Brighton, 2005
The Elements of Typographic Style Applied to the Web

What is most important in designing a great website in this modern era?
For some it’s great visual imagery, a fantastic color scheme, wild fonts, cool animations, music or interactivity. But in reality, what good is all of that if the content isn’t presented in the finest form of legibility and widely available to all different forms of media?

Some people may browse the web on their personal computers at home, but it has become more and more common to look around and see people face down in their cellular phones and tablets.  What may look great on your 20 inch LED monitor at home could easily be completely unreadable on your iPhone’s 4 inch display.

While reading several different articles recently on the importance of typography, in web design, I’ve definitely learned how important it is to focus on a strong typographical foundation in the design of your site before you worry too much about all the decoration and “pop” you may have already pre-planned in your head. And what has become more important recently is the ideas of both “elastic and liquid layouts”.

These newer concepts take into account the several different possibilities of how a website may be interacted with. With “elastic layout”, font size, line width and line height are designed to scale proportionately depending on different factors. Some people prefer to use larger fonts due to poor eyesight and should they choose to increase their default font size on their screen, it’s important to have the line space and width scale with the changes so the text does not become crowded in a way that makes it difficult or uncomfortable to read. This mechanism is made possible through the use of “em sizes” rather than pixels or percentages. The em sizes takes the specific font size being used into account and make the calculations necessary to maintain a proportionate line height as explained in “The Elements of Typographic Style Applied to the Web” at http://webtypography.net/toc/ in the section labeled, “Choose a Comfortable Measure

Web Designer, Chris Pearson, has written an article on the use of Golden Ratio Typography at his personal blog, Pearsonified. Here he discusses careful mathematical calculations to show the proper ratio of font size to line height and to line width. There is also a fascinating chart showing the “sweet spot” of line height versus width with several common font sizes.

line-height-vs-line-width


Legibility is clearly one of the most important key factors in successful web design. There are several uses for typographical choices that are more on the wild side, but these should always take a back seat to the importance of clearly communicating with your audience.

In Gabrielle Gosha’s article, “Making the Right Typographical Choices (October 25th, 2012)”, she references a website (http://www.kidd81.com/) that absolutely drowns the reader in kid oriented fonts and bright candy-like colors.

Kidd81

The site appears to be the designers personal business site, but give the impression of a very singular style. It is suggested by Gosha that these types of design projects should stick with a more traditional look incorporating sleek, professional typefaces.

But overall, the most fascinating to me was the concept of “liquid layout”, which allows the content of the website to not only scale in size, but also to shift in format and even visual style depending on the size of the screen it was being viewed through. In some cases, it appears as if the website recognizes what device it would be looking at it at a specific size and shifts its design to a new presentation that better fits the format. This is made possible through the use of “em sizes” and percentages. Images can also scale adapt and scale to the size of the viewer through the use of adaptive images.

hello-im-chris-wilhite

Through my research I came across the website of furniture designer, Chris Wilhite at http://chriswilhitedesign.com/. It has a beautifully designed interface with an excellent balance of professional-looking typography that is easy to read and plenty of white space to allow it to be comfortably read.

Not only is his own sense of design beautiful but the design of his website reflects his own love of the craft. There is a grid format of images that incorporates strong, clearly legible typographical choices in both headlines and text content. The content of the main page is also incorporates the technique of “liquid layout” as it has a different look when viewed full screen, scaled down to more of a tablet size and finally a more compacted phone size.

Wilhite

scroll lowscroll high

Another professional example of incorporating liquid layout is the corporate site for a Portugese Desgn company named, Scytale at http://scytale.pt/. This company specializes in application development, interface design, and brand & identity. Their website reflects a very professional attitude with an uncomplicated interface. As you scroll down the site, you notice the use of images that scroll behind the interface at a slightly slower rate than the slider which gives the impression of a three dimensional space.

This website also scales its content in proportion to the size of the browser and even withdraws the use of some of its imagery in the smaller formats. The largest format scales it’s images to as wide as the browser will open and has three of the “sliding images” mentioned previously and a map of Spain at the bottom, showing where the company is located and the menu bar at the header has the links at the right with a company logo on the left. At the mid-range “tablet” size, most of the content is the same, yet scaled down, but the menu bar has now centered at the top with the logo in the center of the menu. In the smallest format, only one of the sliding images remains and the map at the bottom has disappeared and the menu bar at the top has disappeared, yet the logo remains.

scy

Liquid layouts and responsive web designs are unique in that they take whatever is available to view them and adapts to that format. Web developer, designer and blogger Jamal Jackson posted an article, “Adaptive and Fluid Approach in Responsive Web Design” at 1stwebdesigner.com in which he states, 

“The real beauty of liquid is that it has no true form and/or structure. Instead, it adapts to whatever container it is in and creates its form from within that. Applying this theory to RWD (Responsive Web Design), the Fluid approach makes it possible to have layouts that will fit within, and adapt to, any viewing device.”

Blog Post #1 – “Newsarama” Website

Is it possible to create a website with an immense amount of content without making it overly complicated or aesthetically “cluttered”? Although in many cases you will see websites that are not successfully straddling that line, I think I have a site that does it and does it quite well.

One of my favorite websites is Newsarama which is a “news and reviews” site dedicated to topics such as comic books, film & television and videogames. It is updated regularly and often. It is also complimented by its own Facebook page which alerts you to newly posted articles to the website. The website is a property of the TechMediaNetwork which also manages websites such as Space.com, TechNewsDaily, BusinessNewsDaily and MyHealthNewsDaily.

It has a static background that frames the site with a very minimalist imagery of a generic “superhero” on a blue textured background. The site itself uses a primarily 2-column grid, although some of the content may split into two columns themselves. The colors of the website are red, white and blue, although it does not appear to have a patriotic motif to the scheme. You can register as a member of the site and create your own profile to receive email updates, post comments to articles and blogs and/or purchase items in the site’s store.

Although the articles on the main “home” page are listed by most recent post first specifically and group all the content types together, at the top of the site is a menu bar to go to the pages which are dedicated to articles in a specific genre. If you are not interested in comics but are interested in video games, you can click that bar and have only the articles on video games available to you.

Also on the main page, just below the bar, is a darkened frame that contains the most recent articles with an application that cycles through the 8 most recently released articles, giving each a few seconds in a larger frame for emphasis. As new articles are released, the “featured articles” are moved down the list. Each different tab of content follows a distinctly similar page format.

On the right-hand column of the site, other content has been made available such as widgets offering videos, the sites current Facebook and Twitter activity and the “most popular” articles, should you not wish to browse the long list of recent posts.


Within each of the articles, there is a title header, including the author of the post, date and time, and options to share the article on Facebook, Twitter or Google +. This title is usually followed with and image followed by the credit for the source of the image along with an option to view it at full size as the image may only be a partial view of the complete work. If you click the link (or the image itself), it provides a full-size view that does not require clicking an “x” to close the image and return to the article. The image opens in the center of the page and causes the page to dim in the background, giving emphasis to the picture and you can return to the article by simply clicking the screen anywhere outside the area of the image.

Just before and just after each article is a selection of “related articles” and after the article are any available comments by the members of the site wishing to discuss the topic.

Not only can the menu bar narrow the options by genre by also by Newsarama’s content type. Newsarama has a few staples such as “Top Ten” lists and upcoming previews of comic books that allow you to catch a brief glimpse of plots or artwork to upcoming releases. It also has its own store with toys and collectibles for sale and its own collection of related blogs by multiple contributors. It has a very clean interface as far as ease of use, everything on the site has an established format for presentation. Each post is represented by a standard sized image related to the article alongside a header and a short synopsis underneath. Under each synopsis are buttons to read the article (which can also be accomplished by clicking the image) and to “like” the article on Facebook.

The amount of content on the main page can be easily classified as “dense” as there is not a lot of negative space used. The overall design seems to be dedicated more to quantity than aesthetics, although the appearance of the site is still neat and clean. The format is very compartmentalized and easy to navigate, even offering the options to narrow the content through the use of the menu bar at the top. Aside from the content itself, I am most drawn to how this website manages such a large amount of content without giving an overly-cluttered or “messy” feel to it. Because it is updated on such a consistent basis, the material is always fresh and keeps the look of the site new and interesting. The design also allows you to focus on the material that is of the most importance to you, rather than thumbing through a lot of articles that don’t interest you to dig for those that do.