Blog 3 – Part 1: Online Identities and Part 2: Design Portfolio Websites Research

Part 1:
One example of a strong conceptual online portfolio is Robby Leonardi’s interactive resume.
Check it out here:

Robby Leonardi’s interactive resume is strong because he has a great concept driving it by presenting his resume as an interactive game for viewers. Right away, Leonardi states to viewers that they only need to know how to scroll or press the up and down arrow on their keyboard to navigate his website. I believe that this is very unique, and speaks greatly of his ability to design, illustrate, code, and animate. However, I noticed that there isn’t an obvious navigation bar so it isn’t possible to jump from the work experience section to his awards section.

An example of a strong online portfolio that has clear messaging is the portfolio of designer, Marc Thomas.
Click here to view:

Designer Marc Thomas Portfolio

Marc Thomas’ portfolio has clear messaging that makes it easy for viewers to learn about him and what he can do for them. After his little elevator pitch on what he does, he provides a button for viewers to click to check out his work.

An example of a strong online portfolio with a good concept is Paul Currah’s website. View it here:

Paul Currah’s website is clean and easy to navigate. It also has the look and feel of a creative space with the “taped papers” and “stickies”. I also appreciate how his work is organized in a sort of gallery view since they’re thumbnail images that one views by scrolling down the page.

Part 2:

2 different styles of “Portfolio/Work” sections:

Joe Nyaggah has a good example of this section because it shows the different projects with the client name and description of the client in a gallery style view. Also, if you click on a project, it will go more in-depth about the project.

nyaggah design studio also has a good example of this section because it shows thumbnails of their projects. Also, when you mouse over a project, another little preview window appears next to it with a picture of the whole project.

2 different styles of “About Me” (or the like) sections/pages:

Kirk Wallace has a good example of this section because he includes a picture as well as an informative biography of himself. He also provides a means of contact afterwards.


Dan Mall also has a good example of this section because he also provides a history of his career that also has graphics to engage the viewer. He also has a biography at the top, and a more in-depth biography underneath.

2 different styles of “Resume” (or the like) sections/pages:

Naiara Abaroa has a good example of a Resume section because she provides it across different social media. She also designs that section of the site in an engaging way with her color choice of yellow.

Whitney Miracle has a good example because she actually includes her resume on the page itself. It is also easy to read and goes well with the theme of her portfolio site.

2 different styles of “Contact Info” (or the like) sections/pages:

Chris Da Sie has a good example of this section because he includes a short blurb about contacting him. He also includes a contact form and various social media that he can be contacted through.

Sarah Enid also has a good example because she also has a form on her one-page website. She also has a note in this section that she is accepting freelance work which is helpful for potential clients to know.


Blog 3: Kinetic Type

Understand Music by finally. on Vimeo

Understand Music by finally. on Vimeo

This is an example of expressive type. The idea behind this video, Understand Music is about the creator’s exploration into understanding the many different aspects of music. I believe that the mood of being inquisitive is expressed throughout this video. In this screenshot specifically it is shown in the way that the words, “with” and “music” are moving along with the pages of this book. The motion of the music notes give me a light, and airy kind of vibe. In this example, the type are conveying a literal message of stating about music, but are interacting with the book and music notes to help convey the creator’s exploration of music. Source:

The Alphabet by n9ve on Vimeo.

The Alphabet by n9ve on Vimeo.

The video, The Alphabet by n9ve on Vimeo features the ABCs along with different fonts for each letter. This is an example of characters of type being animated without adding in different kinds of imagery. The letters are being animated in an interesting way.In this video, the type is animated with characteristics to help convey the message of different fonts for each of the letters of the alphabet. I believe that the type in this video is conveying the message literally as well. The “S” in the screenshot is being filled in with the black color when you watch the video, and there are different animations of how each letter transitions on the screen with the font throughout the video.


"Weird Al" Yankovic - Word Crimes screenshot.

“Weird Al” Yankovic – Word Crimes screenshot.

In this example Word Crimes by “Wierd Al” Yankovic, type is in motion with footage of a dictionary in a red background. The video’s literal message of word crimes is being conveyed because the footage of the dictionary is relevant to Weird Al’s lyric, “Gonna familiarize you with the nomenclature”.

Blog 2: Responsive & Mobile Design

The importance of having good responsive design is because nowadays, people are starting to use their mobile device to surf the web instead of the traditional set up of staying at home to browse the internet on your desktop computer. According to The Huffington Post, “having a website be responsive yields a better user experience, is more manageable, and allows businesses and others to stay ahead of the competition”. Therefore, it is best for a designer to design websites with the mobile users in mind. Source:

There are also statistics about the rise in mobile web usage:

  • More than 20 percent of Google searches are now being performed on some sort of mobile device.
  • In 2012 over half of all local searches were done on a mobile device.
  • 25 percent of Internet users only access the internet via a mobile device in the United States.
  • 25.85 percent of all emails are opened on mobile phones, with another 10.16 percent being opened on tablets.
  • In 2014 mobile Internet usage is expected to overtake desktop usage.
  • Out of the 4 billion mobile phones in the world, 1.08 billion are smartphones and 3.05 are SMS enabled.

—Smart Insights,

A designer must lead, encourage, and keep the attention of the users when designing for the responsive/mobile Web. A designer can lead a user by including signs or indication to help users know where they are, and how to navigate the website or apps without feeling lost.
It helps to encourage a user by adding a reward system that allows a users to obtain what they want, and so they can gloat and show the website or app to their friends and family.

