Cool Portfolio Website Designs

I found this article with links to a lot of cool portfolio designs, "50 Fresh Portfolio Websites" (http://www.smashingmagazine.com/2009/07/30/50-fresh-portfolio-websites-for-your-inspiration/).
It has some pretty inpsiring portfolio designs:

The Magnetic North portfolio has some neat interactive elements. You navigate the site by drawing shapes with the mouse, http://mnatwork.com/ .







 Hello Monday's website has some great navigation too, with draggable elements. I love the color scheme and squarish design, http://www.hellomonday.net/ .







Alexey Chernishov's portfolio has a nice clean design with the feel of paper on a desk, http://ftdesigner.net/ .

The portfolio of Chuck U has an interface made out of some awesome graphic illustrations, http://chucku.com/ .







The Also website is just plain fun. Navigation from page to page takes you through some unique and wild animations, http://www.also-online.com/  .

Tips for Porfolio Websites

Since  I want to create a personal portfolio site, I found this article on Smashing Magazine, "10 Steps to the Perfect Portfolio Website."  It suggest to include these things in your portfolio site:

1. Logo: identifies who you are and should be in a noticeable place like the top left of the site.

2. Tagline: A short catchy phrase letting people know what you do.

3. Portfolio: Show your work and make sure to have large, high-quality images.

4. Services: List what kinds of work you do. Be specific.

5. About Me: Give some info about yourself, and use a photo of yourself.

6. Contact: Give your contact info and make it obvious and easy to find. Contact forms help a lot too.

7. Blog: Blog about the kind of work you do. Show them you know what you're talking about.

8. Call to Action: Have obvious buttons that guide users like "hire me" or "see portfolio."

9. Use Social Networking Websites: Let people to connect to social sites so they can follow you.

10. Language & Communication: "Be friendly and personal, but also clear and precise."


I thought this was pretty interesting. Some of these were things I would have never thought to include in a portfolio site, like a logo or tagline. I can see how they could be really helpful because they let potential clients and employers know who you are quickly. I also liked the idea of "call to action" buttons guiding people through the website the way you want them to go through it.  It's amazing how just a few small changes can make your portfolio site stand out.

Minimun Usable Design

I read this great article on Smashing Magazine called "MUD: Minimum Usable Design" by Paul Scrivens.  He shares a working method for design. Many designers, myself included, often find themselves feeling like their design is never quite finished. He shares this quote to describe this dilemma:

 "To walk through the woods, you first need to walk halfway through. Then, once you're in the middle of it, you still need to walk half the of the remaining distance, then half of the distance again, and then another half, and you can never successfully make it through the woods"

I know I've personally felt trapped in this forest, constantly editing details of a design, never quite sure if its finished yet. However, the author twists this idea of "only getting half-way done" to be motivating rather than draining. He shares his theory of Minimum Usable Design: When working on a project, at first only aim to get half-way there. Try to get the project to a point that is 50% usable. This can be achieved by putting the most needful parts in first. In the case of a website, this would be the content. Then you can focus on getting 75% done with the project, adding the next most important piece like logos, etc. And keep going, always aiming for half of what you need to do. Eventually you will get close enough that it will be as good as it is going to get. True, some argue about stopping at just "good enough", but for projects on a deadline this is a great way to work. And, lets face it, no matter long you work on a design, there's always something that needs to be worked on.

I liked this method the author presented. I know from experience, it can be easy to get caught up in little details of projects and spend way too much time on them. This method offers a way to manage time on your project. If you focus on the most important stuff first, then you will be able to spend enough time on them. As you get to less significant details, it won't matter if you start running out of time. Also, it's a great way to break down a huge project into smaller steps. That way it can feel more manageable and easier to achieve.

Tim Burton Website

I've always been a big fan of Tim Burton, so I thought I'd give a shout out to his art gallery website, http://timburton.com/. It has a fun and unique  way of navigating through the site. It uses flash animation to allow the user to move a character around the site instead of the cursor. With a touch of the arrow keys, the character (Stain Boy from one of Burton's poems) moves right, left, back, and forward through a home interior. Other pages of the site are accessed by walking through doors. It's really quite fun, like playing a video game. It works particularly well for an art gallery site, because the character walks down a hall of hanging artworks that you can walk up closer to see, much like art galleries in real life. Also, the loading screen is very interesting in this site. While you wait for the site to load, it shows the numbers 1 through 10 designed and drawn by Burton himself. It is actually entertaining, unlike most loading screens. I like this idea a lot. It's usually pretty boring waiting for things to load on the web. Why not make the loading screen entertaining? My only complaints about the site would be that sometimes the flash stops working and the character get stuck, and I don't like that the site takes you to an advertisement before you actually go to the real site.
But, overall its is a fun website with some
very clever ideas.

Zombie Stop-Motion

I recently saw the movie, Paranorman, a new stop-motion comedy-thriller about zombies, ghosts, and more. The animation was pretty impressive.  The beautiful and painstakingly hand-crafted details were astounding, and further enhanced with CGI effects. The creators of the movie, LAIKA animation studios, embraced both hand-made and digital techniques to create a unique style. They used clay models and moved them bit by bit, like traditional stop-motion, but they combined this with innovative digital processes. They used a 3D printer to create the facial expressions on the characters, a fairly new technique for the animation industry. Coraline was the first movie to use it, and  Paranorman was the first to have a color printer. They used these printers to create over 31,000 faces, and used rapid prototyping to switch them on the bodies as they were filming. It infinity increased the possibilities (up to 1.5 million) of facial expressions for the stop-motion characters. The addition of color from the printer allowed for much more detail in the characters faces, and even added the translucent pinkish color of real skin. The result was much more lively and interesting characters on film. This innovation is a huge stride for stop-motion films, and may just give them a competitive edge in today's world of CGI animation.

 Information found at:  http://www.variety.com/article/VR1118057663

Tips for Making Websites More User-Friendly

I found this article on website usability on the Web Designer Depot blog. The article, "10 Usability Tips for Web Designers" (http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/) shares these tips:

1. Include a Tagline: Have a statement that tells what you website is about, and have it be the most noticeable thing on the page.

2. Implement Site Search: Include a search box, make it easy to find and easy to use.

3.Don't Use Extensive Graphics: Too many design elements can mislead people. Be minimal with graphics.

4. Use Site Maps: These are lists of the pages in your site, so people can find what they need quickly and easily.

5. Don't Break the Workflow: Allow users to cancel whatever operations they are doing. Don't force them to finish it.

6. Create Easily Scannable Web Pages: Make your website easy to scan. Use emphasis on the more important information, so people can find what they need easily.

7. Don't Design Misleading UI Controls: Keep buttons, tabs, rollover, etc. consistent so you font confuse the users.

8. Give Meaningful Feedback: Let people know what's going on. Like, with an error message, give more information that just error. Let them know what went wrong and how to get back to the site.

9.Do not overuse Javascript: This is for compatibility. Not everyone has the latest version of JavaScript, so using it too much can prevent them from using the site.

10. Avoid CAPTCHAs: These can be difficult and annoying for some people to interpret, so find more user-friendly ways instead.

This author makes some good points. I like his ideas about having taglines and making the pages easily scannable. I feel it is very important to make a website easy to understand at a glance. People are busy; they want to be able to find what they are looking for quickly.  I also like his point about giving feedback, especially with error messages. Those are so frustrating when they don't give any information and you don't know why it showed up. I don't completely agree with his point about using graphics. Admittedly, I have a weakness for using lots of graphics, but I feel that that isn't necessarily bad all the time. I feel it works for some websites and not so much for others. More personal sites, like blogs, or portfolios can have plenty of graphics and still work, but in a more public site like news sites, or stores, too many graphics would just be distracting.