The Kimmel Center!

Hello Readers,

Unfortunately this will be my last post for a little bit but I have a special, and well known site to keep you satisfied. Today I will be taking about the famous Kimmel Center of Philadelphia and its website. For those of you who are not familiar, the Kimmel Center is a performing arts center based in Philadelphia’s center city.

KimmelCenter.org is a very informational website that mostly covers the Kimmel Center’s events. There are two navigation bars on its site, the main nav on the top of the home page directs you to (About Us, Events & Tickets, Planning your Visit, Education, Support & Membership, News and PIFA 2011), this bar is very prominent and the user is aware that it should be used as the main navigation. The second navigation bar is right under their logo or brand name and that directs you to pages about the Academy of Music and Merriam Theatre where you can get more information about those specific theatres and their events.

 Both navigation bars stay the same and don’t ever move as you navigate through all the webpage’s in the website. Although neither of the bars move or shift in any way, the user is unaware is the link has been visited or whether they are on that specific page or not because the link is not highlighted in anyway.

Navigating through the Kimmel center’s website is relatively easy because their content is simply placed and easy to read.  Even though their sight is so straightforward, the Kimmel Center’s website covers a lot of information thus, needling a lot of pages.

The hierarchy of the typography is pretty apparent, there are different types of headings with corresponding body copy and the headings’ hierarchy are understood. Sometimes to differentiate the hierarchies there will be different colors used along with a slight, but noticeable size change of the text.  All the navigation and links correctly correspond with its names, so the organization and mapping of the side is done well.

When it comes to the layout of the pages, the grid structure is very consistent. On a majority, if not all, of the webpage’s all have an image and main nav bar at the top of the page, to its left lies the second nav bar that it placed under their logo.  Under the main nav is where the body copy and overall content for the specific webpage is placed, surprisingly I couldn’t find any advertisement ads, other than one about a restaurant on the home page, anywhere in the website.

The imagery used for the Kimmel Center’s website mostly consists of photos of events or performances that have been, are or will be held at the Kimmel Center. With that said I feel like all the imagery used is very appropriate for the overall purpose of the site, which is to get as much information about the events and performances at the Kimmel Center. The color palette used on their website is primarily white, black, orange and blue. This is probably because the blue and orange are complementary colors, so they work well together and also work well with the black and white.

Want to know what’s happening at the Kimmel City and its surrounding area? Then visit kimmelcenter.org.

 Until We Meet Again!!

-Brits Bubble

Electronic Ink

Hello Readers! Today we are going to be talking about and analyzing Electronic Ink.

Electronic Ink is international design consultancies dedicated to improving the way people interact with technology, environments and one another. Their mission is to make technology easy to use with the use if interactivity and design. Its creator, Harold Hambrose, built Electronic In., he created it to provide intuitive design solutions while still considering human behaviors. Electronic Ink has been up and running for the last 20 years in the US, UK and Europe; and its plans are to expand even further.

On Electronic Ink there are about two main navigation systems. On the home page the first navigation system links the user to learn About, Process, and Portfolio. Under those three there are mini navigation links that get more in-depth on those topics.  The first navigation has a higher hierarchy than the second one but you have to click on the link to get to the second navigation bar rather then being able to roll over it wit your cursor and it showing up. Once you click on the links on either navigation bar the look of the link does not change, but once you’re clicking though the second navigation bar the link is highlighted when you’re on that page.

The architecture of the site is pretty clear so I do know where I am within the site. I can also tell that the site does seem to have a deep architecture but there is no home page link on the site, users have to click on the Electronic Ink logo to get to the home page. This site is very deep because the overall purpose of this site covers international business regarding subjects from services to design.

There are very subtle, but effective hierarchy within the type, the only thing they can possibly improve on is the hierarchy of the type in the navigation bar. They use different colors, contrast and they also switch from serif to sans serif fonts to distinguish the hierarchy of the type. Also some of the titles have a lighter weight than the text. On Electronic Ink’s website there is a consistent grid layout though out the pages. There doesn’t seem to be and changes on any other pages within Electronic ink’s website, they all stay the same. The focal point of each page a horizontal flash/slide show player that shows photos about Electronic ink and what they do.

There aren’t many photos or imagery on the website other than that slide show player that was just discussed. Even though there aren’t many photos there are enough to portray the overall purpose of the site. The only thing is on the portfolio link there does need to be more imagery to show off their work. The color palette of Electronic Ink consists of orange, gray, black and light/grayish blue. These colors were chosen to keep the site’s simplicity since its users are not only designers.