A designer can keep the attention and retain users by providing a form of entertainment or by adding the element of surprise or comedy depending on the users, what they find enjoyable, and the nature of the website or app (if it is more of a serious company, you probably don’t want to add games).

Responsive website example:

Sparkbox's website as viewed on desktop/laptop, tablet, and smart phone.

Sparkbox’s website as viewed on desktop/laptop, tablet, and smart phone. Credit: Responsive Design Examples by designmodo

Link to Sparkbox’s website:

Mobile website example:

Screenshot of Texas Roadhouse's desktop website.

Screenshot of Texas Roadhouse’s desktop website.

Screenshot of Texas Roadhouse's desktop website.

Screenshot of Texas Roadhouse’s mobile website.

Source: and

Blog 2: Typographic Hierarchy, Emphasis, & Punctuation

Typographic hierarchy is achieved by:

  • Having a part of the typography be the focus of attention so that the viewer will be eager to take a look.
  • Emphasizing the most valuable information by making it easy to see.
  • Think about using subheads, drop caps, and paragraph lead-ins to help keep apart and make more known different parts of the text.
  • Also think about using design elements such as pull quotes, sidebars, bulleted lists, and tint boxes to make large amounts of text easier to read by making them separate.
  • Take care when using text alignment and column width.
  • Set the margins, gutters, and other spatial elements with purpose, and negative space gives a significant impression.
  • Support the typographic hierarchy with color.
  • Lastly, always be consistent.
Screenshot from Inspired: Frank Lloyd Wright on Vimeo

Screenshot from Inspired: Frank Lloyd Wright on Vimeo

This example mostly achieves typographic hierarchy because a drop cap is used to lead the viewer in, however the text using the regular weight is hard to read over the background of the flowers. The bold weight appears to be twice the weight of the regular weight used so that’s a good thing.

Brian Regan - Kinetic Typography on Vimeo

Brian Regan – Kinetic Typography on Vimeo

Here is an example of good typographic hierarchy because the text is separated into columns with appropriate column widths. Also, the text is organized well so the viewer is able to read what is being shown on screen well as the quote is showing. I would say they achieved typographic hierarchy.

Conan O'Brien Kinetic Typography on Vimeo

Conan O’Brien Kinetic Typography on Vimeo

The technique for emphasis, Italics or Obliquesis is depicted well in this video. Conan O’Brien was emphasizing how amazing his staff and crew at NBC are during his farewell address.

A Very Vimeo Valentine on Vimeo

A Very Vimeo Valentine on Vimeo

In this video, the type size technique for emphasis is used. The words are grouped in varying point sizes for dramatic effect, and I believe that the use of the type size technique achieved emphasis.

Blog 1: Typeface Classifications in MOGR


The typeface used in this video is the sans-serif, Arial. I would say that the typeface was successfully used because of how simple Arial is. I believe that the typeface worked well alongside the animations in the video, and that it wasn’t too distracting or overpowering the animations for each of the ways to stay creative listed in the video. So basically, I think that the typeface represents the subject well because of its simplicity and how it works well with the animations. I would say that the use of the typeface is readable, except when the video starts at 01:35, but then again, I’d say that the animation is intended to cover up the type at first. I believe that the use of Arial in this video is clean and smooth enough that people who are looking for tips to stay creative would appreciate it. One improvement could be at 00:36. It’s small, but I think that maybe the ‘BE’ could be nudged a little to the right. Also, at 00:39, I think that the animation could flow a little higher so it isn’t running into the type at the bottom left.


Futura is the typeface used in this video. It is also a sans-serif. I think that the typeface was successfully used in this title sequence, and I appreciated the kerning between certain letters such as the L running into the A so they appear connected. I think that Futura represented the subject well. The maker of the video sought out to make a title sequence based on their life, and I would say that it turned out well. I believe that the typeface appeals to the audience (the maker’s school). I think the way the type is used is fine as is, and doesn’t need to change for improvement. I like the contrast between the heavier use of Futura with the lighter weight in the names during the video.

Title: Civic Builders Gala Video 2011

I’m guessing that the font used in this video is the sans-serif, PT Sans. I think that the typeface was successfully used in the video, however I think that at times when the type is made smaller that it becomes hard to read. I believe that PT Sans represents the subject well. However, I think that at times when the type is on certain colored backgrounds that it becomes a bit hard to read. One example is at 01:50 where the white type is on a bright yellow background. On that note, one suggestion I want to make for improvement would be to maybe make the bright background colors not so bright so that it’s not so overpowering with the white type.

Blog 1: Web Typography


Summarize the pros and cons of using the “web fonts” @font-face property. Link to/show examples of @font-face “Web fonts” in use on websites.



Using “web fonts” allows you to access to more fonts than just the known list of web-safe fonts. Also someone using the same web fonts for their online work would not have to worry about inconsistency because they would have the same web fonts for everything. It would be much easier for someone to edit their text later on if they were using web fonts compared to if they were using graphics. Live text or text hand-written in code loads faster on computers than if someone were to use cool looking graphics that had text overlaid on top of them.


(fig. 11-6, Type Rules)

One last pro is that live text will appear when it is being searched in a search engine compared to text as graphics which do not yield any results if being searched.



There are, however, cons to using web fonts. Some examples of cons are: the look of the font or how it will end up appearing onscreen depends on the font itself, which browser someone is using, and the version of the font you are using. Also, the web fonts can look different depending if someone is using a Mac or a PC. Another con is that the font may not be a good choice in different instances when you are web designing. Lastly, text performance is not as dependable as display or headline type.

Resources and examples of websites using “web fonts”: