Portfolio Websites

There are many different approaches that a designer can take when creating their own portfolio website. In general, a portfolio site should be clean and simple to showcase the work, but it should also reflect the designer’s personality and style. The site should be memorable and different in order to make people keep coming back. There are different sections that are necessary to include in a portfolio site: a work section, an about section, a resume, and contact information. I decided to look at multiple examples of each of these sections to see just how many possibilities are out there, and how different they each can be while still being successful and effective.

A work section on a portfolio site is key to display your skills in context of projects you have completed.

I’m going to start off with a site that I found and love—the Box Clever site! Their portfolio is organized by category and there is a small icon to indicate each one. When you’re on one of the category pages, there are blocks of color with images of projects and as you hover over each on, the block flips to give more information. It looks like a box! Clever! Do you get it?…then when you click, it takes you to the project page with all the information, and it’s color coordinated with the original block of color on the category page. It’s all very cohesive and nicely presented.

Another website with a strong portfolio page is Pod1. You can view their work as a whole or search by category. When you click on the link for each category, instead of taking you to a new page the projects just rearrange to display what fits. The images are simple and when you hover, it displays the company the project was for. I also just need to point out that this website’s favicon scrolls…how cool!

It is also important to include an about section to describe who you are and what you do.

Activate Media uses icon images to illustrate their about page and the history of the company. This allows the viewers to not only read about them, but visualize it as well and connect better.

Spry has video playing in the background of their page, which is so unique and eye catching that I think this site as a whole is very successful and effective. I really like them for their about page, because at the top they use their logo as their first description, and off of each point of the logo is an adjective that describes the company. Then as you scroll down, they spell things out and introduce the staff, including Mr. Cooper the dog in charge of quality control…

Your resume should be included on your portfolio site in order for potential employers to gather all the information they need about you digitally.

Now let’s just take a moment and talk about Robby Leonardi’s Interactive Resume website. You won’t get any information quickly, but that’s the point. When you start that interaction, you’re in it for the journey and you just happen to gather information about him along the way. He definitely created an memorable experience to ensure that you pay attention.

This whole site by Pascal van Germert is a resume. As you scroll down, you gather information about him, his experience, his skills, and his projects. Everything is clean and straightforward which makes it easy to understand.

Contact is the ultimate goal of a portfolio site, so having this information easily accessible is vital.

Tilted Square has a contact page labeled “Get in Touch,” which seems like such a more personal and inviting title. They not only have their contact information and a contact form clearly displayed here, but they also have a specific option for people to submit potential projects, called the “Project Planner.” This is an easy way for potential clients to contact them about what they need without going back and forth with emails or playing phone tag.

Atto Partners also has that friendly approach with a “Talk to us” link. Here they provide direct contact information, a project submission form, and maps to their different studios.

All these components are necessary for an effective portfolio website. When designed cohesively in a style that fits you, it becomes successful.

Online Identities

As a designer, branding and promoting yourself is just as important as promoting the work you create. There’s cutthroat competition out there, and you have to make yourself stand out from the crowd at first glance. You have to be able to clearly and quickly communicate what you do and catch people’s attention to make them want to know more. You’re basically selling yourself…in a professional manner. Designers create identities for themselves that represent their personal style and their work. These identities are translated into marketing tools, such as portfolio websites, in order to form a cohesive and memorable brand.

As a student, I’m currently in the process of discovering my own brand personality. It’s hard because I want to be as versatile as possible, but I need to showcase my strengths and focus in on what type of personality I want to portray. Many of my projects thus far are very colorful, friendly, and fun. I think that I want to create a portfolio website that is clean and simplistic to offset this and make the work stand out. When doing research, I came across a few examples of strong personal brands along the lines of what I envision for myself that I can pull inspiration from.

pf-17

Jessica Hische has a very simple and clean portfolio website that showcases her work. She picked neutral tones and added a pop of color with the orange that makes little things stand out. I like that her logo is playing off of a bookmark because when you bookmark a spot, you want to remember it. The female silhouette inside is a nice personal touch that makes it memorable. It’s simple, yet it’s really clever.