If you are interested in Electronic Ink. Go to their website at www.electronicink.com

Fubiz.com

Hello Readers,

Today I will be talking about Fubiz, which is essentially a site about the graphic world along with the urban culture. It's based on daily inspiration and pieces of work. When covering the graphic world Fubiz talks about graphic design, motion, advertising, photography and music. In a sense it’s somewhat like a design blog about design but more professional.

On the homepage of Fubiz you'll find the logo on the top left corner and an advertisement to the right of it. Under them lies the only navigation bar of the site is relatively prominent and noticeable when you first go to the site. As you navigate though the site the navigation bar does stay the same and also stays the same size along with the logo. Once clicked on one of the navigation links the color remains the same so you are not aware if that page was visited or not. Also when navigating throughout the site, personally, I am aware of where I am, but sometimes I’m may be a little confused or unsure why certain content are on certain pages but that will be talked more about later. Fubiz does seem to have many pages within the website, most likely because it covers so many aspects of the graphic and the urban world today. So to be able to know where you are within a site that has a very deep architecture is a success for the creators.

The typography in the website is relatively consistent. Meaning that the A head and B heads are very understandable and noticeable so you are aware of a title, subtitle and body copy. With the subtitles and body copy, the subtitle is a darker gray, and a bigger size than the body copy so the level of hierarchy is recognized.

The layout of each webpage in Fubiz does follow the same grid structure, so the content stays relatively consistent. Each website are very alike to the point that the content on the pages where there is more content than imagery, the content will be on the left column of the page and on the right column lies advertisements, featured videos and links to popular pages within the site. On a majority of the webpage the focal point is usually either the logo of Fubiz with the advertisement to the right and navigation on the bottom or an image relating to the content that is usually right under the navigation bar.

The web pages that do focus on imagery rather than body copy follows its own layout but same grid structure. The imagery throughout the site does add design to the site because most of them are about design and they go along with the content of the site. I believe there is a good amount of imagery in Fubiz.com and the pages that have a lot of imagery are appropriate because it is what that specific webpage is for.

The color palette used in Fubiz is mostly red, shades of grey, white and black. This color palette keeps it simple and isn’t overbearing since there are a good amount of imagery used throughout the site. Some of the red and shades of grey is used for the subtitles and body copy but other than that just simple lines and colored links.

Layers Magazine

Hello Readers! Since I've been looking at a lot of magazines lately I decided to write about one of my favorite design magazines and websites. Although this magazine stopped its issues in the beginning of this year, the website is and will still be up and running. Enjoy!

Layers Magazine is “ongoing aspiration is to equip creative minds with the up-to-the-minute tools they need to build the digital masterpieces of tomorrow”. This now only online magazine covers up to date tools and information for Illustrator, InDesign, Photoshop, GoLive, Acrobat, After Effects, Premiere Pro, Dreamweaver and Flash. Readers and users of this website would work or be interested in the fields of Graphic/Digital Designers, Photographers, video editors and animators. Kelby Media Group are the people responsible for the creation of Layers magazine along with Photoshop User, Photoshop World, the Adobe Seminar tour and the National Association of Photoshop Professionals.

On the home page of Layers Magazine the navigation bar is right under the logo and advertisement ad. The main navigation bar is very distinguishable but is also somewhat blended in with the bar of the adobe applications that are linked to their specific pages, which I will get more in depth later. The navigation bar links to the tutorials, layers magazine, Blog, Reviews, and Layers TV. There is a hierarchy among the navigation systems because there is one navigation system above the logo on every page. Both navigation bars do indeed stay visible as you navigate throughout the site, but once you click on the links the colors do not change meaning you aren’t aware if you visited that webpage or not.

Even though you aren’t aware of a visited webpage or not the site’s architecture is very clear and understandable. The site does appear to have a deep architecture since it covers several adobe applications and the topics that are covered are very broad.

Layers Magazine uses a sans serif for its typography. There are many hierarchies between the type because of the many topics, and written content, but the hierarchies are placed well so the information is understood. Some titles have different colors and the colors are consisted with the level of its importance, also the body text is usually smaller, black and lighter, but the main titles of the main subjects have a bigger size and has a black color.

The majority of the imagery on this site is related to design and the topics the the site covers. It adds a better understanding of the subject of the links and what to expect. The images fit well along the grid structure that remains consistent as you navigate throughout the website. The focal point of most of the pages are the Layers magazine Logo and the two navigation bars along with the icons of the adobe applications.

