Graphic Design III Syllabus

                                    Syllabus

                                   AR 314 Graphic Design III
                                    Albertus Magnus College
                                     Jerry Nevins, Professor

                      Phone: 773-8546, office, 203 Aquinas Hall

                                                Contact

____________________________________________________

Introduction:

Graphic Design III is intended to be a continuation of the work begun in Graphic Design I and II and at its heart is about the skillful interaction of text forms and images into cohesive, clean designs.

With a variety of devices accessing websites and current standards for interactivity and motion graphics, most engaging websites are coded using HTML5 and CSS. As this is not a coding class, we will concentrate on designing websites using Photoshop first, then move onto working with templates in Adobe Dreaweaver and replacing pre-coded elements with your own content. Finally you will design your own original website pages using Photoshop and exporting them to Claude to be coded in HTML 5 and CSS 3. The core of the class is design communication — how to prepare and hand off a visual concept so it translates faithfully to a working medium. That's a skill that holds up regardless of what tool eventually replaces Claude or Dreamweaver or Photoshop

Technical Topics:

Introduction to Dreamweaver
Explore Squarespace, Weebly, Jimdo, Tumblr, Wix
Editing photographs for use in your projects
Scaling and setting up linked image galleries
Understand information hierarchies
Linking, hypertext, problem solving
Color design and integration across your site
Page layout and design for the monitor
Understanding FTP

-Plan a Web site design based on the function and content of the information to be delivered. Extend that understanding to helping solve client needs in the future.

-Create a site map that visually shows the plan of each page in your site and how the architecture of the site is conceived.

-Develop user-friendly pages with bandwidth-saving techniques and clear navigation systems.

Assignment I Research artist websites that appeal to you and take screen shots of 4 landing or home pages to archive in your Drive. Recreate them in terms of their structure and form but using your own content. Use Photoshop to design them. Work up several more using MidJourney AI v4. Create a fictional product with the AI as demonstrated in the following video.

Assignment II Using templates built into Adobe Dreamweaver and/or free website templates found on the web, replace the elements of the template with your own content. Create a 4 page interactive website with a home page, and about page, a resume page and a gallery page, showcasing your creative work from prior art classes.

Assignment III. Develop a comprehensive personal website which promotes you and your visual portfolio work you have done to date at Albertus. Include an About Me page, Resume and Gallery page with links out to individual pages of images.

Beginning in the spring of 2026, Claude AI and others have been able to create all the HTML5 and CSS3 syntax to work with in Dreamweaver 2025 directly. This is a huge gain for art students. You'll be designing your page first in Photoshop and then exporting elements to Claude, where Claude will then write all of the HTML code for you. Paste that into Dreamweaver's code view and edit from there.

There are a few free options for publishing your website. However, this would be without your own personalized domain name, such as johnsmith.com. This would complete the circle in learning how to publish websites properly. Claude has suggested these ideas.

For your context — art students who don't code — the easiest options, from simplest to more involved:

Easiest: Netlify Drop
No account required to start, no Git, no command line. Students literally drag their folder of HTML/CSS/image files onto a browser window at Netlify's drop page, and it's instantly live at a random *.netlify.app URL. Platforms like Netlify, GitHub Pages, and Cloudflare Pages all offer free static website hosting, often with global CDNs and HTTPS included. This is the best fit for a classroom — nothing to learn beyond "drag this folder here." UltimateWB

Also easy, and more durable: GitHub Pages
If all you need is free static webpage hosting, GitHub Pages is the simplest choice — you push your site to a repository and it's live. It requires a (free) GitHub account and a very basic intro to uploading files through GitHub's web interface (no command line needed if they just use the "upload files" button in a repo). The upside: it's a nice side-benefit for an art portfolio, since a GitHub account showing their work is genuinely useful later, and custom domains are supported at no cost. Appwrite DanubeData

Best if a site might get real traffic: Cloudflare Pages
Cloudflare serves roughly 20% of all web traffic and Pages runs on the same global network across 300+ edge locations, with unlimited bandwidth on the free tier — so if a student's portfolio piece ever gets shared widely, it won't hit a bandwidth cap the way GitHub Pages or Netlify might. HTML Pub

Netlify Drop for the simplest in-class deploy (zero setup), with GitHub Pages as the "if you want to keep building on this" option since it doubles as a portfolio host. All three support free custom domains later if a student wants to buy one down the road, so nobody's locked in.

I don't expect they'll get much traffic, and especially without their own domain name, it really is just a test bed to learn about live posting and etc. So it sounds like Netlify.

That fits well. Netlify Drop is the right call for a testbed like this — genuinely zero setup, so class time goes toward the design/coding lesson rather than account creation and configuration.

Quick outline for that last step:

Go to app.netlify.com/drop in a browser.
Drag the folder containing their index.html (and any image assets) onto the page.
Netlify assigns a live URL instantly (something like random-name-123.netlify.app).
That's it — the page is live and shareable.

A couple of small notes worth flagging...

The file needs to be named index.html for it to load automatically at the root URL.
If they update the page later, they can just drag the folder again to redeploy (or set up a free account to get a persistent site they can update, rather than a new random URL each time).
No sign-up is required for a one-off drop, but if they want the same URL to persist across edits, creating a free Netlify account and claiming the site takes it out of "temporary" status.

This is a solid, low-friction capstone step for the class.

Since Adobe upgraded Dreamweaver to HTML5 and advanced CSS, I felt that it has left my art students behind in the dust. The earlier version of CS5, which I use, is a WYSIWYG editor, and although crude, it still was manageable for art students. But ever since the upgrade by Adobe, my students have been unable to use it. This is a huge, huge new opportunity for them.

Recognized pedagogical value in design-to-development workflow separation

That makes a lot of sense, and it's a real shift, not just a workaround. The old WYSIWYG model — drag a box, type some text, drag an image, hit save — mapped naturally onto how a visual artist already thinks. Modern Dreamweaver moved away from that toward a code-first, framework-aware tool (CSS Grid, Flexbox, HTML5 semantic elements) built for people who already write code. That's a better tool for developers, but it stranded exactly the students you're teaching, since it now demands the coding literacy it used to let people skip.

What you've landed on effectively restores the old division of labor, but with the tool doing more of the heavy lifting than CS5's WYSIWYG engine ever could:

Students stay entirely in their native skill — visual composition, color, typography, layout — inside Photoshop, a tool they already know well.
The handoff point becomes a clean interface — a flattened mockup plus exported assets — rather than "learn to drag boxes in a code-adjacent editor."
The output is real, modern HTML5/CSS, not the bloated markup old WYSIWYG tools used to spit out, so what they end up with is something they could actually show a potential employer or hand to a developer without embarrassment.

It also reframes what you're teaching, which might be worth naming explicitly in the syllabus: the class becomes less about "learning software" and more about design communication — how to prepare and hand off a visual concept so it translates faithfully to a working medium. That's a skill that holds up regardless of what tool eventually replaces Claude or Dreamweaver or Photoshop, which feels like a more durable thing to teach art students than syntax they'll immediately forget.

Your grade will be determined by the following: 1. Regular attendance and studio participation (excessive absences may result in administrative drop) 2. Following directions in given assignments 3. Discussion of reading assignments 4. Degree of involvement and contribution in class discussions and critiques. 5. Understanding of visual concepts. 6. Professionalism. Come to class on time. Come prepared. Be respectful. 7. Completion of assignments on time. Meeting deadlines. 8. Mastery of media and technique. 9. Quality and improvement of your work. 10. Craftsmanship and presentation.

Attend all classes, care about your work, make progress in the medium, help and cooperate with your classmates, take risks, make mistakes. Your grade will be based on your willingness to achieve the above as well as a portfolio of the pieces outlined above, due at the end of the semester. Atendance is important.

Tradition of Honor: As a member of the Albertus Magnus College Community, each student taking this course agrees to uphold the principles of honor set forth by this community, to defend these principles against abuse or misuse and to abide by the regulations of the College. To this end, every student must write and sign the following statement at the end of each examination: "I declare the Honor Pledge."

Tradition of Respect: In our class: 1) Everyone is allowed to feel they can work and learn in a safe and caring environment; 2) Everyone learns about, understands, appreciates, and respects varied races, classes, genders, physical and mental abilities, and sexualities; 3) Everyone matters; 4) All individuals are to be respected and treated with dignity and civility; and 5) Everyone shares the responsibility for making our class, and the College, a positive and better place to live, work, and learn.

