Bio Page Project

• Create 1 web page about yourself. You only need to make 1 page.
• You can include biographical information, hobbies, or anything else you would like the class to know about you.
• Do sketches(optional) a wireframe(required) and a comp(optional) first
  • The wireframe is due first. Here is a video from GDS 045 on using figma for wireframes if you would like to use figma, although you can use whatever app you want to for the wireframes. There is more information on the wireframes below. Check the calender in Canvas for all due dates.
• There are lots of videos on using figma here
• Here are example wireframes and other student work
• You can use these web page layout templates and code images as a starting point for the actual HTML and CSS of the page if you wish. They are from the GDS 45 class. They are images of the templates and code only, not text files of the code. You would still need to type the code ;) Links to the videos on how to code these templates are here:
  • GDES 45 Basic Page with HTML 5 Containers
    • This video is from GDS 45 and details about creating the basic 1 column template file
  • Simple 2 Column Responsive Layout with Flexbox Duration 41:12
    • This video is from GDS 45 and talks about creating a basic responsive 2 column template file
• You can also use your own code(even better).
• You can make the page as elaborate as you want. You are the client on this one(and me).
• If you do use one of the templates, make sure to take that basic layout into account in your wireframe.

Design & Finesse: (10 points)

• Communicate the message (What are you trying to say/communicate)
• Design fits the content
• Proper optimization of images
• Good composition/layout of pages
• Good color harmony/Have a color scheme that makes sense for the content
• Good functionality/usability
• Intuitive and functional navigation
• Type should be legible, and use appropriate fonts for the design

Point Breakdown

Project Grading Scale	Possible
Wireframe	10
Valid Code	10
Design	10
CSS Shapes Extra Credit	+2
TOTAL POINTS:	30

To do and turn in

• At least 1 wireframe is due first
  • Since there is only 1 page in the assignment, you can do only 1 wireframe if you wish, or, you can do more to show different layouts for mobile and desktop, if you are doing different layouts for each.
  • Here are examples of what we are looking for as far as the Bio Page Wireframe/s. That is not my actual bio, BTW ;). There is a desktop and and mobile version to show responsive adjustments, although, again, you do not have to create 2. It might be good though, to show both versions. Your's could be much better!
  • You can see more good wireframe examples here
  • Create a free account at figma.com. You can use it to do wireframes for the project. Here is the video Introduction to Figma for Wireframing.
    • 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.
  • 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.
  • Here is a link to the page detailing how you can get a free upgrade to a pro account for students.
  • Drop the wireframe into the drop box under the modules link in Canvas. It can by jpeg, png file, or pdf.
• Check the calendar for due dates on the wireframes and the actual page. You have more than one week for the project, and it's only 1 page :)
  (Don't wait until next week to get started on production)
• Extra credit! if you use CSS Shapes on the assignment (maybe around a circular image of yourself?)
  • There is information on using CSS Shapes on page 399, Chapter 15, of Learning Web Design
  • Here is a video from Jen Simmons on using CSS Shapes.