DSD-4708-A
Week 8

Questions from the assignment

  • Sketch cloud sharing didn't work
  • Confuse about sitemap assignment and what was expected to be done

Mid semester reports

  • Sometime this week I'll be going through all your past assignments and letting you know exactly where you stand in the class so that there aren't any surprises come December
  • If you know you're behind this is a good time to take stock and figure out a realistic plan to catch up. Do not hesitate to talk to me about this. Now's the time.

SVA Style

Next week: field trip!

  • Meet here at 3:20 SHARP!
  • We will leave at 3:25 SHARP

Sketch Part II

  • The power of sketch is the ability to override styles and symbols
  • Let's download and inspect this Sketch file

In class discussion: Content inventory

  • In order to redesign an existing site successfully, you need to:
    • Know about all the content on the existing site
    • Categorize, rename, restructure, archive, or delete each piece of content

Presentations!

  • It's important to get practice presenting your design ideas as you will, without a doubt, need to present your ideas to your colleagues, art directors, and eventually, clients.
  • Spoiler alert: if you are not able to successfully present your ideas, whether it be verbally, in email, or in person, they will never be used by anyone!
  • As we will be presenting to Genspace at the end of the semester, we are going to start practicing now
  • Each week we will hear four 5 minute content strategy presentations
  • If you choose, I will record your presentation (on your phone) for you to review later. This is highly recommended.
  • This week:

Assignment review

I'll be giving coding hints to make your life easier so take notes when it's your turn!

  1. Lihua Jin :: Design | Content Inventory | Writing
  2. Alyssa Tornese :: Design | Content Inventory | Writing
  3. Kyle An :: Design | Content Inventory | Writing
  4. Peiyu eva Zhhou :: Design | Content Inventory |
  5. Hyeona Kim :: Design | Content Inventory | Writing
  6. Ifah Pantitanonta :: Design | Content Inventory | Writing
  7. Yoli Roman nicasio :: Design | Writing
  8. Yunfei Xie :: Design | Content Inventory | Writing
  9. Yuran Won :: Design | Content Inventory | Writing
  10. San Yoon :: Design | Content Inventory | Writing
  11. Dae Chae :: Design | Content Inventory

Creating an HTML webpage from scratch

  • Let's imagine we want to code this Vimeo page from scratch
  • Step 1: Gather content: images, text, video, etc
  • Step 2: Without worrying about styling, use HTML tags to define the content structure of the document. Treat this as a painting, first create the base layer, then add detail in phases. Standard webpage width is 960px.
  • Step 3: Populate tags with minimal content as you go.
  • Step 4: Once you have the structure and it looks correct, start styling with CSS
  • Here's a liveweave sketch of how I would "block in" the Vimeo page

Design Assignment

Deliverable: Publicly accessible Sketch cloud URL

  • Taking into account the feedback from class, redesign your About the Lab page
  • Remember: one of Genspace's biggest needs was that the design be unique! So think outside the box and also think beyond what a Squarespace template looks like
  • The "global elements" (header, navigation, and footer) should stay the same for both pages
  • Make those global elements symbols in Sketch
  • Design should be 960px wide
  • Present one PDF that contains the page as well as the page with annotations (in Sketch, duplicate your artboard, make the artboard larger, and add annotations to it)

Coding Assignment

Deliverable: Liveweave URL

  • Start coding your revised design for the About the Lab page. We will have two weeks to finish this.
  • Think about this coding assignment like a painting, thinking in blocks (as was demonstrated in class). You want to build the general blocks first, make sure they all fit together correctly, and then start filling in the details. For this week, it's more important to make sure all the blocks fit together correctly than filling in the details, so concentrate your efforts on that.
  • If your design included moving elements such as mouseovers, dropdown navigation, or slideshows, you do not need to code those elements now (but bonus points if you can figure out how to do it!). Just include static versions of those elements.
  • We will be adding dynamic elements, such as slideshows and menus, as we go
  • If your design calls for having text over an image, then make sure to code the image as a background image
  • Your design is unique and you will more than likely encounter unforeseen challenges, so make sure to leave a lot of time for this!
  • For this assignment, we only need to get structure of the page (all the blocks), like the liveweave of the Vimeo page

Writing Assignment

Deliverable: Publicly accessible PDF

  • Rework your presentation taking into account feedback from class
  • Remember to brand your presentation as though it is coming from your studio (so it should look super professional)
  • If English is not your native language then you must make an appointment at the Writing Resource Center.
  • If your content strategy document contains incorrect grammar or misspellings you will be penalized so make sure to spell check and get any additional help you need
  • A good way to ensure that your assignments make sense is to give them to a friend to read and have a 15 or 20 minute discussion about it. You'd be surprised how such a simple thing will help clarify your thoughts. This is recommended for native and non-native English speakers alike.

Further Reading

Further Watching

Submitting Your Work

Due Monday, 11/12 @ 10AM

Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.

Cool Links