Design Portfolio Website Research

Standard

Portfolio/ Work:

  • http://smartgc.com.ar/english.php – I like how the projects are presented long strips and once you click it expands and a horizontal scroll is applied.
  • http://www.ollygibbs.com/ – I like the gallery display of work and how a color pops up with the title of the project when you hover over it.

About Me: 

  • http://www.trademark-trademark.com/ – I like how the the navigation for his about me is a question mark because you don’t know about him and you don’t know what the question mark stands for until you click on it.
  • http://www.hihayk.com/ – With this about me I like the use of the adobe suite icons and how they’re shaded in indicating his experience and skills in each of them as well as the html and css. His about me is simple but it gets the point across about who he is and what he can do.

Resume:

  • http://okaydave.com/ – I like the placement of where his resume is at. Next to his about me section is clever, once the employer or client looks at the about me if they wanted to know more they could click on the resume which takes them to a PDF that can be saved, printed, etc.
  • http://heyimphil.com/130856/resume – I think this is a good example of a built in resume on the website. It’s clean and precise. The only thing I would recommend is making the text a different shade of grey, it’s a little hard to read.

Contact Info:

  • http://racket.net.au/ – This design is a good use of the contact form. Aside from that they also provided a number as the primary point of contact and additional contact required the form to be filled out.
  • http://cpeople.ru/#contact – This is basic design but it gets the point across clearly. The numbers to call are big versus the facebook page and email.
Advertisements

Online Identities

Standard

With any portfolio, it’s important that the work you show echoes your elevator pitch. The elevator pitch is the simplest and quickest way to describe what you do. In order to make your pitch solid you’ve got to be able to back it up with not only your work but your identity. The way you identify yourself can be the make or break it point of your portfolio. Here’s a few websites who not only have strong identity but their work and layout are a reflection of the designer that they are:

http://smallstudio.com.au/

A few things that make this portfolio strong are the use of a horizontal scroll. This design choice already has them set out against the rest of potential competitors. Another strong choice by this designer is to have the navigation appear only when the mouse hovers in the hot spot. Sometimes navigation can be overbearing and in the way this use of hiding it is a good choice on their part. The choice to have their logo front and center works from them especially because of the horizontal scroll, the logo doesn’t seem unnecessarily large.

http://www.jasonbmurphy.com/index.html

What makes this portfolio strong is his use of animation in his home page which demonstrates his use of flash. As well as highlighting what sets him a part; ex-paratrooper. I think that including his previous lifestyle in his portfolio is a great way to grab the potential clients or employers attention.

http://www.dejanulcej.com/

This portfolio is strong because the first thing you see is the logo as well as the elevator pitch. Everything you need to know about this person is right on the home page for you. After you decide if you like what you see then you are given the opportunity to scroll. The work isn’t immediately shoved in your face but it also isn’t difficult to find.

Responsive Web Design

Standard

The world of interactive design is changing everyday so as designers we can’t assume everyone will be sitting at a PC anymore. With the many features a smartphone can offer, we are almost to the point where we don’t even need desktop computers anymore. Everything we need is right in our pockets, with the exception of tablets and iPads.

Responsive design is more and more important. We not only need to design for many different platforms but we need the website to detect what platform the user is using and respond correctly. Web design for mobile devices is already set to a specific platform, cellphones. Ways that responsive and mobile web design are similar is they both have specific designs for mobile devices. Ways they are different is responsive is designed for many different platforms whereas mobile is specific to a cellphone or mobile device. Some differences when design for a traditional desktop versus mobile and portable devices are; traditional has more screen space for more information and mobile/portable devices have smaller screens. The user isn’t going to spend hours searching for information so it needs to be where they can find it. Also on mobile/portable devices, load time for elements needs to be as fast as the designer can possibly get it. Just like a user won’t search for information they also won’t waste time waiting for pictures to load. They’ll exit the site just as easily as they entered it.

When designing for responsive and mobile web you should make sure everything on the web page is significant to the user. Don’t put anything the user may not want to see on there. They want the important things so have them where they can find them. Also as stated before, load time is important. People don’t like to wait, because mobile devices have so much access to so many different things they expect everything to be quick and simple. In addition everything must look amazing, aside from content the aesthetic is extremely important. Make sure the site is tailored to the users needs.

Research: http://bradfrostweb.com/blog/post/five-responsive-web-design-pitfalls-to-avoid/

Example of Responsive website: http://www.vans.com/

Example of Mobile website: https://m.yahoo.com/w/legobpengine/frontpage/?.intl=us&.lang=en

https://www.yahoo.com/

responsive-website-design-des-650x1275

Web Typography

Standard

The importance of web fonts are so that people anywhere in the world can view what is intended to be on their screen. With web, there are limitations when it comes to fonts. Not all fonts installed on one computer may be available on another computer. As well as this problem, different web browsers can affect the way a person sees things. So, to fix problems like this web safe fonts were created. Fonts, that are available to designers that they can use and are adaptable to all types of browsers and devices.

In addition to the importance of web safe fonts it’s important that when choosing a font you test out the readability. You may think a font looks aesthetically pleasing, but does that mean the user will be able to read it? Taking into consideration all of these things when picking a font can be time consuming and may seem trivial to you, but to have a successful functioning website it is important that you do consider such things.

Here are some websites that explain web typography some more:

http://typecast.com/blog/a-more-modern-scale-for-web-typography

http://www.smashingmagazine.com/2013/08/06/beautiful-typography-web-design/

http://www.creativebloq.com/web-design/choose-web-fonts-1233034

Final Project

Standard

hall_landscape5

 

click on picture to get to link

Requirements:

Final website uploaded to server.
• 4 pages +
• external CSS
• rollovers
• ALT info for images
• meta tags (keywords & description)
• standard naming conventions
• organized directory structure
• less than 10MB total