IXD | Interaction Content Design and Creation

DSD-4708-A
Week 2

Questions from the assignment

how can I change leading space on css or html I try to find but cannot find on w3 school
Sorry, I changed something on liveweave so resubmit this link
How come you don't have to close an img tag, but you have to close video tags?
I made the image link to a funny video, but when I click the picture and play the video, it says 'video is unavailable'.
For some reason when I finished my work the </body> and </div> were highlighted red and I wasn't sure why. Everything was functioning fine but I was curious as to why that happened.
How to set different font in HTML? How to display images in different position?
had a hard time using the <video> tag for embedding Youtube and Imgur videos... So had to just use the embed function on their sites.
How can I link ul and ol tags?
What is the difference between CSS and Java Script?
How to change a accessible setting of LiveWeave? Also some tags that I put in my code do not work in LiveWeave. (It worked in Atom, and I have checked in browser, but it is not working in LiveWeave. I couldn't spot what was the wrong code)
how to properly add images

In class assignment: Review LiveWeave Submissions

Donghee An :: Coding: HTML Page | Writing: IxD |
Hailey Lawrence :: Coding: HTML Page | Writing: IxD |
Chloe(yunchung) Chung :: Coding: HTML Page | Writing: IxD |
Peiyu Zhou :: Coding: HTML Page | Writing: IxD |
Peter Dommermuth :: Coding: HTML Page | Writing: IxD |
Alyssa Tornese :: Coding: HTML Page | Writing: IxD |
Lihua Jin :: Coding: HTML Page | Writing: IxD |
Ifah Pantitanonta :: Coding: HTML Page | Writing: IxD |
Hyeona Kim :: Coding: HTML Page | Writing: IxD |
Yuran Won :: Coding: HTML Page | Writing: IxD |
Amina Cheng :: Coding: HTML Page | Writing: IxD |
Rin Park :: Coding: HTML Page | Writing: IxD |
Day Chae :: Coding: HTML Page | Writing: IxD |
Sanhui Yoon :: Coding: HTML Page | Writing: IxD |
Grace Oh :: Coding: HTML Page | Writing: IxD |
Yolaina Roman nicasio :: Coding: HTML Page | Writing: IxD |

Eblasts: an undeniable part of any media campaign

Let's look at these eblasts
Eblasts are generally between 600px and 700px wide
Can be of any height
All images need to be hosted online
Let's examine the source code...

Eblasts Part I: Design

In Photoshop, start with a canvas that's 700px wide by 1000px high. The height will likely need to change depending on the content but the width will remain 700px.
Create your design, being sure to include all the necessary information (time, date, place, headline, etc.)
Using the Slice tool (found under the crop menu), slice your image into horizontal slices that span the entire width of your design).

Depending on how tall your design is, you should wind up with anywhere from 3 to 8 slices.
Then File → Export → Save For Web (Legacy). (If you're working with anything before Adobe Creative Cloud 2015 then it's just File → Save For Web). In the upper right corner, make sure JPG is selected as the format. Then, in the ensuing dialog box, make sure Format is set to HTML and Images
By the end of this process you should have a file on your computer labeled index.html along with a folder called images. If you open index.html in any web browser you should see your design as a simple webpage.
This brings us to our first conclusion: eblasts are just HTML pages, so if you know HTML, you can create an eblast!

Eblasts Part II: Image Hosting

We will be using Imgur to host our images for this and future assignments so create an account and upload your image slices there. After uploading you can get each image's url by right-clicking and selecting Copy Image Address.

In the HTML file generated by Photoshop's Save for Web (make sure you have HTML and Images selected—see below), for each slice, you will need to replace:

with the full url (starting with http://) for each slice on Imgur (remember, these urls must end in either jpg, gif, or png. If they don't then you're probably copying the page url rather than the image url). This is the only way you'll get images to appear in your LiveWeave sketch.

Writing Assignment

Deliverable: Publicly accessible Google Doc URL

Do this before the other assignments!
Spend several minutes browsing the Genspace
In a new Google doc, answer the following questions:
- What is the main message the Genspace is trying to communicate? What is its mission?
- Who is its main audience?
- What works well and what areas need improving?

Design Assignment: Eblast design

Deliverable: Publicly accessible URL to one PDF that contains all designs

Genspace recently sent out an eblast asking its subscribers to either join the lab or tak a class.
Create three new eblast designs using these assets. Note that you should also have received the actual email in your inbox. If you haven't please email me so I can forward it to you. E-blasts are to be 700px wide. Height can be whatever. The eblast must contain the following:
- Clickable Genspace logo that links to their homepage
- Take a good look at the copy, especially how the logistical information (time, date, location stuff) is mixed into the body copy (maybe it shouldn't be). This is one area that can definitely be improved.
- Think about the hierarchy of information and how that relates to the nature of an eblast. Many users will not even scroll down so how to we make the top half of it as interesting and informative as possible?
- Put yourself in the place of an uninitiated user. How would you make attending this event, which includes buying tickets, finding out where it is, adding it to a calendar, etc., as easy as possible?
- Hint: Make sure the date and time are prominently featured
You can use the font of your choice
Bonus (and this is completely optional): After doing a few designs with the provided assets, feel free to redesign the Genspace logo if you like (this is not a requirement). As a designer it is almost always to your benefit to show your client that you are able to think of better options, even if they haven't asked for them. This can sometimes be tricky territory to navigate, but if successfully and consistently done, can prove to be an invaluable client offering.

Coding Assignment 1

Finish these HTML assignments:
Start learning CSS with these lessons:

Coding Assignment 2

Deliverable: Liveweave URL

Using the HTML generated from Photoshop's Save For Web and uploading the image slices to Imgur, create a Liveweave sketch that displays one of your 3 eblast designs
For spacer.gif use this image: http://i.imgur.com/tee6fiQ.gif

Submitting Your Work

Due Monday, 9/24, 10AM

Make sure all links are publicly accessible. 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.

IxD(interaction design)