I found this awesome portfolio site for Jessica Hische, a designer, typographer, and illustrator from San Francisco. Each page of her site is responsive and very well organized. With her portfolio images, she just has an image on each page, rather than a Lightbox effect or anything. I like how it looks on her page but I think without thumbnails of images it isn’t as convenient to navigate. She does, however, have titles of each project/image listed on the side that you can navigate through and select. The image below shows one of her portfolio pieces and the right navigation for the rest of them.

I really like her site and the responsive elements in it. It reflects her clean and fresh design style, and the code is pretty entertaining to look at too… Here’s a line from her html source file:

This article from Smashing Magazine critiques a few artist portfolio sites and compares the usability to the visual appeal of each one to see which sites are easier to navigate, look better, or have the whole package.

It’s extremely important for a designer’s portfolio site to reflect their work and talent. But what is even more important is the usability of the site for those who are viewing it. It doesn’t matter how beautiful the site is if the viewer cannot figure out how to get to the pages they need to see. But only the most successful portfolio sites can blend form and function together in a complete and brilliant website design.

I hope to take these criticisms and put them to use in my own portfolio site. I want to accommodate my site as much as I can to any user on any screen format and resolution so that anyone can view my site from wherever they are. I think it’s important to make it as easy as possible for people to see your work so that more people can see it and you can grow as a designer.

Here is a great article from Ethan Marcotte, a leading responsive web designer. He talks about the importance of responsive web design and some of the techniques designers can use to achieve a responsive page design. I hope to use responsive design in my portfolio site so that no matter what screen size it is viewed on, it will still be a fluid, professional-looking, and easy to use site. I am going to focus more on a responsive layout rather than changes in image size. I am going to try a side column navigation for larger desktop sizes and maybe a top navigation centered below the header for a mobile layout. I know responsive design is going to help my site to stand out and look professional and I’m excited to see all the possibilities involved!

The Collider exhibition currently in the Folk Hall gallery is a collaboration of interactive shows. Today we used the font generating exhibit to create our own font as a class. This application uses the Xbox Kinect to record your movements as you draw a letterform with your hands. It was actually a lot harder than we thought it would be. First of all, I think the combination of the low lighting and multiple people being in the room kind of threw off the Kinect’s sensors but eventually we got a feel for it and started making letters. We took turns and got all the way through, creating a very original, yet semi-abstract font of our own.

Another really cool exhibit in this Collider show this week is the billiard table. As you play pool, the balls move around the table and a sensor detects the movement and plays different sounds from the speaker above. It gives a whole other dimension of sound to the game! If you haven’t checked out the Collider 4 show yet, check out the website above and head in there! It’s definitely worth a look!!

This article gives you the 10 most important element for any personal portfolio site. Obviously, things like your latest work and a description of what you do are necessary, but this brings up a few things that some people might not think of. Having your logo at the top of the page to identify yourself immediately is a great way to start. And being clear and concise in your tagline and description are also a must! But another plus is a blog page or a link to your blog. Furthermore, links to social networking sites you’re on can help you connect with even more people and potential employers. Along with your recent work, testimonials from customers can go a long way to get you hired by your next clients! 

This site lists the advantages and disadvantages of different kinds of links, buttons, and menus used in websites. It talks about the quick download time of text links, but the more interesting design aspect of graphic image navigation buttons. This was a big decision for me in creating my Actors’ Summit site because my navigation design could work with either javascript buttons or text links with html background images. It was much easier for me to figure out the coding of javascript in Dreamweaver, though, so I opted for image buttons.

The list goes on to compare image mapping navigation, drop-down menus in javascript, and dynamically generated URL’s (which aids in searches for specific pages within a site with databases, such as online stores).

This site was helpful to me in deciding how I should do my navigation buttons

This article discusses the use of accessibility statements in websites and how useful they really are. Obviously, web designers should want to make their sites accessible to everyone, but sometimes the accessibility statements aren’t very clear on what features the website offers and how to use these features. The article says that perhaps it would better suit the user to provide them with a statement that helps them to know quickly and efficiently how to use the accessibility features in terms that are easier for everyone to understand. Rather than saying, “All text sizes are relative” maybe saying something more clear so they know that they can increase the size of the text in their browser. Standardization in these statements could be helpful, but the term “accessibility statement” would have to be more clearly defined. If a web designer wants everyone to be able to easily use their site, their accessibility statement must be easy to understand and helpful to locate and take information on how to navigate the site.

In web class this week, we were talking about the x, y, and z axes used in coding for page design. The x axis is horizontal, the y is vertical, and z is a more recent addition; how close or far something is in space on the page. When positioning an object on a page, the x and y positions can control how far down or over the object is, but the z axis lets the designer control how close or far away an image appears on the page. Sometimes the object or image only appears to be resized, but other times, the z axis can be used to rotate objects within the third dimension of space rather than just the flat second dimension.

It is important to understand the z axis when floating objects on a web page. This article talks about the z axis when stacking floated elements on a page. The addition of the z axis to the web design world is relatively new and still developing, and I look forward to the advances we’ll see with three-dimensional web design.

As designers we typically have the urge to make the size of body copy text, whether in print or on screen, as small as we possibly can. It looks nice, adds texture, and doesn’t distract from all our amazing graphics and images *slight sarcasm intended.* This article makes some very valid points as to why, as web designers, we should actually make our body copy no smaller than 16 pixels or 12 points. The most important reason that I gathered was if we are being paid to make a website for a company, we should be doing everything we can to make it easier for their customers to use and understand the site. If we make all the necessary information too small to read, how will they ever grow their business through their website? 

Check out this reference site for type sizes in pixels and points! It really shows just how small even 9 or 10 point type (about 13 pixels) can look on screen. Personally, I think that 14 pixels is still legible as long as the line length is not too long and the spacing between lines isn’t too close. But there is a reason that the browser default setting is 16 pixels, and as web designers we should be aware of it and use it to our advantage and the advantage of our clients.

Using web safe fonts is crucial for the design of any website. When the designer puts time and effort into the creation of a website only to have the fonts they chose to be over-ridden by their viewer’s computers, it is a disappointing and frustrating thing. The way the website designer sees their page could be completely different from the way their followers view it, altering the look and even legibility of the website. This article explains who, why, and when to use web safe fonts as well as alternatives to using other fonts without the possibility of browser settings over-riding them. I have found in my experience that using images of text in an unsafe font instead of using those fonts within the page is an easier solution than risking it or providing a download for the viewer. You can customize that text however you like and know that it will look the same in every browser. However, this method will add to your file size and download time but it should only be used for a title or button or other smaller amount of text rather than a whole paragraph or heading. So if you want your web pages to be accessible to everyone and still look the way you designed them to be, use web safe fonts!