There are many colors on the Layers magazine website because of the imagery, because it’s a designers website that covers a plethora of information. But when it comes to the basis of the website like its logo and text the colors blue, red, white and black are used throughout the site.

So when you get a chance visit: www.layersmagazine.com

Corey Weber Pontz Design Firm

Corey Weber Pontz is a web design and graphic studio in Philadelphia. It specializes in print and digital design along with web development, search engine optimization, copywriting and photography.  Corey Weber Pontz “ strive to bring polished, unique, clean design to all businesses, large or small” and is committed to green design. The owner Corey Pontz graduated from Skidmore College with a Bachelor of Science in Art and a concentration in Graphic Design

On the home page of Corey Weber Pontz website the navigation bar is actually on the left site of the page rather than the top like most web pages. When you click and navigate through out the website the bar remains the same but the links do not change color after you’ve visited that specific webpage. There is no hierarchy among the navigation systems and its only right because there are only seven of them that have the same importance. Since this site is so simple and provides its user with clear and straightforward information, there aren’t many web pages within the website so the user should always know where they are within the architecture of the site.

As stated before, the architecture of this site is very simple so there isn’t a deep architecture, there has to be less than twenty web pages within this website. That I don’t mind because I like the simplicity and there isn’t any information that I believe is missing, its important to me that all of my questions are answered when I am navigating through a website.

The type in this website is a consistent sans serif, making all the text easier to read. To show hierarchy between the text only font size is changed rather that font styles, and that’s only used when heading the specific web pages of headings of text.

There is a simple, consistent and apparent grid structure used in this website. The only webpage that differs is their portfolio page, which has a flash player where the user can click through their previous design work. The focal point of each webpage would have to be their logo and navigation bar on the left side that is the same on each webpage.

There aren’t really any imagery other than the pictures of their portfolio work in this website. Which I think is fine because I had stated before that the content is very simple and straightforward and I believe it’s best that way. The color palette of this website is very simple also, the colors that is used are a greenish, olive color red and black. The same colors are used on every page other than the portfolio work of course.  I think those colors were chosen more on a personal preference when creating this website.

Orbitz vs. Expedia

Today I am going to take a break from design sights once again and compare two very popular sights for booking travel information. Orbitz and Expedia are two websites with one shared main purpose, for the user to be able book flight, hotel, and car information all at once, or separately along with the options to book cruise and activities for anywhere in the world.

Both Expedia and Orbitz have navigation bars at the top or their home webpage’s.  On the Expedia website it links the user to the Home, Vacation Packages, Hotels, Flights, Cruises, Activities, Deals/Offers, and Rewards webpage’s.  The Deals and Offers text on the navigation bar is a different color than the rest so it has a higher hierarchy than the other navigations probably because they want the users to draw attention to that specific webpage. What I don’t like about this navigation bar is that there are vertical slash marks that group the navigation links and I don’t find that to be necessary, I think it would look better if it were after each title of the navigation links. On the Orbitz navigation bar users have the opportunity to link to the Quick Search, Vacation Packages, Hotels, Flights, Cars, Cruises, Activities and Deals.

All of these titles have the same hierarchy and are positioned and separated equally unlike the navigation bar on the Expedia website. Once you’ve clicked on one of the navigation titles and are taken to its specific webpage the title on both websites are either colored or highlighted so you know that you are on the specific navigation webpage. Also on both websites the navigation bars stay the same as you navigate to different webpage’s within each websites, even after you’ve clicked on advertising links.

Since both Expedia and Orbitz cover all of those travel topics there’s a lot of information that needs to be on their webpage’s. This makes it a little confusing when looking for specific information. On Expedia it’s easier to get some information without having to do a search for it like on Orbitz for information like information on the hotels that they are affiliated with.  

Since there is a lot of information on both websites the type used for both are sans-serifs fonts to make the information easier to read. There are many A head, B head and Body Copy going on both sites but on Orbitz I enjoy the grid structure and how they separate the information given. On Expedia it’s more cluttered because there might be more than the needed information for the users.

Like stated before the grid structure on the Orbitz website is very clean and consistent, all the information on each website is usually placed strategically so similar information will be found at the same places. On the Expedia website it seems as if there are about 3 different grid structures used for their webpage’s , this inconsistency gets confusing at time when you want to find similar information on a different webpage.