Accommodations for Special Needs: Albertus Magnus College is committed to ensuring that all qualified students with disabilities are afforded an equal opportunity to participate in and benefit from its programs and services in compliance with the Americans with Disabilities Act, as well as Section 504 of the Rehabilitation Act. The Office of Disability Services is responsible for the determination of appropriate accommodations for students who encounter barriers due to disability. Contact the Office of Disability Services at disabilityservices@albertus.edu or 203-672-6671 to schedule an intake interview and provide documentation. If the documentation supports your request for reasonable accommodations, the Office of Disability Services will provide you and your instructor with a Letter of Accommodation. Please discuss the accommodations with your instructors as early in your courses as possible

The Germain Center for Academic Success provides quality tutoring services to all students at Albertus Magnus College. Students can make appointments by booking through Navigate, emailing Germain-Center@albertus.edu, or calling 203-773-8590. The Germain Center is open for normal hours during the academic year (Monday-Thursday, 9:00 a.m.- 8:00 p.m.; Friday, 9:00 a.m.- 3:00 p.m.; Saturday, 1:00 p.m. - 3:00 p.m.) and abbreviated, virtual hours during the winter intersession and mod five. Further, Tutor.com (Online Tutoring 24/7) provides online tutoring for many subjects throughout the year -- even when the Germain Center is closed. Students can access Tutor.com through the link at the top of their eLearning pages. If students have any questions about tutoring, they can email Germain-Center@albertus.edu.

The Registrar's Office, Financial Aid, Human Resources, and the Business Office are now located in the former PGS suite, now called the Student Administrative Services Suite, found on the ground floor of Aquinas Hall.

If you or someone you know is concerned about, have experienced, or currently are experiencing sexual harassment, assault, power-based violence, or stalking, there are many resources available both on and off campus for students to utilize.Click on the link above or here

It is the responsibility of the student to officially drop or withdraw from a course. However, failure to attend a course for 14 calendar days may result in an administrative withdrawal from the course. The policies on course withdrawals and administrative withdrawals may be found online at http://www.albertus.edu/policy-reports/academic-policies-regulations-ug#apgr

Albertus Magnus College adheres to the definition of a credit hour in compliance with, and as defined by, NECHE commission policy.

Required Reading:
Numerous Photoshop tutorials online at http://www.adobe.com

Any mass market bookstore will have numerous Photoshop titles for sale in the computer section. Although not required you may want to pick up a book that fits your budget an learning style to have as a reference.

The Non-Designer's Design Book, Second Edition - Robin Williams (Author); Paperback

Niederst, Jennifer. Learning Web Design: A Beginner's Guide to HTML, Graphics, and Beyond. Sebastopol, CA:O'Reilly, 2003.