pf-31

Adams Creation is a small company specializing in “advertising design and media services,” which they make very clear at the top of their website. I enjoy the name-play of Adams Creation, like the Creation of Adam, whether that was intentional or not. As you scroll through the page, the navigation bar stays fixed at the top and the logo turns into a simple ” a’ ” icon. Again, I love the simplicity of that branding and that they always make sure you know who’s work you’re looking at.

simple_portfolio

And then there’s always the option of being very image based and letting the work speak for itself initially like on the Peachey Photography website. The photographs on this portfolio are what capture your attention. Then as you hover over them you notice they are links and you can click for more information or for galleries. I also like how this logo almost becomes a stamp, which can be really strong for branding because it could be on anything from packaging to business cards to the watermark on the photos. It’s clean, simple and versatile.

I’m not exactly sure yet what direction my personal branding will go in, but I know right now that I want it to be simple. I will probably experiment with a few different ideas before settling with the one I like best, as a designer should do. I think the hardest part for me will be sticking to the simplicity that I want and coming up with a successful logo and brand that can hopefully be timeless. Minimalism is sometimes more difficult, but when you find the right solution, it really works.

Responsive and Mobile Web Design: The Basic Do’s and Don’ts

Responsive web design is when a website is created with the ability to adapt and translate to multiple different sizes and viewing devices. With so many different web browsing technologies and devices available, responsive design is becoming necessary in order to provide an optimal experience for each of the users. Even Stevenson University recently redesigned their website to provide a responsive layout. Some websites, such as Facebook, have a separate URLs for their desktop sites and their mobile sites (usually with an “m” in front). A responsive website would avoid this problem, because a single URL would adapt to each individual device. A successful responsive website is accessible and understandable no matter what device it is being viewed from, whether it’s from desktops all the way down to mobile phones, and who knows where the future will take it.

With it being so versatile in it’s usage, there are many factors to take into consideration when designing for the responsive and mobile web. It’s not just about making the content conform to a smaller view-port. You have to maintain a strong user experience across multiple different browser types, and still make it cohesive as a whole. In order to do this, as found on resources such as Alchemy Interactive and Le Site, there are do’s and don’ts of responsive web design:

DO consider the user when designing. You have to pay attention to all the possible devices they could be using and know what their purpose is in visiting your site.

DO design for each specific device, since they are all unique form each other and have different features and capabilities. Like Alchemy Interactive says, “one size does not fit all.” In this example, you can see how the website All For Color is displayed differently on the mobile phone than on the desktop monitor. The designs are different because the unique characteristics of each device and screen was taken into account.all-for-color

DO change how you present the information on each device to make it clear and understandable.

DO use a fluid grid structure when designing so you can easily adapt for each view-port.

DO pay attention to what is visible “above the fold” on each device. Make sure it gets enough information across.

DO limit the number of pages, images, custom text, and anything else that will slow the page loading time when adapting the design for smaller devices such as mobile phones and tablets. Ask yourself what is necessary so you don’t clutter the page with anything that’s not.

The key word here is ADAPT. Designs have to be flexible in order to reach as many users as possible on all the different devices they may be utilizing.

Now that you know some things to consider, here are some things to avoid.

DON’T use the same strategies you apply to non-responsive design. This is a different concept and not everything should be fixed in one place.

DON’T punish users for the device they are using by not keeping them in mind when designing. Consider as many possibilities as you can think of, because it is guaranteed that someone is using it.

DON’T hide or hold back content from mobile users. You can alter it if necessary, but make sure everything is still accessible.

DON’T have a big file size that makes the page take too long to load. Most people will abandon a mobile webpage after 5 second if it doesn’t load.