On both websites their concepts for imagry are about the same because they relate the images to their content so it mostly consists of vacation images. The Orbitz website has less images than the Expedia website, which I find to me more bland but it may be best because it makes the website less busy and straightforward. Even though the Orbitz website is very straightforward I do enjoy the images and the placement of those images on the Expedia website. They even complement the color palette used in the Expedia website which is blue and yellow, and since vacation picture usually consist of blue, green, orange and yellow colors all the colors complement each other.  The Orbitz websites’ color palette consists of white, shades of blue and little green, these color were probably chosen because they are very relaxing and vacation like alike the Expedia website.

Orbitz and Expedia are relatively search engines for vacation and travel bookings. Orbitz is very straightforward and more functional than Expedia because it just has its core needs for the users and not much more. Expedia gives more form and function because it has more of a visual effect that guides you through the website. Personally I would like the form of the Expedia website and the functionality of the Orbitz website so the perfect website for their purposes would be a mixture of the two.

Check them both out at: expedia.com and orbitz.com

Vogue.com

Shaking it UP!

Hello All, I's shaking it up this week and am going to talk about Vogue magazine other than the usual graphic design website,

Enjoy!

Vogue is a fashion magazine that features collections, parties, cultures and videos all about the latest fashion. The actual magazine is pretty think in real life so that makes it appropriate that the website has a lot of information and pictures also.

On the home page of vogue.com lies a navigation system that is under a main picture/graphic that you can flip through. The Navigation bar is very legible having appropriate amounts of space between each work and differentiation between the primary links within the bar and the secondary one (s). When navigating through the website the navigation bar stays the same and actually moves along as you scroll down the webpage’s. Once you click on one of the navigation links the link does not change so you won’t know what webpage’s you have visited already. The site is very busy because there are a lot pictures everywhere but most of the time it’s not difficult to know where you are since you can access the navigation bar at all times.

This site seems to have a very deep architecture within it, as stated before Vogue’s magazine is pretty thick itself so it makes sense that its magazine has deep architecture with many webpage’s exploring and covering fashion topics and discussions. There are a lot of pages and links within those pages that takes you to a different webpage within the site or an external website that is affiliated with Vogue.  The deep architecture is also because the fashion topics that they cover are very broad and complex so the information that it conveys in very broad.

The type that is chosen for the website is Georgia for its body text, but because Vogue covers other brands and companies, there are a lot of brand names and its typographical styles. The typographical styles throughout this site are very broad and various so determining the hierarchy between in the text is very difficult.  There are some techniques are used to make the headlines more prominent like its bigger size and centered alignment but it still gets a little confusing nonetheless.

There is a grid structure that is followed by the webpage’s and for each webpage the same grid structure is followed. to a certain extent, with the main text/topic column in the middle and on the right and left column lie advertisement linking you internally and externally. The sections usually stay the same with the placement of advertisement, contact and social network information at the bottom. The focal point of the webpage’s, other than the homepage, is the logo and navigation bar underneath with the headline of the specific page.

The Vogue website has a too many pictures and graphics for my liking, I understand that it’s a fashion website and people like to see all the pictures of the latest fashion but its too much for a website. Having that many pictures is only suitable for its magazine rather than its website so it would probably be better if the didn’t overwhelm their webpage’s with photos and flash video players with makes the webpage’s longer to load at times. Also, with the advertisements that are a little too big at times and other brand logos that are incorporated with the page there is little or no description explaining its presence.

Even thought I do not favor the photos I do favor the colors of the vogue website itself which is black, white and red. There’s just a lot of colors going on with the other photos that sometimes you lose the simplicity of the original design or style. I find this site useful with its fashion trends and how they organize its topics and information. But I would rather if they use less flash because I can tell that a below average or even an average computer would have trouble processing all the information used for its website.

Studio7Designs

Studio7Designs (studio7designs.com) is a design company located in British Columbia that specializes in “creating strong branding for social and environmentally-conscious companies”.  
It has over 15 years of experience and has done projects for companies all over the world.  It looks that recently they have become an environmentally friendly web design company and, director Aran Down, has done this by solar powered web hosting, eco-friendly hardware, paperless office, recycled programs and more.

On the home page of Studio7Designs lies the navigation bar with the options to get to their Portfolio, Branding, About Us, News, Services and Contact.  There is no hierarchy among the navigation links and as you navigate through the site the bar stays the same giving you the opportunity to go home or to go directly to another option.  When clicking on the navigation link the color does not changing thus it doesn’t give you the opportunity of knowing whether you visited that specific web page or not. 