Click here for Germain Center (Tutoring)
Click here for Health and Wellness Services (Counseling)
Click here for Accessibility & Disability Services
Click here for Career & Professional Development



	AR 314 Advanced Graphic Design I
		Syllabus AR 314 Graphic Design III Albertus Magnus College Jerry Nevins, Professor Phone: 773-8546, office, 203 Aquinas Hall Contact ____________________________________________________ Introduction: Graphic Design III is intended to be a continuation of the work begun in Graphic Design I and II and at its heart is about the skillful interaction of text forms and images into cohesive, clean designs. With a variety of devices accessing websites and current standards for interactivity and motion graphics, most engaging websites are coded using HTML5 and CSS. As this is not a coding class, we will concentrate on designing websites using Photoshop first, then move onto working with templates in Adobe Dreaweaver and replacing pre-coded elements with your own content. Finally you will design your own original website pages using Photoshop and exporting them to Claude to be coded in HTML 5 and CSS 3. The core of the class is design communication — how to prepare and hand off a visual concept so it translates faithfully to a working medium. That's a skill that holds up regardless of what tool eventually replaces Claude or Dreamweaver or Photoshop Technical Topics: Introduction to Dreamweaver Explore Squarespace, Weebly, Jimdo, Tumblr, Wix Editing photographs for use in your projects Scaling and setting up linked image galleries Understand information hierarchies Linking, hypertext, problem solving Color design and integration across your site Page layout and design for the monitor Understanding FTP Goals of the Course: -Plan a Web site design based on the function and content of the information to be delivered. Extend that understanding to helping solve client needs in the future. -Create a site map that visually shows the plan of each page in your site and how the architecture of the site is conceived. -Develop user-friendly pages with bandwidth-saving techniques and clear navigation systems. -Integrate prior graphic design experience to the Web site design. -Develop Color Schemes using Adobe Kuler or Color Scheme Designer Albertus Magnus College Stylesheet ADOBE TV Dozens of Videos from Adobe on using Dreamweaver. Assignment I Research artist websites that appeal to you and take screen shots of 4 landing or home pages to archive in your Drive. Recreate them in terms of their structure and form but using your own content. Use Photoshop to design them. Work up several more using MidJourney AI v4. Create a fictional product with the AI as demonstrated in the following video. Take a look at this 3 1/2 min video to get started Assignment II Using templates built into Adobe Dreamweaver and/or free website templates found on the web, replace the elements of the template with your own content. Create a 4 page interactive website with a home page, and about page, a resume page and a gallery page, showcasing your creative work from prior art classes. Assignment III. Develop a comprehensive personal website which promotes you and your visual portfolio work you have done to date at Albertus. Include an About Me page, Resume and Gallery page with links out to individual pages of images. Beginning in the spring of 2026, Claude AI and others have been able to create all the HTML5 and CSS3 syntax to work with in Dreamweaver 2025 directly. This is a huge gain for art students. You'll be designing your page first in Photoshop and then exporting elements to Claude, where Claude will then write all of the HTML code for you. Paste that into Dreamweaver's code view and edit from there. Here is a step-by-step instruction for making this happen. From Photoshop to Live Webpage: Handoff Process Design your mockup in Photoshop, at the actual size the page will display (e.g., 1440px wide for desktop). Keep layers organized and named clearly (e.g., "logo," "hero-photo," "nav-icons") — this makes it easier for both you and Claude to identify what's what. Flatten and export the full mockup as a single reference image. File > Export > Export As → PNG or JPEG This is the "blueprint" — it shows the complete layout, spacing, colors, and typography. Export individual image assets separately. Anything that should appear in the final page as an actual image (not recreated in CSS) — logos, photos, icons, textured backgrounds — needs its own export: Select the layer(s) → File > Export > Export As (for one at a time), or Select multiple layers → File > Export > Layers to Files (for a batch export) Use PNG for anything needing transparency; JPEG for solid photos. Note your fonts. Write down the exact typeface name(s) used in the design. If it's a Google Font, say so — this ensures the live page matches your mockup instead of substituting a default font. Decide what should be responsive. A Photoshop file only shows one fixed layout. If you want the page to reflow on phones/tablets, say so explicitly — otherwise it will be built to match the desktop mockup exactly. Gather your content. If there's real body text, note it separately (don't rely on Lorem Ipsum placeholder unless that's intentional). Flag anything in the mockup that's just a placeholder so it's clear what's final vs. a stand-in. Upload to Claude: The flattened mockup image (Step 2) The individual asset files (Step 3) A short note listing: fonts (Step 4), responsive needs (Step 5), and any real content (Step 6) Review the coded result. Compare the live HTML page side-by-side with your original mockup. Note any differences and ask for specific revisions (e.g., "the header should be 20px taller," "the blue should match #1A2B3C exactly"). Save and test. Once finalized, save the HTML file with UTF-8 encoding (Dreamweaver's default) and open it directly in a browser before uploading to hosting, to confirm it displays correctly. Publishing your website There are a few free options for publishing your website. However, this would be without your own personalized domain name, such as johnsmith.com. This would complete the circle in learning how to publish websites properly. Claude has suggested these ideas. Weighed free hosting options for non-technical art students For your context — art students who don't code — the easiest options, from simplest to more involved: Easiest: Netlify Drop No account required to start, no Git, no command line. Students literally drag their folder of HTML/CSS/image files onto a browser window at Netlify's drop page, and it's instantly live at a random .netlify.app URL. Platforms like Netlify, GitHub Pages, and Cloudflare Pages all offer free static website hosting, often with global CDNs and HTTPS included. This is the best fit for a classroom — nothing to learn beyond "drag this folder here." UltimateWB Also easy, and more durable: GitHub Pages* If all you need is free static webpage hosting, GitHub Pages is the simplest choice — you push your site to a repository and it's live. It requires a (free) GitHub account and a very basic intro to uploading files through GitHub's web interface (no command line needed if they just use the "upload files" button in a repo). The upside: it's a nice side-benefit for an art portfolio, since a GitHub account showing their work is genuinely useful later, and custom domains are supported at no cost. Appwrite DanubeData Best if a site might get real traffic: Cloudflare Pages Cloudflare serves roughly 20% of all web traffic and Pages runs on the same global network across 300+ edge locations, with unlimited bandwidth on the free tier — so if a student's portfolio piece ever gets shared widely, it won't hit a bandwidth cap the way GitHub Pages or Netlify might. HTML Pub Netlify Drop for the simplest in-class deploy (zero setup), with GitHub Pages as the "if you want to keep building on this" option since it doubles as a portfolio host. All three support free custom domains later if a student wants to buy one down the road, so nobody's locked in. I don't expect they'll get much traffic, and especially without their own domain name, it really is just a test bed to learn about live posting and etc. So it sounds like Netlify. That fits well. Netlify Drop is the right call for a testbed like this — genuinely zero setup, so class time goes toward the design/coding lesson rather than account creation and configuration. Quick outline for that last step: Go to app.netlify.com/drop in a browser. Drag the folder containing their index.html (and any image assets) onto the page. Netlify assigns a live URL instantly (something like random-name-123.netlify.app). That's it — the page is live and shareable. A couple of small notes worth flagging... The file needs to be named index.html for it to load automatically at the root URL. If they update the page later, they can just drag the folder again to redeploy (or set up a free account to get a persistent site they can update, rather than a new random URL each time). No sign-up is required for a one-off drop, but if they want the same URL to persist across edits, creating a free Netlify account and claiming the site takes it out of "temporary" status. This is a solid, low-friction capstone step for the class. Since Adobe upgraded Dreamweaver to HTML5 and advanced CSS, I felt that it has left my art students behind in the dust. The earlier version of CS5, which I use, is a WYSIWYG editor, and although crude, it still was manageable for art students. But ever since the upgrade by Adobe, my students have been unable to use it. This is a huge, huge new opportunity for them. Recognized pedagogical value in design-to-development workflow separation That makes a lot of sense, and it's a real shift, not just a workaround. The old WYSIWYG model — drag a box, type some text, drag an image, hit save — mapped naturally onto how a visual artist already thinks. Modern Dreamweaver moved away from that toward a code-first, framework-aware tool (CSS Grid, Flexbox, HTML5 semantic elements) built for people who already write code. That's a better tool for developers, but it stranded exactly the students you're teaching, since it now demands the coding literacy it used to let people skip. What you've landed on effectively restores the old division of labor, but with the tool doing more of the heavy lifting than CS5's WYSIWYG engine ever could: Students stay entirely in their native skill — visual composition, color, typography, layout — inside Photoshop, a tool they already know well. The handoff point becomes a clean interface — a flattened mockup plus exported assets — rather than "learn to drag boxes in a code-adjacent editor." The output is real, modern HTML5/CSS, not the bloated markup old WYSIWYG tools used to spit out, so what they end up with is something they could actually show a potential employer or hand to a developer without embarrassment. It also reframes what you're teaching, which might be worth naming explicitly in the syllabus: the class becomes less about "learning software" and more about design communication — how to prepare and hand off a visual concept so it translates faithfully to a working medium. That's a skill that holds up regardless of what tool eventually replaces Claude or Dreamweaver or Photoshop, which feels like a more durable thing to teach art students than syntax they'll immediately forget. Academic Expectations: GRADING: Sustained effort Attendance Progression of skill Participation Your grade will be determined by the following: 1. Regular attendance and studio participation (excessive absences may result in administrative drop) 2. Following directions in given assignments 3. Discussion of reading assignments 4. Degree of involvement and contribution in class discussions and critiques. 5. Understanding of visual concepts. 6. Professionalism. Come to class on time. Come prepared. Be respectful. 7. Completion of assignments on time. Meeting deadlines. 8. Mastery of media and technique. 9. Quality and improvement of your work. 10. Craftsmanship and presentation. Attend all classes, care about your work, make progress in the medium, help and cooperate with your classmates, take risks, make mistakes. Your grade will be based on your willingness to achieve the above as well as a portfolio of the pieces outlined above, due at the end of the semester. Atendance is important. Tradition of Honor: As a member of the Albertus Magnus College Community, each student taking this course agrees to uphold the principles of honor set forth by this community, to defend these principles against abuse or misuse and to abide by the regulations of the College. To this end, every student must write and sign the following statement at the end of each examination: "I declare the Honor Pledge." Tradition of Respect: In our class: 1) Everyone is allowed to feel they can work and learn in a safe and caring environment; 2) Everyone learns about, understands, appreciates, and respects varied races, classes, genders, physical and mental abilities, and sexualities; 3) Everyone matters; 4) All individuals are to be respected and treated with dignity and civility; and 5) Everyone shares the responsibility for making our class, and the College, a positive and better place to live, work, and learn. Accommodations for Special Needs: Albertus Magnus College is committed to ensuring that all qualified students with disabilities are afforded an equal opportunity to participate in and benefit from its programs and services in compliance with the Americans with Disabilities Act, as well as Section 504 of the Rehabilitation Act. The Office of Disability Services is responsible for the determination of appropriate accommodations for students who encounter barriers due to disability. Contact the Office of Disability Services at disabilityservices@albertus.edu or 203-672-6671 to schedule an intake interview and provide documentation. If the documentation supports your request for reasonable accommodations, the Office of Disability Services will provide you and your instructor with a Letter of Accommodation. Please discuss the accommodations with your instructors as early in your courses as possible The Germain Center for Academic Success provides quality tutoring services to all students at Albertus Magnus College. Students can make appointments by booking through Navigate, emailing Germain-Center@albertus.edu, or calling 203-773-8590. The Germain Center is open for normal hours during the academic year (Monday-Thursday, 9:00 a.m.- 8:00 p.m.; Friday, 9:00 a.m.- 3:00 p.m.; Saturday, 1:00 p.m. - 3:00 p.m.) and abbreviated, virtual hours during the winter intersession and mod five. Further, Tutor.com (Online Tutoring 24/7) provides online tutoring for many subjects throughout the year -- even when the Germain Center is closed. Students can access Tutor.com through the link at the top of their eLearning pages. If students have any questions about tutoring, they can email Germain-Center@albertus.edu. PGS offices are now located on the first floor of Aquinas Hall. The Registrar's Office, Financial Aid, Human Resources, and the Business Office are now located in the former PGS suite, now called the Student Administrative Services Suite, found on the ground floor of Aquinas Hall. Prevention of Power-Based Violence Resources If you or someone you know is concerned about, have experienced, or currently are experiencing sexual harassment, assault, power-based violence, or stalking, there are many resources available both on and off campus for students to utilize.Click on the link above or here WITHDRAWING FROM A COURSE: It is the responsibility of the student to officially drop or withdraw from a course. However, failure to attend a course for 14 calendar days may result in an administrative withdrawal from the course. The policies on course withdrawals and administrative withdrawals may be found online at http://www.albertus.edu/policy-reports/academic-policies-regulations-ug#apgr Albertus Magnus College adheres to the definition of a credit hour in compliance with, and as defined by, NECHE commission policy. Required Reading: Numerous Photoshop tutorials online at http://www.adobe.com ADOBE TV Dozens of Videos from Adobe on using Dreamweaver. Any mass market bookstore will have numerous Photoshop titles for sale in the computer section. Although not required you may want to pick up a book that fits your budget an learning style to have as a reference. Suggested Reading: The Non-Designer's Design Book, Second Edition - Robin Williams (Author); Paperback Niederst, Jennifer. Learning Web Design: A Beginner's Guide to HTML, Graphics, and Beyond. Sebastopol, CA:O'Reilly, 2003. Prevention of Power-Based Violence Resources If you or someone you know is concerned about, have experienced, or currently are experiencing sexual harassment, assault, power-based violence, or stalking, there are many resources available both on and off campus for students to utilize.Click on the link above or here Click here for Germain Center (Tutoring) Click here for Health and Wellness Services (Counseling) Click here for Accessibility & Disability Services Click here for Career & Professional Development Back to Syllabi Home
Website Design Awards http://www.websitedesignawards.com