These are a couple major things to consider when designing responsively for the web, but of course there are more details that are sure to come about as your page develops. As designers, it is important that we provide as solid of a user experience for mobile web users as we do for desktop or laptop web users. Some good resources to look at that provide important aspects of good mobile experiences are Mobile Web Best Practices and Visual.ly. Examples of important factors in mobile design include clarity, keeping forms short, limiting images and keeping them small, and being aware of font choices. Overall, things should be kept simple and straightforward. Everything from gestures to navigation to content should be made obvious for ease of use.

Design matters and when you keep the user in mind and deliver a pleasing, adaptable website that sends the same message across all browsers, it should make people return—on any device.

Not all type is created equal!

Any font will look great on the web, right? WRONG! Not every font you use in print translates well onto the web. Typography on the web can be unpredictable and tricky. It’s sometimes considered more difficult to work with fonts for websites because the rendering cannot be tweaked exactly to perfection 100% of the time (which can be a big annoyance to my fellow perfectionists who like things to be just so.)

Web typography takes a little more effort and time to get things exactly as we imagine they should be, and even then our desired outcome is not always guaranteed. There are many factors and variables that go into web typography that make it differ from print typography. Things such as stroke thickness, line length, and even what browser the reader is using have to be taken into account for typography on the web. When all of these variables are realized and mastered, then a great website can be made!

The first thing to realize when working on the web is that browsers, monitors, and computer operating systems can render fonts differently, even when the coding is all the same. You can see in this example below how the same text can change slightly depending on what browser the viewer is using.

https://i1.wp.com/assets-www-dtelepathy-com.s3.amazonaws.com/wp-content/uploads/2014/06/Cross-Browser-Fonts-Rendering.png

This is what is so unpredictable about web typography, but it is something we just have to accept and live with. Because of this, it’s best to test your websites on as many different browsers and monitors as possible to make sure that nothing weird is happening anywhere with your typography.

Web safe fonts are structured differently than fonts to be used in print. To avoid eye strain, it is important for web fonts to have thicker strokes, large x-height, and bigger bowls and counters. The letter shapes should be distinct, making the difference between characters obvious and easy to read. The line length should be limited and text should typically be flushed left to keep things readable and to avoid the unthinkables, like rivers. You can learn more about the structure of web fonts and how they differ from other type in this article. Basically, everything that goes into making web fonts distinct and different from fonts used for print focus on readability and ease of use for the viewer.   

So now you’ve learned a little bit about web typography and what makes it different than print. The goal of web typography is functionality and legibility to make it easy for the user. Luckily, there are certain typefaces that were created specifically for us to use on the web and are considered “web safe fonts.” They are structured especially for the web for ease of use and high readability. 

To learn more information on enhancing your web typography skills, visit this helpful tutorial.

Local Business Battle: Weak vs. Strong Websites

So we’ve talked about typography on the web, but what else goes into making a website strong? The navigation, the content, and the layout are all major components that go into the overall aesthetic of a website and help differentiate between strong and weak pages.  

Let’s start by evaluating a poor website. Bear Rock Junction is a local business from where I live, and overall their website could use some help. http://bearrockjunction.com/

The navigation is located at the top of the page and, aside from being a little lack-luster in design, the titles of it are pretty straightforward and descriptive. However, there are two sets of navigation that become a little confusing. There are white links on the blue background which almost overshadow the main black-on-white tabs above. Also, the home button could be discarded if the logo was made into a link for home navigation instead.

The layout and the content of the page could use some improvements as well. The hierarchy of the pages need a little more work and clarity to distinguish between important information. There is contact information located at the top of each page that could probably be moved to a better spot, such as to the footer or a contact page because it is distracting from the navigation, banner, and logo.

The content gets the point across, but pictures are scattered and information is all over the place. The pages would benefit from better organization and location of information.  Also, I’m not quite sure what’s going on with the home page, but when you scroll over the content, it becomes active like a link. Some content should be combined in a better way to reduce the amount of pages and overall confusion of the layout.  

The whole aesthetic of the website feels very basic and beginner without much nod towards design, other than some vibrant (nearly blinding) colors thrown in there. Some smarter font choices should be made and the whole site needs to be designed in a more pleasing way to keep it from being overwhelming.

