The homework demonstration from the first class can be found on Cyberduck under the example folder "gi-fu" you can download this folder and view it in VS Code to review importing images and the "My Website" folder layout.
Week 2
DIVs, display Property, and Semantics
Class updates
Thank you all for sharing your ASCII homework with the class. Make sure that your work is submitted properly through Cyberduck in the folder you created last week, you can view your work online under the
link attached to your name on our class site. When you update your folder as we complete each assignment, it is best to re-upload your "My Website" folder in its entirety to make sure your newest pages
are included in the upload.
This week, we discussed the CSS Box model to understand the use of "div" containers to store our visual elements like imagery, video and text. You can review the CSS Box Model
Lecture HERE. We also covered the creation of multiple web pages in our folder, as well as saving them in a new folder called "Pages".
Your "My Website" folder should be structured like the example in the "File Explorer" or "Finder" window.
The index page will be the homepage of your website. During our first week, we created our ASCII art in our first index.html. The original index file that you used for your ASCII
homework should be renamed "ascii.html" and moved into the pages folder. The index page outside the "pages" folder will be the navigation page to our "Getting to know URL" assignment.
Homework:
Continue to build out your webpages for the "Getting to Know URL" assignment.
By next week:
You should have two finished pages, the ascii.html that was completed for homework from our first class and the my-name.html in your "pages" folder.
Getting to know URL page structure
Visual Studio Code saving tip:
Always save your work after every change added to your document under File > Save. You can also autosave your file as you work by turning on the autosave feature under File > Autosave.
We will discuss color codes and image formatting for html, as well as have a studio workday/individual meetings in preparation for our critique next week.
Homework:
Finish your "Getting to Know URL" Pages for critique next week 2/7
We will further investigate the structure of web pages through an in-class demonstration covering single page scrolling as well as review the "Single Page Design" lecture above.
Make sure your "D for Div" project exists in its own folder inside the "pages" folder. You can add a link to your main page to share this project during class.
Using the single page scroll template we learned in our previous class demonstration, we will develop a webpage that tells a narrative story or provides step-by-step instructions through each section.
To download a copy of Jquery to your computer, right click on the script page and select "save as.." you should be able to save the script as a javascript file
Homework
Customize the backgrounds of your sections and your navigation bar using images or color.
Next week: Last in-class work day before Spring Break
Week 9
Narrative Scroll Project: Sharing our research and ideas as a class
Before our studio work time, we will cover the basics of GSAP. Focusing on installation and implementation within our Web Design Projects
Narrative Scroll project due after Spring Break
Projects
Exercise #1: “Just ASCII About Me”
Details
Collect at least three (3) examples that you find. Then, using SublimeText, design your own ASCII mark as a brand for yourself (you can design the logo yourself,
or use an online ASCII generator). You will include your ASCII mark at the top of all of the website HTML and CSS documents that you create throughtout the semester as a way of “branding” your projects.
Create your personal website for the class. Create a link to a sub-page called index.html and in the comments on that page paste:
At least three (3) examples of ASCII marks that you found hidden in the HTML comments of popular websites (NOT from the example websites provided above)
Your own ASCII logo or brand for your web design studio, which we will include in our HTML and CSS source files for all of our exercises and projects
Create a simple, multi-page website with a consistent navigation interface as a way of introducing yourself to the rest of the class. The pages should be organized so
that there is one webpage for each of the following prompts:
Your name (my-name.html)
Your ASCII logo, as either a JPEG or PNG image, or simply as text characters (my-ascii.html)
A list of a few brief details about your educational or professional background (my-background.html)
A designer or design studio that inspires your work (include an anchor link to their website and some images of their work) design-inspiration.html
An image and description of a non-designed object that you admire (it is up to you to interpret what a “non-designed” object might be), and why you like it (non-designed.html)
An “everyday” design object that most people use or encounter on a regular basis that you think is not adequately appreciated for its design qualities (everyday-object.html)
Exercise Brief
Use only HTML5 Semantic Tag DIV (Document Division) elements with background-color, border, height, margin, padding, and width specifications in a linked CSS stylesheet to create at least two (2) digital works of art forgery on two (2) separate webpages.
The dimensions of the work must be responsive to the browser window (i.e. they should not be composed with fixed-width wrappers) and all of the elements on the page should be interactive with a background-color change in response to the user's hover.
DES 303 Web Design is a workshop-based course that focuses on software applications in design and web design. Students seeking to extend their art and/or design practice to include the web as both a stage and a medium will gain valuable
experience through this course to integrate visual design, information design, interaction design, and creative coding. This course surveys and applies approaches of making art, developing web-based presentation,
and communicating information via the Internet by exploring methods, software, tools, and technologies including HTML5, CSS3, JavaScript, PHP, virtual reality, and augmented reality. Students learn methods and
tools to design, develop, and publish content and web experiences, working in collaborative and individual approaches designed to stimulate both critical and creative practice. Class activity includes lectures,
demonstrations, assignment work, project work, and critique. Students will be given exercises, projects, research, and reading to be completed during and outside of class. This is a design studio course, and
projects are graded on execution of process as well as outcome.
Objectives
Explore the most effective and current tools used in creating web experiences.
Explore the tools and techniques available through web development programs.
Raise awareness about art and design and its implementation in the web experience.
Critically analyze and evaluate website designs and web experiences.
Create a personal website showcasing student’s work by using responsive web design.
Create a collaborative website demonstrating the student’s ability to contribute to a team project.
Create web art demonstrating the student’s ability to imagine the web as an artistic medium.
Cultivate a practical understanding of web authoring and related graphic programs and to explore best practices for creating websites and the digital content.
Class Expectations
Students are expected to utilize web design research highlighted within the course in the development of example exercises, finished projects, and a web portfolio showcase. As we progress through
the weeks, you are expected to update your personal link on the class site to submit your completed assignments. All critiques and check-in’s will require that your student submission link is
up and working before the start of class using Cyberduck. (Note: Issues with Cyberduck on “unsecure” networks like your home wifi may be an issue. Upload all work using the USC Secure wifi if
you run into problems accessing our class server through Cyberduck.)
Internet Browser: Apple Safari, Google Chrome, Microsoft Edge, Mozilla Firefox, Opera
Adobe Creative Suite: Illustrator, Photoshop
Materials
Laptop computer (required to complete Larger projects outside of class)
Sketchbook
Pen/Pencil and a Notebook
USB or External HDD
Grading
Projects: 60
Class Assignments/ HW: 20
Participation: 10
Attendance: 10
total: 100
Project Submission Requirements
Do not discard any of your work or research. You will be asked to turn in all research and iterations of your progress with each project. Research may be stored in sketchbooks,
documented through photos or in e-journals formats such as blogs by other digital means.
All homework and assignments must be submitted on time, in the format outlined. Late assignments will be docked one full grade for each week they are late.
All work to be critiqued must be ready for display at the start of class. Hardcopies should be cropped and pinned to the wall by the start of class. Project images should
be saved in the appropriate formats and ready to present. Please consider presentation and its display.
Please proof read and spell-check your work. Writing and designing use different sides of the brain. It is common for designers to misspell familiar words.
All cited work must include a bibliography.
Label all work that is handed in clearly! Work submitted via email attachment should include the student's name in the document name. (e.g.: lastname_firstname_assignmentname.zip)
