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.17 and 18 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 Chapter 18 of Learnong Web Design as a starting point if you want. Some 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.
5. Extra Credit : Feel free to add lightbox functionality to your gallery for some extra credit. One solution for that is Lightbox 2. You can see how it works and get the code here.

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.
   • 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 (but Figma would be the preferred choice)
     • 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 are the videos again Introduction to Figma and Introduction to Wireframing in Figma. 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 clicking 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 Chapters 17 and 18 of Leanning Web Design 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

• Most of you probably need to use a hamburger menu for responsive navigation on the Artist Project. Here is a video from later on that.
• Here is another solution for a resposive top navigation bar from W3 Schools, How TO - Responsive Navbar with Dropdown. You can use the code from this example.
• 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