Portfolio Reflection

When I first set out to make my portfolio website I knew I needed spend some time researching website building platforms and/or programs before deciding which one would be the best for me. Though I’m in graphic design, web design and coding are things I am the least familiar with, and I knew I would not be able to accomplish the look I want by building a new website from scratch all on my own.

I had tried a program called Macaw a while back that basically works like Photoshop or Illustrator but for web design. However, I found it difficult to design responsive web pages through the program, and that is something I knew I’d need for my portfolio site. Next I tried the free online website builder, Wix, and while it did have a decent amount of options and was fairly to use, navigating the interface was a bit tedious, the font options were very limited, and there was no way to get rid of the “Wix” logo on the webpage without paying for an upgraded version. After that I tried Squarespace, which seemed like a much nicer version of Wix, but it also felt like the themes and options available were not customizable beyond a certain point, and I didn’t want a website that looks exactly like other ones out there. So ultimately I decided to go with WordPress. I had some experience with it before and I liked that there was an option to add custom CSS to change the look of the website beyond the main theme options. It felt like it might be more work to build everything out, and I might have to pay a bit for a theme and to add my domain, but in the end it was worth it.

For the design, I knew I wanted something that was easy to navigate and minimal in design so that the images would grab the viewers attention more. There were a few different reading from this semester that mentioned the importance of unity, focal point, and keeping the page easy to scan, which I kept in mind while designing the site. After quite a good amount of time searching, I finally found a theme, Blask, through WordPress that fit what I was looking for. The navigation was simple text set to the left, with room for a logo above it, and then the project pages all displayed as images on the right 2/3 of the page and had titles that would appear over the image when the cursor hovered over it. I was able to set all the text to black and the background to white to keep with the minimal theme, and allow the color to come from the images. I also designed a logo for myself that works well in black on white background.

For the actual project pages, the main challenge was simply compiling photos and images that would best showcase the work without becoming too distracting or overwhelming. I also remember in one of the readings the importance of sort of telling a story with the images to help the viewer understand the whole concept better, so I tried to do that as best I could with each project. Also, for anyone interested in learning more about each project I added an explanation paragraph at the top of each project page.

Overall, I am very happy with how my portfolio site currently looks, even though it is not quite complete yet. I am most pleased with the design and navigation option for each page and the image galleries. Some things I’m not quite happy with at this point are some of the written text, some images, and other small details to change with the theme. Going forward I plan to set some time aside to better plan out the “stories” I want to show and tell for each project page and possible re-photograph some images. I would also like to go through the theme a bit more and change some small details, like the title text that appears over images, and I might possibly try to find better gallery view options. While the galleries I have set up are good for showing the images one at a time, I think I would also like to try showing larger images together or all on one page.

 

Advertisements

The Current State of Logo Design

 

There is no denying that our lives today are practically littered with logos. After taking a quick look around the room from where I’m sitting at my home desk right now, I was able to easily spot 58 different logos on various products, boxes, and on my computer screen. I’m sure if you took a minute to look around from where you are at right now, you too would be surprised at just how many logos you can spot.

Most researchers estimate that a person living in a city is exposed to over 5,000 logos each day. Those numbers might be hard to believe at first, but they go beyond just the logos printed on physical items in our environment. It also takes into account the huge amount of branding real estate space on our smart phone and computer screens.

Despite their overwhelming prevalence in our lives, most people probably don’t give logo designs much thought. Yet, if you start to read through business and design blogs, you’ll see quite a large number of articles and posts dedicated specifically to logo redesigns and how they either help or hurt the brand. In fact, because of the almost absurd amount of online hype and criticism recently surrounding logos and branding, Virgin America made it the butt of their April Fool’s Day prank this year, by creating a cheeky new logo redesign of their own.


(Virgin America’s logo April Fools redesign explanation video)

 

But, How Did We Get Here?

To better understand this craze around log design and what to expect moving forward, we should first take a look back at where it came from.

Technically speaking, logos have been around practically as long as writing has existed, but they haven’t always existed with the same purpose or importance they have now. Over the course of time the way people used and viewed logos has consistently changed with the times, but the most impactful changes have come just within the past century.

Ancient Egyptians were some of the first people to use unique symbols to identify items that were either owned or crafted by a certain individual. As people started trading more, the symbols they used not only had to help differentiate them from their competitors, but they also had to represent what type of goods or services a person provided –so those who couldn’t read or speak the same language still knew where to go for certain goods and services. The Medieval traditional glazier (glass craftsman) sign below is a perfect example of this. It not only is made out of glass to show the quality workmanship of the shop, but it also features the symbol of the glass craftsman guild the owner was a part of.

