Assignment 2: Worksheet

Step 1: Develop Your Idea

My website is a portfolio of my works and progress. I am a multi-disciplinary designer/artist so my works are in different mediums. There will be some short text, many images, and a couple videos. The goal of this website is to present my works in a coherent way that is easy to navigate. I have some experiences in UX design and I want this website to show that.

Step 2: Discovery and Research

I looked at different kinds of artists/designers portfolios as I am multi-disciplinary and I wanted to see what is the best way for each medium. I catagorize them by fields of their practices.

Illustrators

  • Nadjozna
    Nadjozna
    Nadjozna
    Russian artist Nadiya Kushnir utilizes her handwriting into her online portfolio as her works are mostly done by hand. Her style is very sweet and colorful, which she kept the background white so the works stand out. The website has music, which is a bit old fashion but it works really well with her cute illustrations. The home page is non-traditional in terms of layout and I think it works with her personal style. I wish in each category the image thumbnails are also in circle formate to match with her home page. There are no text accompanying her creations.

  • Mister Lapin
    Mister Lapin
    Mister Lapin's techniques include computer graphics and water color. The works ranging from children's book, logos, to greeting cards. Unfortunately, the layout of the website is obviously a SquareSpace template without much modification.

  • May-Linn Aaslie
    May-Linn Aaslie
    May-Linn Aaslie
    May-Linn Aaslie's website has a lot of functions. It has a gallery, an e-commerce, a blog, a service pricing page, her Instagram, and you can signup for her classes/workshops. This website has a lot of functions that you don't need to leave the website to see her Instagram feed or purchase some artworks and I think it is really smart to keep the visitors on the website as long as possible. I also enjoyed the back to top function.

Photographer

  • Shaw Photography
    Shaw Photography
    Shaw Photography
    The website of Shaw Photography actually had some problems with display that I had to zoom out. Since they specialize in architectural photography, it is nice to present architecture and interior in a full-screened slide show. The about page is quite personal and fun but the overall design is pretty basic.

  • Jill Greenberg
    Jill Greenberg
    Jill Greenberg
    The cover page is a colorful, high res video montage which is exciting to the visitors. The home page highlights some projects with infinite scroll. Many of the images are full-screened, which is slow to load. The navigation is not the most user friendly as each link is not presented as a button and they are not neatly organized; however I like the navigation because it is the only thing on the website that is not in a grid or centered which is visually interesting.

  • Tom Hull
    Tom Hull
    Tom Hull
    The white/black/teal palette is nice and refreshing and the hover effect is a nice touch. The horizontal presentation is different from the other vertical infinite scroll and I like the fact that it is not scroll but click. Scroll instead of click is very popular but I find it hard to use as scrolling is harder to control. Overall the website is visually consistent and I really enjoyed the parallel line detail in the logo is also used in the website.

Visual Designer

  • The Nero
    The Nero
    The Nero
    Marco Grimaldi is a visual designer and his website is responsive. The website uses infinite scroll and the home page is actually the about page. He highlighted some keywords in his bio which is what visual designers do a lot: creating visual hierarchy. Color is used to highlight the main color of each projects. He includes a lot of progress and details for each project but it is also due to the nature of visual designs.

  • Signes du quotidien
    Signes du quotidien
    Signes du quotidien
    Very, very interactive and responsive; you have to actually drag the button into the menu box, which is super fun. The 2-column layout with the navigation in the center of the website is unexpected and refreshing. If you look closely, you can see the 2 columns are running in and out of the frame. Otherwise the layout is pretty simple. It is the details that makes it stands out.

  • Huncwot
    Huncwot
    Huncwot
    Huncwot is a design agency specialized in interactive design. The website itself is interactive and responsive, which is showcasing their specialty. The home page is split into four big columns as menu. In each category, projects come up like feeds. A hiding side menu bar is also used for navigation.

  • Overall, visual designers have better websites as that is their specialty. Althought there are some features other artists use that are interesting, as "good" web designs can all be similar and ends up being boring.

Step 3: Target Your Audience

The target audience of my website will be possible employers/collaborators.These people might have a wide range of age and gender. Some of them might be designers/artists and they can either be tech savvy or not. The main purpose of their visit is to find out about my work, possibly to know more about me as a person and possibly to contact me. It is important to showcase my works and who I am in a subtle way. The design of this website should be highlighting my works, easy to navigate, clear, and simple but not basic. A highlight/summary of my works will help give the employers an impression when they don't have too much time. In each project page, there should be a short paragraph, main images, and additional progress or video. Having a short paragraph can help the audience understand the works better as some works are not as straight forward. Progress images will show the employers my rational and my ability to problem solve. A short bio will provide some information about me and a clear and easy to use contact page is vital.

Step 4: Inspiration

Step 5: Thumbnails
thumbnail01
thumbnail02
thumbnail03

Step 6: Wireframe

wireframe

Step 7: Photoshop Comp

photoshop comp