Design a portfolio / promotional site for a professional photographer. You may use any photographer of your choosing as long as they have a compelling body of work. The assignment will be completed using Adobe XD along with Illustrator and Photoshop as necessary.

Since for many of you this site will be your first foray into web design, we will be focusing primarily on creating visual mock ups and functioning prototypes in XD. You do not have to write any code for this assignment. I will also be providing a list of suggested “recommended photographers” for your consideration.

Design Considerations

Determine the goals and the audience of your site. Before your first thumbnail sketch, make a list of things the client would want to accomplish with the site ( I can help by acting as the client for this part ).  Then compare this with the needs of the target audience. Always prioritize the functionality of the site, make sure it’s going to respond well to both the clients goals and the user’s expectations.

Clearly define the content. Focus on the content and make it central to your site design. On the web, more so than in print, content is king.

Andreas Gursky

Step One:

With a pen / pencil & paper map out your site’s information architecture, how many pages will it need? ( there are no set requirements ) what information is important to the viewers? How will you organize and display the work? Once you have a clear direction, start organizing content and making wireframes.  This will help establish the structure of the site and show you how its navigation could work. 

Understanding how the site will be organized will dramatically affect the overall design. Properly organizing content can help you determine the amount of pages necessary to create the site, and help you form an organized and effective navigation system.

Step Two:

In XD create your art boards & basic wireframe layouts. For this project you will be designing both a mobil & desktop experience, you will create two separate files in XD to accomplish this. Explore a few color palette and typographic treatment options, consider the overall tone of your photographers body of work. Also consider keeping the color to a senable minimum, one of the main considerations of any portfolio site is it needs to accompany and complement the entire body of work. Oversaturated color palettes can conflict with and distract from the work, alternatively websites that are too minimal can feel boring and dry.


Comp up with three typeface and color treatment options, for review in class Feb 9th

Dig into XD, complete the start screen tutorial, then review the material on the Adobe website.

Review all of the videos in the Getting Started with Dan Beaumont series. XD is very intuitive, however the design process will feel more effortless after watching a few introductory tutorials.

Build out your layouts in XD, I recommend starting with the Mobil layout, to get the basic look and feel. Once you’ve established an aesthetic, you can develop your mobil and desktop layouts in Tandem.

Also go to the Add-ons tab on the XD start screen and download & install the Apple UI kits.

Step Three:

Have a rough build out of all your pages for mobil & desktop layouts by Thursday Feb 16th, be prepared to share your work in class and review it with your peers in small groups. Have your peers test out your navigation, and record feedback and reactions.

Step Four:

Incorporate feed back from your peers and your instructor, into your design. Finish and finalize your work for an in class critique on February 23rd.

Final Due Date: Tuesday February 23rd