1. Nested boxes
Practicing counting total pixels:
CSS Handout , EXAMPLES OF BOX MODEL PROPERTIES (page 15 bottom)
(Don't forget *{box-sizing:border-box;} )
2. Float
Floating is often used to push an image to one side or another, while having the text of a paragraph wrap
Note: You should always set a width on floated items (except if applied directly to an image - which has implicit width)
Video:
CSS Float and Clear Explained
CSS float Property (Exercise down the page)
Example with an image (for example
this one)
CSS code
.left_float {
float: left;
}
HTML code
<img src="SomeImage.jpg" class="left_float">
<p>Text text text text … </p>
Clear property
Elements after the floating element will flow around it. To avoid this, use the clear property
Inline CSS example:
<div style=”clear: both;”> </div>
3. Project Landing Page
For group of two students
A landing page is a standalone web page, created for a specific marketing campaign, that a visitor "lands" on after clicking a link. It lacks the multiple navigation options and other features of a traditional homepage.
Key elements include:
- a strong and clear headline,
- compelling copy (one paragraph is enough),
- benefits: explains the advantages of the product or service,
- high-quality visuals,
- a single call-to-action (CTA),
- a button leading to the main website.
It also can have social proof: uses testimonials, reviews, or other forms of proof to build trust.
Note:
An approximate standard desktop landing page width is 940–960 pixels and height 720 pixels, if you don’t want the user to scroll, otherwise is not standardized and should be as long as needed for the content (but not too long).
Landing Pages Examples
ASSIGNMENT:
Create a landing page, advertising Touro University Digital Multimedia Design program or/and Master of Science in UX/UI and Interaction Design
STEPS:
First, as always, do researches:
Subject research
Similar projects examples for inspiration
1. Creative brief:
- Choose the target audience
- Define your landing page goal.
- Craft a headline that grabs attention.
- Write copy that converts.
"Copy that converts" refers to persuasive writing that successfully motivates a reader to take a specific, desired action, such as making a purchase, signing up for a service, or downloading a guide. Writing a good copy is all about marketing what you’re offering by using the power of words.
- Design for simplicity.
- Create irresistible action-driven CTAs.
- Use visuals strategically.
2. Write an objective statement
3. Make 3 different hi-fi wireframes
4. Choose one and make a mock-up
5. Create a landing page with coding (use internal CSS)
GRADE CALCULATIO:
10%: High-fidelity wireframes (tree variations)
10%: Mock-Up
30%: Website professional design, including typography, headline, body copy, etc.
20%: Creativity, originality
30%: Correct valid HTML/CSS coding, working properly
Total 100%
INFORMATION:
Touro University has several design-related programs, primarily in the areas of Digital Multimedia Design and Web and Multimedia Design, offered through its Lander College of Arts and Sciences and Graduate School of Technology (GST) respectively. These departments provide a range of courses covering principles of design, web development, interactive design, and professional portfolio creation, with programs designed for both undergraduate and graduate students.
Lander College of Arts and Sciences
Major: Digital Multimedia Design (for undergraduate women at the Sarah Hartman Women's College).
Focus: A comprehensive program that includes required courses in principles of design, layout, image processing, and web/multimedia design.
Outcomes: Graduates are prepared for careers as art directors, web designers, and other digital media roles, and have professional portfolios ready for employers or graduate school.
Related Programs: The Art Department offers studio art courses, and the Visual Art minor includes electives like drawing, painting, and 3D design.
Graduate School of Technology (GST)
Programs:
Master of Science (MS) in UX/UI and Interaction Design: Focuses on user-centered design principles, research techniques, and hands-on experience in prototyping, motion graphics, and video/audio production.
Master of Arts (MA) in Web and Multimedia Design: Prepares students for roles like web designer, branding specialist, or art director in the digital design field.
Focus: These programs emphasize developing practical, industry-ready skills for careers in digital design, user experience, and multimedia.
Related Programs: The GST also offers an Advanced Certificate in Web and Digital Design.
ellenbaryshev@gmail.com.