OBJECTIVE:

Create a small website on the artist of your choice. It can be a visual artist, music artist or other.

• You can include biographical information and images of the artwork.
• Try to make the style of the site reflect the style of the artist.
• Pay attention to the requirements, as well as the design.

Requirements:

1. 2-4 linked web pages about the artist of your choice.
2. Use Flexbox somewhere in the site
3. A gallery of some sort
   • See Ch.16 and the videos for ways to construct a gallery
   • Here is a video on making a (sort of)gallery with Flexbox and CSS Grid.
   • You could also use the code in Exercises 16-1 and 16-2 as a starting point if you want. It could be adapted as a gallery. You can also use code from our exercises, but make sure to adapt it to your needs.
   • Here is some code which also might work well for a gallery. It's has a fall back for browsers that don't support CSS Grid, which aren't very many now.
   • You can also use some of the code from the video CSS Grid Gallery with Flexbox Fallback
4. Incorporate at least some responsive design
   • For example, the number of items per row in the gallery changes when the browser is resized.

Process

1. Do a content inventory/list for the site
   • You will not turn this in, but it will be valuable in your process
2. Do information architecture for the site
   • This is to organize the information and content you came up with while doing the content inventory.
   • You could use figjam (from figma) for this, or draw.io or anything you want as far as software.
   • You can use figma or figjam for information archtiecture planning.
     • Here is a link to a figma community template file for doing information architecture.
     • If you look up information archtiecture template in the figma community resources, you can find lost of potentially useful files. If ytou find something great, let us know in teh questions discussion forum in Canvas.
   • You will not turn this in, but it will be valuable in your process
3. Do concept sketches
   • Do some quick, small drawings to get ideas for your design.
   • Do at least 2 versions for each screen.
   • Get a blank horizontal storyboard here
   • Get a vertical storyboard here
   • See examples of thumbnails here.
   • There are also examples in the Sketches Discussion in Canvas.
   • To turn in the sketches, post them in the Sketches Discussion forum in Canvas. You can take a photo with your cellphone or scan the sketches, add them to your files in Canvas, then post them in the Sketches Discussion forum.
     • Here is how to upload files for Canvas so you can post them in a discussion
     • Here you can see how to add images to a post from your files after uploading
4. Do wireframes, 2 for each page this time, 1 Desktop Version and 1 mobile version
   • You will turn these in.
   • If you use figma, save a COPY of your figma wireframes in the team project linked from the Main 46 instructions page. The link changes each semester. Update: I am working on getting an education team going for Fall 24.
   • Here is a link to get a free, upgraded education account for figma.
   • Check the calendar for due dates.
   • For each page, do a wireframe for desktop and a wireframe for mobile. There should be some differences, such as number of columns.
   • The wireframes should be fairly detailed, using actual text as much as possible, especially for headings.
   • Here are example wireframes and other student work.
   • Other good wireframe examples can be seen here.
   • Figma:
     You can do the wireframes online in figma, or using whatever software you want. We are currently using figma in the GDS 72 Digital Imaging and User Interface Design class, so it might be good to get used to using it a little. There is a lot of content on using it in that class, however.
     • Here is a very good video for beginners with Figma, covering many of the basics. It is a little long (1:10), but it's very good to know this.
     • Here is the video again Introduction to Figma for Wireframing. If you use figma, you can share the wireframes with me instead of uploading them. You can share figma files by clicking the share button in the top right while in figma. The interface has changed a bit since the video, but the process is essentially the same.
     • Here is a file you can use to start with in figma (from the video). You can import it into Figma by licking the import button.
     • Again, here are example wireframes and other student work
     • Article: Here is a good guide to wireframing from figma(which you probably will be using). I would difinitely check this one out.
     • Article: The ultimate guide to wireframe design
     • Here is the figma youtube channel which has TONS of content on how to use figma.
     • Again, If you use figma, save a COPY of your figma wireframes in the team project linked from the Main 46 instructions page. The link changes each semester.
     • Important! Here is a link to a playlist of 20+ videos about using Figma from the Spring 23 version of GDS 072, Digital Imaging and User interface Design class. You can look there for tutorials on many aspects of using Figma. Figma is updated fairly often, so things will change.
     • Sketch
       • Sketch is very popular for creating comps/mockups, but can also be used for wireframing.
       • Here are some wireframing resources for Sketch
     • http://gomockingbird.com/
     • http://www.gliffy.com/
     • More wireframe apps from Smashing Magazine
     • Wireframe apps from Sitepoint
5. Create the site pages.
   • Again, for the gallery, you could use the code in Exercises 16-1 and 16-2 as a starting point or the video or the video CSS Grid Gallery with Flexbox Fallback - Duration 25:31.
6. Check the calendar for due dates.

Project Examples

---

Point Breakdown

Project Grading Scale	Possible
Sketches	5
Wireframes	10
Project Specifications	10
Design and Finesse	10
TOTAL POINTS:	35

Specifications (10 points):

The Minimum Requirements Are

• 2-4 linked pages
• Use of the Flexbox Property
• A gallery of some sort
• Use at least some responsive design

Suggestions

• Some of you probably need to use a hamburger menu for responsive navigation on the Artist Project. Here is a video from later on that.
• Make sure to choose proper graphics, text and colors for the intended audience and content

Design & Finesse: (10 points)

• Communicate the message
• Design fits the content
• Proper optimization of images
• Good composition of pages
• Good color harmony
• Good functionality/usability
• Intuitive and functional navigation
• Type should be legible, use appropriate fonts for the design