On the opposite side of the spectrum, we will look at another local Lehigh Valley business, Paisley Peacock, as an example of a strong website. http://paisleypeacockfloral.com/

When you first arrive at the homepage, it immediately has a more professional feel to it and you know what it’s all about. There is not a lot of content on the home page as the images tell the story. We are greeted with a scrolling banner and pictures that are used as links, thus showcasing the flowers and the work that they do.

Simple navigation is located at the top of the page with drop-down menus that specify further categories. The menus are hidden when you are not scrolled over them so that they don’t take away from the rest of the content on the page. The logo acts as a link to the homepage, and additional navigation is located on sidebars of the other pages. Also, there is a small link at the bottom of each page that directs you right back up to the top, preventing endless scrolling.

With a clear sense of hierarchy and the content in an appropriate font, the whole site has a consistent feel. It’s clean and simple with the colors of the flowers standing out, keeping it from being overwhelming like the other website.

Many more factors go into making a good website, but without a strong layout, content, and navigation, the pages are hard to get through.

Will it pass the typography test?

How do you evaluate a website for good typography? Is it simply the colors? The font? The size? There’s a lot more that goes into type design for the web. Let’s look at a few components that make up a typographically dynamic webpage using relayforlife.org.

Let’s start with the font-family. This page consistently uses a sans-serif typeface at various sizes and in different colors to differentiate between content while still creating a cohesive look. This use of size and color are what establish the hierarchy of the page, with the headings either purple or blue and in a larger point size than the gray text of the paragraph content.

The text is left justified, which is common and easiest to read, and the line spacing varies based on the font size to make sure everything is legible and doesn’t run together. The page uses appropriate font sizes throughout with nothing too large or too small. Everything, including the footer, is legible.

An appropriate amount of whitespace is used between information so that the content does not run together and sections are separated. There are also purple borders on the left and right of the page, centering the information on the screen and balancing the page so you aren’t overwhelmed with content displaying across the entire browser window.

The contrast is where this webpage can lose a few points, depending on who is reading it. There is enough contrast for me to be able to read it. However, I don’t know how easy the gray on white or the gray on gray content would be to read if someone is more visually impaired. It might be okay, it might not…I can’t be positive.

All of these elements-font-family, font-size, color, hierarchy, line-spacing, alignment, contrast, whitespace, etc.-make up the websites overall readability, or how easily the content can be read and understood. Overall, the Relay webpage is easy to read and grasp. The first thing on the home page that catches your eye is the scrolling banner of images with the slightly transparent text box anchored to it. All of the text on the page is legible and separated into its own logical section.

So what grade does this page earn on the typography test? I’d say it deserves a solid A…easily read and understood.

Relay For Life Home Page

Future Web Designer in the making?

Even though I’m still just beginning to learn about web design, at this point I’m thinking it might be the career path that I want to take. I love the production aspect of handwriting HTML and CSS to make a web page from scratch look exactly how I want it, right down to the last horizontal rule. I want to be able to make simple personal pages for me and for friends and family and then eventually work with a design group in a firm. There’s a design company close to where I live that revamped the website for the company my dad works for and I would love to talk to them about everything I should expect from that type of job.

As a visual learner and overall design driven person, I think that web design could definitely be the direction I go in. I’m very organized and detail oriented, which is beneficial in this field. There are some aspects that I still need to work on, like learning JavaScript and handling multiple tasks and responsibilities for a project, but I still have tons of learning to do. With the rapid development of technology, the learning will probably never end!

As far as equipment goes, I have enough to get by for now. I have TextWrangler and Adobe Illustrator and Photoshop on my personal Macbook along with some extra external memory…probably enough to be considered a “beginner.” Ideally in the future I would love to have The Adobe CS-whatever Master Collection on my own huge Mac computer with a scanner and extra computer available for testing, buuut I think that’s a bit over my price range right now.

Hopefully this class can help me make up my mind as to what I want to do with my life. I should probably figure that out sometime soon…growing up is hard.