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
Week 10
Narrative Scroll Critique
Hello class, I am looking forward to seeing your work for the narrative scroll project. We will have 15 minutes at the beginning of class to resolve any minor issues before presentation. Please check the project requirements on our class site (des303.net) and make sure you have included all of the listed features required for completion of the project.
Fancybox is a Jquery Library that allows u to create clean and professional scroll galleries of images. We willcover the set up of a fancybox gallery using Jquery.
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.
Create a single page scrolling website that communicates a narrative or gives step-by-step instructions for some process or procedure. The design should take into account both image and text, and respond to the pacing and structure of the source material.
Requirements
Your scrolling site must effectively and correctly implement:
Effective use of HTML5 Semantic Tag elements (Use both the HTML Validator and CSS Validator)
On-page bookmark links
At least one (1) custom font using the CSS3 @font-face Rule (or Google Fonts)
At least one (1) CSS3 transform property
At least one (1) CSS3 transition property
At least one (1) CSS3 @keyframes Rule animation
Process Deliverables
Written Project Proposal In-class assignment- Week 8 (minimum 300 words, printed): Describe your single page scrolling or parallax concept and your user experience goals for the project.
Research References In-class assignment- Week 8 (printed): Provide a list of at least five (5) interesting web sites that you cite as inspiration for the project, either visually or functionally. For each website, provide a brief two sentence statement of what specifically you find inspirational.
Mood Board In-class assignment-Week 8 (printed, full-color): Create a visual research “Mood Board” with at least ten (10) reference images. These images should start to suggest the mood/tone of your project, exploring design components such as possible color palettes, typefaces, and descriptive adjectives.
Project 2: Image Essay Gallery
Details
Gather 20–30 images as a set or series that tells a story, conveys a message, or evokes a series of emotions in the viewer. The images can be photographic, illustrative, digital, or created through some other means. These can be images that you have created, or they can be appropriated, but you must credit the original creator of the images if you are using appropriated images.
This will be an in-class project based on our fancybox demonstration
Interactive Photo Gallery Requirements: A jQuery photo lightbox library (i.e. FancyBox) or photo carousel library (i.e. Fotorama)
Final Porfolio Project
Details
Design a website to showcase your web design portfolio (feel free to use this website as a showcase for projects from other classes, as well, such as graphic design, fine art, photography, music, etc.)
This website should replace your current index.html file in your root directory, and it must include:
Professional practice standards (functional directory folder structure, no broken links, bandwidth-appropriate file sizes)
Your personal ASCII logo/brand hidden in in the on all pages
Flexible elements (dimensions specified in percentage % units or viewport width vw and viewport height vh units)
Interactive components (pseudo-class :hover)
CSS3 @font-face Rule embedded fonts (at least two)
CSS3 @media Rule media query breakpoints (at least two)
CSS3 transform Property (at least one)
CSS3 transition Property (at least one)
CSS3 @keyframes Rule animation (at least one)
jQuery Library (at least one; either a snippet of jQuery code you’ve written yourself, or an open-source library, such as Fancybox)
A logo for your design “studio”
Page anchor links for all class projects, demos, and exercises. Each project link should have an image and a statement of what the project is about.
An “About” yourself page or section, with a biographical statement and a brand graphic or profile picture
A “Links” page with at least five (5) links to inspirational and reference websites
Your final project website must be uploaded at the beginning of your scheduled final exam (Friday, May 2nd). Late submissions will not be accepted.
Syllabus
Course Description
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)