Traditional wrought-iron guild sign of a glazier

(traditional glazier guild sign from the Medieval Germany. More information on Guild signs at electrum magazine.

For most of human history, logos were used in this way to simply identify and represent the work a craftsman or business did. But in the mid 20th century, they started to take on even more meaning and importance.

 

Then Came The Golden Age

With new printing and travel technology, businesses in the mid 1900s were able to get their name out there and grow into new markets much easier than ever before. This change not only meant they would have a wider range of clients, but also a lot more competition as well. Most companies during this time found that the best way to stay successful in the competitive markets was to invest in good branding and advertising that would help them draw in and keep the most customers possible.

With the new focus on the aesthetics of a company’s brand, this period was really the birth of modern graphic design and branding design. Iconic designers like Paul Rand proved just how powerful a solid well-designed logo could be for businesses, and they started to heavily invest in design agencies and in-house designers. People began to understand that logos that were simple and easy to read and remember were far more successful that the busy illustrated style of logos they were using before. The evolution of the iconic IBM logo redesign perfectly demonstrated this shift.

ibm-logo-evolution.jpg(Changes to the IBM logo from 1888 to 1972. More information at Famous Logos.

In addition to keeping logos clear and simple, they started to take on more meaning. With many competing companies, consumers began to choose which brands they were more loyal to based on the values that company had that was in line with their own personal values. So designers we tasked with finding new ways to demonstrate the values of a brand through simple visual elements in the logos. Going back to the evolution of the IBM logo, you can see that in 1972, the horizontal stripes were added. These were to meant represent “Speed and dynamism.”

 

Then Came Digital

Towards the end of the 20th century, technology began to change again in a major way. TVs, computers and the internet were quickly becoming a much bigger part of everyday life. And with these new platforms to reach consumers, came new challenges and opportunities to branding a logo designs.

One of the major opportunities that came from this time was the opportunity to expand on how logos functioned. With TV and the internet, people were consuming media much faster than before, and some companies found ways to keep their branding consistent but while also being able to quickly change styles to reflect the trends of the time. Probably the best example of this is MTV’s logo. From the early 80’s on, they have used the same basic type treatment for their logo, but have portrayed it in hundreds of different styles to keep viewers interested and stay relevant.

Mtv Logos.jpg

(Variations of the MTV logo from the 1990s and early 2000s. More versions here.

Another important consideration for logo design during this period was the fact that the screen resolutions on these early devices were so low, that more complex designs would not show as clearly and would often be too pixelated. This challenge really reinforced the “simpler is better” approach to logo designs. If companies wanted to keep their logos consistent from print to screen, they would have to simplify them so they would look the same online as off.

The last major change to graphic deign at the end of the 20th century, came with the increased use of the internet. With more businesses going online, two new areas within graphic design opened up: web design, and user interface design. Companies and design agencies started to bring on designers that specialized in adaptable designs for the web. Because of the nature of the web these designs not only needed to remain simple, but also be more versatile to fit different screen widths, and eventually to be used in different ways –such as a simple icon or button.

 

Where That Puts Us Now

Media technology has continued to advance at an astounding rate since the early 2000s. Experts say over one third of the words population today is currently connected to the internet, and by 2020 more than half of the world will be connected. And in the US alone, about two out of every five households currently subscribe to a video streaming service, according to a new report from the media measurement company Nielsen.

Not only is this great for businesses to continue to expand and reach a larger audience, but it also creates a world in which consumers have more power too. Consumers now have more options than ever before, expect much more from top brands, and have a bigger platform to voice either their approval or disproval of those brands.

 

The Tech Behind The Trends

Since the early days of the in-home computers and dial-up internet, computer screen resolutions have come a very long way, and there are now even extremely high resolution smart phone screens. All of these new high quality displays allow for much crisper and clearer images, and this in turn allows logo and branding designers to do more than they could before with digital logos. A few great examples of these trends are the line drawing logos, and the multi colored logo, and the realistic logos. Can you image how these logos would have looked on a computer over 15 years ago with much lower pixel resolution?

Apple_2003_logoslack-logocycle-slam-by-dan-dragomir
(AppleSlack, and Cycle Slam Logos)

Not only have there been major improvements to screen resolution, but also the ability to create smooth motion graphics for web pages and apps. Animations can make transitions within apps feel more fluid and natural, and they can also add an element of playfulness to websites. When companies and designers can find ways to add motion into their branding, it can have a huge impact. Last September Google rolled out a rebranding of their own featuring the logo, a set of animated dots, and a monogram. The new logos got a lot of praise around the internet for being “spot on” by Brand New and “a vast improvement” to their old logo by Web Designer Depot. After 16 years with their pseudo-3D logotype, they dropped the serifs and shadows created a logo system that might otherwise seem pretty plain and boring, if it weren’t for the playful animations of the elements.


(Google’s 2015 New Logo – Branding Elements & Doodle Evolution – Animated HD Google Doodle)

Food For The Critics

Much like the how internet first introduced new challenges for branding and logos, smart phones have now brought a whole new range of challenges to design as well. Yet again, designers have a platform that requires more dynamic branding and logo designs that will work in a much wider range of sizes. Many companies now develop a set of icons that can be used in addition to the main logo, or even additional logos for the various products a company offers that all work together. While this is typically a great way to further show how strong a brand is, some brands can easily find themselves in over their heads with this approach. In fact the ride hailing company Uber caused quite the stir this past February. Uber co-founder Travis Kalanick (not a designer) decided to take on the redesign of the logo, and various app icons himself with the help of Uber’s design director Shalin Amin. The results Techspot said the redesign was “confusing”, and  Gizmodo said it resembled an “asshole.”

uber-app-icon-design160203_EYE_Uber-Logos.jpg.CROP_.promovar-mediumlarge(Uber’s Extreme Makeover)

It’s safe to say no designer or company ever wants their customers to realize that their branding resembles horrible body parts. In addition to Uber, AirBnB can probably back that up. But it doesn’t take much for word to spread on the internet nowadays, and it’s basically impossible to quiet the critics.

AirBnB Logo
(AirBnB Logo Looks like…)

Most people remember the backlash that the Gap received after changing their logo in 2010. The internet erupted in a firestorm of disproval at the new design. Some customers even took to social media to say they were no longer going to be shopping at the store because of the logo change. It seems crazy to think that changing one visual element, which has no real effect on the quality of the product, can cause such outrage but it did. Probably because the customers saw it as a poor choice made by the company and lead them to believe that the company would then be making other poor choices in the future After the online backlash, the Gap decided to restore the peace and revert back to their old logo.

Gap Logo.jpeg(Gap logo redesign and original)

Since then, there have been countless other logo and rebranding backlashed. Some of the most recent and notable being:

What’s To Come

 

State of the Art – Stage One

Introduction
There is no real denying that we have entered into a new era of technology. And with that comes a massive change to how designers approach logo design. Not only do they need to consider how the logo appears when printed, but also more consideration needs to be taken for how it looks digitally on different screens and at different sizes. And on top of all that, the Internet provides even more room for criticism on logo designs, which can have huge impacts on the designers and the brands. Gone are the days of gaudy rode side shop signs, where the name of the game was to be interesting and unique enough for people to remember them, and now are the days when even a simple small company logo can go viral and be criticized by people around the world due to poor design.

 

Past –before trend

  • Started as far back as people developed writing / had objects they needed to show ownership over.
  • Evolved to house crests,
  • Marking small businesses – way finding of sorts
  • Print
  • Branding larger companies / ad age of Paul rand
  • Move to digital world –super horrible designs
  • Now there are many sites offering contest, build your own logos, rating logo designs, and sharing good ones.

 

Present –How people are currently dealing with/incorporating the trend

  • Better digital designs –web design breaks away from print
  • Stating to design for app icons
  • Starting to have more global range
  • Trying really really hard not to create something that will go viral for the wrong reasons
  • Account for logo animation

 

Future –Speculative with reasons to back up why certain things are going to happen.

  • New technology is going to present the logos in different ways – VR, Holograms, projection mapping…
  • Possibly more break away from print and web design/branding/marketing
  • Brighter bolder colors and more crisp and clear designs on screens –digital logos and start getting more intricate
  • More room for error, and more room for scrutiny over logo designs

 

Background on Profession

  • Graphic design has been around for basically ever in many forms
  • Most recent change in regards to logos is the 1900s with companies going global and better print technology / video to help reach a wider audience
  • The break away into web design –so messy so bad, the tech wasn’t there yet.

 

Why it’s happening ( cause / opportunity )

  • Technology is booming, and companies want to get their name out and all over that stuff as soon as possible –but it still needs to look good too.
  • People are more connected now than ever before and they can easily share content and voice their opinions about that content
  • In the competitive markets branding is hugely important, so there is so much more pressure to do it well.

 

State of the Art (Pre-Writing)

Exercise 1: Five possible professions

  1. Graphic Designer – My degree is in Graphic Design, so this is probably the most general profession that I would be most qualified for after graduation.
  2. Motion Graphic Artist –With my degree I am specializing in motion graphics, because I enjoy the additional design challenged that it presents.
  3. Packaging Designer –One of the areas within graphic design that I always enjoyed was packaging design, because the increased challenge of understanding the consumers, but also designing for sometimes awkwardly shaped 3 dimensional objects.
  4. UX Designer –I’ve always been interested in user experience design because it has an element of phycology to it and understanding how people work. If I were to start working in this specific area, I would want to focus more on the experiential design on new technology.
  5. Illustrator –Another area I would be interested in working in, though I know it’s more difficult to be a successful illustrator and get your work put into magazines and such. The fact that it is mostly a freelance job is also appealing to me.

 

Exercise 2: Five trends/shifts/changes 

Graphic Design

  1. Shift in logo design –The shift in logo designs from typically printed designs to digital ones, and how the Internet means more logos are being seen, and by more people.
  2. Handmade trend –In recent years there’s be a shift towards handcrafted goods and designs, mostly this is evident on sites like Etsy.
  3. Typography/hand Lettering Trend –It seems almost as if the world of graffiti lettering and hand painted lettering have merged and become mainstream over the past decade.
  4. Design Contest Sites –There are more websites now that offer designers a chance to compete and creating designs for clients with no guarantee they will be paid, which is a hotly debated topic.
  5. Modern Design Education (Degree/No Degree) –With increasingly more online sites that offer free or paid classes and tutorials in specific fields, some people argue that paying for a degree in graphic design is no longer necessary.

-Motion Graphics

  1. VR Motion –With the rise of virtual reality comes new possibilities in ways to use the technology, and one way is to illustrate or animate in a 3D VR world.
  2. 3D vs. 2D Graphics Trends –There are more and more programs to create 3D motion graphics, but there also still is a trend towards 2D animations, and now people are even finding ways to create 2D looking motion graphics in 3D programs.
  3. New Animation Tools –There are now many more tools available for motion graphic artists, from simple iPad apps to Adobe’s new Animate, the list of options is huge.
  4. Traditional (cell) Animation vs. Digital –Traditionally animation was done by hand, but now there are more and more ways to get that hand-drawn feel with digital animation.
  5. The New “Art” of gifs –Most people think of gifs as the hilarious replaying clips of videos that go viral, but any artists are now using gifs as a medium and there is growing demand for them.

 

Exercise 3: Two trend/shift/change explained

Graphic Design – Shift in logo design
There is no real denying that we have entered into a new era of technology. And with that comes a massive change to how designers approach logo design. Not only do they need to consider how the logo appears when printed, but also more consideration needs to be taken for how it looks digitally on different screens and at different sizes. And on top of all that, the Internet provides even more room for criticism on logo designs, which can have huge impacts on the designers and the brands. Gone are the days of gaudy rode side shop signs, where the name of the game was to be interesting and unique enough for people to remember them, and now are the days when even a simple small company logo can go viral and be criticized by people around the world due to poor design.

Motion Graphics – VR Motion Graphics
Now the that virtual reality has finally become a relatively affordable piece of tech that is available to everyone, the possibilities of what can be created with it are just starting to come to light. This new technology creates a whole new canvas on which to create videos and games, but it also it can also be a canvas for more traditional types of art. There are already a few companies looking to create tools that will allow artists and illustrators to digitally paint and draw in a virtual world, and production is currently underway for a an entire VR animated movie. The possibilities of creating motion graphics in a 360 world that the audience can possibly even interact with can and most likely will have a big impact on the art world as the technology continues to develop.

Exercise 4:

  1. Description of profession: The roll of graphics designers is to arrange visual elements in a way that conveys a certain message to the audience. It is similar to art, but where but art is typically driven by personal expression and thoughts; the drive behind design is to effectively communicate a purposeful message.
  2. Description: Since technology has become a bigger part of our everyday lives, logo and branding designers have had to quickly adapt to the many new platforms on which their designs are displayed, and since more people are consuming and viewing these logos, the pressure to design the best logo possible is even greater than ever before.
  3. Background: Even just about 30 years ago logo designs were mainly created for print, and without the Internet bad logo designs (typically for small businesses) were typically not critiqued by very many people. However as the world became even more connected, and technology advanced, the need for well-designed logos that worked well when printed and viewed on screen grew. This shift meant that many graphic designers needed to expand their knowledge and skill base to cover the new digital applications, and some designers have even split from print by focusing only on web focused branding design.
  4. Current Status: Logos have been around almost as long as people have made objects that they could put logos (a unique symbol) on to show ownership. However, when people first started using them, it was designed for use in small communities where very few people would be viewing them and even less would care about actual aesthetic. Fast forward to today, and the community of people who view logos has grown to encompass basically the whole world thanks to the Internet, and the number items the logo designers need to fit, as well as the number of design critics has grown with it. Over the years there have been many examples of when the designers were successful with handling this change, and many examples of when they have not handled it well. Unfortunately though, with the more connected world, its often the bad logos that go viral, which adds even more pressure on the designers.
  5. Future: As technology continues to advance, the amount of content that people consume will continue to increase as well. It’s hard to image that there could ever be an audience larger than the world population, but the types of applications for logos in the future can change greatly. VR and holograms are just two examples of new technologies that are quickly growing and can pose a whole new range of challenge for logo designers. As more and more platforms are developed, it is reasonable to think that the graphic design profession will get again be split, as the web split from print. In the future there will likely be branding firms and designers that focus specifically on VR or Hologram visuals.
  6. Call to Action: Going forward, designers who want to stay on top of these trends will have to continue to spend time learned about the new technology that is out there, and take extra time when designing logos and branding to take into consideration all the many applications, and the wide audience that their designs could reach.
  7. Sample of Existing Photographs / Illustrations:
    How many logos have changed over time
  8. Sample of Existing Infographic:
    The history of logo design

  9. Existing Audio and/or Video Elements:
    Show reel of various logo animations

  10. Existing Sites that will be Useful:
    Hisory on Logo Desing
    Information on logo design, with examples
    History of logo design, again with examples

    Logo focused sites:
    http://logofaves.com/
    http://logospire.com/

    Sample of increased criticism
    article about bad logos

    Sample of new logo applications
    Logo gifs

     

     

Elements of the Author’s Craft.

Mode:
Mode often refers to the method of writing that an author chooses to convey their message. The type of message, audience, and media used often dictate which modes are more appropriate for a type of writing. For examples, copy writing for a billboard ad campaign and writing a magazine article require different modes, or types of writing, to convey their message.

Media:
Media is used to describe how the message is being conveyed to the audience. Newspaper articles, podcasts, and photo essays, and animated videos are all very different types of media. Each type of media has its pros and cons, and is better suited to certain types of content.

Audience:
Audience is the demography and characteristics of those who are going to read and view the work. It’s important to know who the audience of the work is, and how much they already know or don’t know about the topic, in order to write in the most compelling way for them.

Purpose:
The purpose of the work is what it aims to accomplish. Some podcasts have a purpose of informing their readers, while ad campaigns have the purpose of getting the audience to take some sort of actions –visit a website or buy a product for example.

Situation for the Writer:
Situation for the writer refers to the different types of situations that writers might find themselves in while writing a piece of work. Their personal writing habits, the technology they use, and the styles or genres can all have an impact on the situations that writers create their work in.

Situation of the Writing:
While the writer has more control over the situations that they write in, there are also external things that can have an influence in writing. These things can be outside demands like deadlines, or audience expectations and they help define the situation of the writing.

5 Keys to a Successful Photo Essay

Tell a Story

Much like any essay, photo essays work best when they have a clear beginning or intro, an engaging middle, and a solid end or conclusion. The introduction should be alluring enough to get the viewer to want to see more while also giving some background. The middle should show more detail and add more contexts to the introduction. Finally, the ending should recap the main point in a meaningful and memorable way. Overall, the photo essay should take the viewer on a sort of journey starting at getting them more interested in the topic, then continuing to keep their interest and displaying the importance of the topic and providing them with more context, and finally ending in a way that will have the most impact and stick with the viewer.


The Gun Nation  photo essay starts out by showing the viewers sticking images that paint a great picture on how guns in the US are somewhat glorified, but then it intermingles images of the glorification with the darker side of guns, and then ends with some more dramatic shots about how guns negatively effect people’s lives.

 

Compelling Portraits

One of the most powerful ways humans connect is through our shared identity as human beings. But just having human subjects for an entire photo essay isn’t enough to make it interesting to other; the portraits have to compelling. Some ways to make them more compelling is to highlight the subject, either candidly or not, in their natural environment, which gives the viewer a lot more interesting details about the subject. Though there are also ways to make compelling portraits without particularly compelling setting or action. For those series, more attention need to be paid to the subjects and highlighting their uniqueness in the most impactful way.

Alice Attie’s Harlem photo essay has a great mix of action and still shots, that all show the subjects in their natural environment, giving the viewer a more intimate glimpse into their lives.

Bonus: compelling and adorable portraits of animals are also great!

 

Action Shots

One of the best things about photography in general, is that it allows people to visually experience things they otherwise wouldn’t physically be able to experience. By using action shots in a photo series, it gives the viewer a much better understanding of what it would feel like to be there. This is why photojournalists almost always use action photos to convey their message and get people to care about the topic. However, taking good action photos is much more difficult than still life or static photos. Sometimes capturing motion blur enchases the message of the photo, but sometimes it can detract from that message, so it’s important to research the best practices for action photography before going out to shoot action photos for a photo essay.

The Predator or Prey: Shark Fishing in Baja, Mexico photo essay is a perfect example of how action photography can be used to transport the viewer into the middle of an experience that they would never be able to experience in any other way.

 

Set the Scene

Setting the scene in a photo essay isn’t just simply showing the whole setting in one shot, but it also involves providing more context to the setting and making the viewer really feel like they are really there. One of the best ways to think about it is like the photos are giving the viewer a sort of virtual tour of the space. To accomplish this, the photo essay should have multiple shots from different angles of the space, as well as various close up shots of specific details. This way the viewer is more fully immersed and has a better understanding of how everything in the space interacts.

The Home Is Where You Park It photo essay does a great job at setting the scene. If you were to just see a bunch of photos of the artwork, without any context, it would be hard to fully appreciate the work. But seeing it in the space, and understanding the scale and materials used enhances the viewers understanding and makes it far more interesting.

 

Well Composed Images

Not all photo essays need to have people as the subject, or need to depict a lot of action to make them more interesting and exciting; sometimes showing a quiet deserted space is the most compelling way to get a message across. However, if that is the case, then all the photos need to be beautifully composed. Without having to work around people or moving objects, it should be much easier to create visually appealing images of inanimate objects. Some of the most important things to pay attention to are balance –is it symmetrical or asymmetrical, space –how the objects fill the frame of the photo, contrast –both with colors and values.

Most of the images in the Magic in the Nearly Forgotten Mailbox photo essay use balance and contrast in a visually compelling way that draws the viewers and sets the right mood.

Elements of Visual Appeal

 

Contrast

“Contrast is often the most important visual attraction on the page ­-it’s what makes a reader look at the page in the first place.” –pg. 3

When there are a lot of elements on a page that are very similar visually, it’s harder for the viewer to pinpoint where their attention should be, and know which elements are more important than others. Over all it makes the page appear to be one big muddled mass that is hard to digest. By intentionally using different styled elements in a strategic way, the page becomes more visually interesting and easier to read, because the contrast breaks the page into smaller chunks.

Good Example: This website uses mostly color contrasts to section out different areas and links, but there is also contrast in the type that makes it more visually appealing as well. EducationWorldScreen Shot 2016-02-21 at 7.11.12 PM
Bad Example: This website had very little contrast. It might be the look that they were going for as a art museum, but everything appears very muted and unimportant on their website. PomonaScreen Shot 2016-02-21 at 7.11.24 PM

 

Repetition

“You can repeat colors, shapes, textures, spatial relationships, line thickness, fronts, sizes, graphic content, etc. This develops the organization and strengthens the unity.” –pg. 3

Repetition is very important because it is what ties a page together and makes it feel cohesive and unified. Much like when a page has no contrast, when there is no repetition the page also becomes more difficult to understand but for the opposite reason. Instead of one big mass, with no repetition it is broken up into too many different pieces and becomes a cluttered mess. There are many different ways to create repletion, such as with color, fonts, shapes, etc. but you don’t need to use all of them to create effective repetition.

Example 1: This site has a strong design because the colors and shapes are being repeated throughout and tying it all together. SproutSocialScreen Shot 2016-02-21 at 7.11.42 PM
Example 2: Some of the colors are repeated on this webite, but the shpaes and type and images are overall so different that nothing feels like it fits togetetr well. The Teachers Guide Screen Shot 2016-02-21 at 7.11.49 PM

 

Alignment

“Every Element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.” –pg. 3

When it comes to placing the elements on the page, attention needs to be paid to how the elements line up with one another. When the visual elements line up well, it guides the viewer effortlessly around. When there is no attention paid to how the elements line up however, the page becomes almost like a maze and it can make the viewer feel confused about where their attention should go next. Using a clear grid when designing the layout is the most effective way to keep everything well aligned.

Example 1: Websites like notcot.com make great use of the grid to show many different posts on one page. notcot Screen Shot 2016-02-21 at 7.11.58 PM
Example 2: There doesn’t seem to be any consideration for alignment applied to this website. SuzanneCollinsBooks  Screen Shot 2016-02-21 at 7.12.06 PM

 

Proximity

“When several items are in close proximity to each other, they become one visual unit rather than several separate units.” –pg. 3

After making sure that the grid is set up and the elements line up with it, it’s important to then set the proximity of the elements to one another so help build and even more solid structure for the page. Elements that should be viewed together, such as list items, should be places closer together to emphasize that they belong together. While there should also been a good amount of special separation between elements and section that are different from one another.

Example 1: This website clearly separates out each section of text in an easy to read and visually appealing way. BenLind Screen Shot 2016-02-21 at 7.12.20 PM
Example 2: It’s hard to understand what is going on with this website when most of the texts and links seem crammed to one side while there is so much more under utilized space. Art.YaleScreen Shot 2016-02-21 at 7.12.27 PM

Image Content: Clear subject

“In a simple photo, its subject is clear. Don’t leave your reader wondering.” –pg. 136

When people view images online, they only want to see the details that they need to in order to understand what the image is about. Busy photos take longer to take in and understand and that can cause the viewers to feel a bit frustrated with it. When shooting or choosing images to use online, there needs to be more attention paid to the details, and making sure that none of them are unnecessary or overly distracting to the actual subject. When using photos of people, it’s also good to use action photos because they create more visual interest.

Example 1: These photos are al stills from movies, but all show people in action, which makes the photos more compelling. AGoodMovieToWatch Screen Shot 2016-02-21 at 7.12.45 PM
Example 2: It’s hard to tell in the photos exactly what you are looking at, and in some the subject seems blocked by plants block the subject and the contrast makes it seems messier of a scene than it probably is. MakeWayForPeople Screen Shot 2016-02-21 at 7.12.52 PM

Image Content: A well-composed photo 

“To qualify as a good photo –one that will be a compelling addition to your document –the photo also needs to be well composed.” –pg. 138

In addition to making sure the subject of a photo is clear and simple to see, it’s also important to make sure that the image has a good and compelling composition. There are a few simple ways to enhance a photo, by simply adjusting the composition a bit. It’s a good rule of thumb to have the subject places in a way that creates an asymmetrical balance, and that they fill the frame tightly. It’s also good to make sure the lighting provides a good range of lights and darks, and that any elements in the photos that create lines for the viewers eyes to follow don’t take them straight out of the photo.

Example 1: This website makes great use of well composed photos to create an emotion connection with the viewer. HelmanAfgn Screen Shot 2016-02-21 at 7.13.01 PM
Example 2: A lot of the photos on this site are busy just have too much going in in them. ThisLittleClassOfMine Screen Shot 2016-02-21 at 7.13.15 PM

 

Web Graphics

“Resolution is extremely important when it comes to digital images. If an images doesn’t have high enough resolution –usually expressed in dots per inch (dpi) or more accurately pixels per inch (ppi) –the image will appear pixelated and fuzzy in the final output.” –pg. 138

A web graphic’s resolution and file format are important and somewhat complex things. There are a lot of different file formats, which all do somewhat different things, but JPGs, GIFs, and PNGs are the main ones to use for web graphics. And while images that will be used on the web don’t need to be as high a resolution as images for print (only 72dpi, compare to 300pdi for print), issues can arise with the image quality when they become resized. Making a smaller image even just a bit larger can cause it to appear blurry and more pixelated.

Example 1: When thinking about amazing high quality photos, national geographic is the first thing that comes to mind. They are possibly most well known for the quality of photo they use in print and online. NationalGeographic  Screen Shot 2016-02-21 at 7.14.07 PM
Example 2: This is a decent website but most of the photos used seem blurry and lo quality. ThisWorldRocks Screen Shot 2016-02-21 at 7.14.15 PM

 

Choosing more than one photo 

“Once you’ve eliminate any poor quality images from consideration, your next step is to look at your potential images with an eye towards contrast …in the image content.” –pg. 143

When using more than one image, it’s good to think about the story that the images tell together. One image should serve as a sort if introduction, which has a more broad subject that sets the scene and gives the viewer a better overall understanding of the content. The other images should take the viewer deeper into the story and give more detailed information, with more focused subject matter. For example using a wide shot, and then a couple close up shots together is a good way to present the images together without repeating content in an unnecessary way.

Example 1 Good: This crafting tutorials are the perfect example of how tho tell the story through images. It starts with a general shot, then a series of detailed images, and ends with another shot of the completed project. ApartmentTherapy Screen Shot 2016-02-21 at 7.14.27 PM
Example 2: While the images are all lovely, and they seem to fit the same general style, it’s not comeletly clear how they are linked. Some shots are close up, but those are not of details from the other general photos. BloodAndChampagne Screen Shot 2016-02-21 at 7.14.54 PM

 

Illustrations

“Illustrations are often the best choice, if not the only choice, for a design project.” –pg. 150

Using photography on web pages is great when the subject matter requires that level of realism –like journalistic street photography for news articles. But for some topics, photography might be too limited to accurately depict what the content is about. This is especially true with topics like fantasy where the subject is something that simply does not exist, or when the subject is something non-tangible, like psychology concepts. Illustrations can be created in many different styles and the different styles can communicate different feelings to the viewer, which can enhance a web pages overall message.

Example 1: Many news sites use illustration for articles that are hard to use photographs for. Popular science often post articles on topics for which photographs would be impossible. PopSci Screen Shot 2016-02-21 at 7.15.01 PM
Example 2: There are a lot of cute illustrations used on this page, but maybe a bit too many. CarbonMade Screen Shot 2016-02-21 at 7.15.07 PM

 

Clip Art 

“If you really want to use clip art, visit a digital stock site to purchase something appropriate.” –pg. 152

For the most part clip art is something that should be avoided at all costs. The clip art that comes preinstalled with many programs is always poorly designed and any viewer who sees it being used will know there wasn’t more care put into the design of the page and take it’s content less seriously. There are some websites that sell illustrations that are typically better designed and are a good alternative to clip art if some simple clip art style illustration is still needed.

Example 1: This website doesn’t use illustrations that are straight from the old clip art galleries, instead it uses custom illustrations that are more completing and stylish than any clip art could be. AdobeKnowHow Screen Shot 2016-02-21 at 7.15.17 PM
Example 2: The images on this site might not all be exactly clip art, but the quality is still low and there is no cohesive style, so it’s basically just as bad. FunBrain Screen Shot 2016-02-21 at 7.15.25 PM

 

Video and multimedia components

“Video and animation make excellent focal points because they include the eye-catching element of motion.” –pg. 153

Using video or animation on a webpage can add a lot of dimension to the page, but it also requires more planning to make sure that it works well with all the other content on the page. For one thing, it needs to have the same style as the other elements so it doesn’t seem like an out of place after thought. It’s also then important to make sure the video or animation itself is well designed and transitions smoothly so it doesn’t become too distracting for the viewer.

Example 1: The animation on this website is so smooth that you don’t totally realize that you are watching an animation when it first loads. Ot24 Screen Shot 2016-02-21 at 7.15.31 PM
Example 2: This site uses a video in the main content, but it takes forever to load, then had a an ad, and then starts with some graphics that don’t totally relate to the content before getting to the real topic. AOL  Screen Shot 2016-02-21 at 7.15.45 PM

 

Type as image 

“As design elements, letterforms are fantastic. Set alone, or as individual words, letterforms can have the same compositional impact as photos.” –pg. 154

Typography has a lot of possibilities when it comes to enhancing a design beyond simply picking a font to set chunks of text in. Text can also be used as a visual element in ways that are similar to photos or illustrations to draw the viewer’s attention and highlight certain points. One way to use more visually interesting type is to deign a headline to stand out even more from the rest of the text. Another way is to use well-designed pull quotes set apart from the main text.

Example 1: The color of this site is a bit bright, but the typography is what takes center stage and works well as images. IAmAlwaysHungry Screen Shot 2016-02-21 at 7.15.51 PM
Example 2: The typography on this page is a bit all over the place. The logo and headlines are supposed to be fun, but the design is so poor that it doesn’t read well. AtoZTeacherStuff Screen Shot 2016-02-21 at 7.16.00 PM