This site is very organized and the grid structure is pretty simple, obvious but creative and varies for each webpage.  When navigating through the web page’s of the site I haven’t gotten lost or have been unsure what they web page I was on is about. 

The hierarchy of the type in this website is very apparent the topics or titles on the navigation bar has a higher hierarchy than the subheadings that lie within the link so when clicked on and taken to the specific webpage there are subtitles that navigate you through the specific webpage because of all the information they provide.  The font that is used throughout the site seems to be Helvetica and the body text varies by color and size because of the content of each webpage but it is usually a gray color.  The usage of the body text, headings and subheadings relating to its color, size and placement are correctly and strategically placed to provide the content of the site.

As stated before the grid structure is very clean and appropriate for the specific web pages.  The focal point for each web is usually a tie between the specific webpage graphic which is usually a banner graphic of the specific webpage and the website’s main graphic which is a graphic tip of the earth.  These take up an appropriate amount of the web pages with the navigation bar splitting up the two.  The photos and graphics are very strategically placed throughout the website and I find it very enjoyable when reading their content there is an appropriate sized graphic or photo when needed. 

The color palette that is used in this website, excluding their branding and portfolio work, is based on the main graphic of the earth.  Those colors green, blue and purple along with a little brown are the main colors of the website.  A different shade of a grayish, tanish color of the background where the body text lies is used to split up the context of the content and sometimes a graphic or photo is used to split up this content also.  I think these colors where chosen because they are such a sustainable company and they care about the earth so a visually pleasing graphic of the earth is a statement of how important it means to them.  The colors for this website was chosen to support their design views and mission statement.

This site is very pleasing to navigate through and understandable when reading its content.  I am very impressed about their different usage of grids and graphic, photo placement and even the graphics themselves.  All of the web pages are very clean and its content is very informative but to the point.  I would say the only negative comment about this site is that they do not have a search bar, but personally there isn’t anything that I wasn’t able to find.

So If you find my options and description about this website interesting please visit: www.studio7designs.com

Red Eye Design

As a design student I find it interesting to stumble upon design websites.  For some reason I favor the ones that are based or located in the Philadelphia area, possible because I want to know what's going on around me design wise and what kind of projects and work is being produced in Philadelphia.

Redeye design (www.designredeye.com) is a freelance creative agency in the Philadelphia area that produces graphic design, print and production services from logos to web design.   Founder Lynnette Shelley who is an artist and designer likes to provide professional and affordable services to any type of companies and organizations.

On the top of the home page there is a main graphic with the agency’s title with a navigation bar that has six choices that will navigate you to six different parts of the website (Home, Clients, Design Portfolio, Artwork, Blog, Contact).  Those six links seem to be equally primary links of the website and they stay in the same place you navigate through other web pages on the site.  The site is well organized because the layout design is pretty simple and clear, and the same layout is used throughout the site.

I can tell that this site has a good amount of pages within it because there in the texts of the web pages there are links that will take you to more information about a specific project, person or company they the agency has worked on or with.  

I like how they work with numerous and adverse companies and produce very original and creative work.  With the type it looks like they are consistently using an 11 pt Verdana font for the body text.  One of the words that are different than the body text is the main title of “Redeye design” which has is own simple design to it with the “red” part of the word in a red font color and the e’s in “eye” kind of look like eyes.   The title of the agency is also the biggest size because it is most important.  The titles of the specific web page is also bigger than the body text and the text on the navigation bar. 

The grid structure of the site is pretty simple and consistent; the layout of each page has the title and dragon graphic at the top with the navigation bar under it.  Under the navigation bar is the subtitle of the specific web page aligned left with the body text underneath it.  On the right side of the page are more information relation to the page with links, featured projects, contacts and sometimes testimonials and comments that change along with the body text and subtitles of each webpage.

The title of the agency and graphically illustrated dragon with a textured background is the focal point of all of the web pages through the website so there is never any confusion if you’re still on the website or not.  This takes up roughly 3 inches onscreen and is brightly colored in different shades yellow, red and some black.  Under the design portfolio two columns and numerous rows of their projects and work their agency has produced for other companies showing their abilities.  Other than that specific webpage there aren’t many other photos of visual aids that are on the pages.  I think it would be better if they did add a little more visual aids to more of their web pages so their isn’t just body texts with bullets.
  

As stated before the color palette they chose for the site are different shades yellow, orange, red and some black.  Those colors are used mostly in the dragon graphic; but only the red is incorporated in the text.  It looks like those colors were specifically chosen for this for this site because they are very inviting and lively.