Category Archives: Homework

09 Call to Action

Posted on by

A call to action can bring success to your web presence. If you use the right words, you can inspire your audience to take action — like download your resume, or project, etc. If it does not stand out, your audience may not notice it.

What is a call to action?

A call to action (or CTA) is a prompt designed to inspire the target audience of a marketing campaign to take a desired action. It encourages people to click on a link, leave a social media comment, visit an online store, make a purchase, etc. It can be a Text link, a Button, or even plain text without a link. “Buy Now” or “Download Now” are typical examples of simple calls to action.

A good call to action triggers the user to do what you wish them to do. Users often need some direction as to what to do next. It is possible to use several call to actions to engage the user’s possible options. A call to action is not the menu system, which represents the site architecture.

A call to action uses short, strong, and persuasive language. It needs to call up a value proposition that is relevant and clear. It should entice the user, by provoking emotion or enthusiasm. A good call to action engages the audience with a narrative they already support and believe in, like exclusivity, as many people fear missing out. Last chance, limited lime, or urgent are used to get people to act.

A call to action is often the first thing you see, but it can be at the end of a story, for example. Wherever it appears, a call to action provides your reader with an actionable task.

It starts with a verb. Strong verbs that directly engage users for commerce are buy, now, shop, save, For a non profit, donate, volunteer, give, support. For a newsletter or activity, subscribe, join. There are many strong verbs, like learn more, see how, find out, click here, continue, etc. A Call to Action is usually very short, but it can run longer, too, such as “Subscribe today so you’ll never miss a post.”

A list of strong verbs for different calls.

  • Ecommerce: Buy, Shop, Order, Reserve, Save, Add to Cart, Pick, View
  • Non-profit: Donate, Commit, Volunteer, Adopt, Give, Support
  • Newsletter or community: Subscribe, Join, Sign Up, Refer,
  • Freebie giveaway: Download, Get, Grab, Claim, Take advantage of
  • General: Learn More, See More, See How, Start, Find Out, Check it Out, Click here, Continue, Swipe Up

The possibilities are endless.

Posted on by

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">




Parsons 2017 Fall Web Design





how do I create a responsive three column responsive web page using css grid.  

To create a three-column responsive web page using CSS grid, you can follow these steps:

  1. Create the HTML structure:

<div class=“grid-container”>

  <div class=“grid-item”>Column 1</div>

  <div class=“grid-item”>Column 2</div>

  <div class=“grid-item”>Column 3</div>

</div>

  1. Add CSS to create the grid container and set the number of columns:

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 20px;

}

This will create a grid container with three columns of equal width and a gap of 20 pixels between them.

  1. Add CSS to make the grid responsive:

@media screen and (max-width: 768px) {

  .grid-container {

    grid-template-columns: 1fr;

  }

}

This will change the grid to a single column when the screen size is less than or equal to 768 pixels.

  1. Add CSS to style the grid items:

.grid-item {

  background-color: #fff;

  padding: 20px;

  text-align: center;

  font-size: 20px;

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);

}

This will add some basic styling to the grid items, including a white background, padding, center alignment, font size, and a box shadow.

Here’s the complete CSS code:

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 20px;

}

@media screen and (max-width: 768px) {

  .grid-container {

    grid-template-columns: 1fr;

  }

}

.grid-item {

  background-color: #fff;

  padding: 20px;

  text-align: center;

  font-size: 20px;

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);

}

Note that you can customize the CSS to suit your specific needs and design preferences.

Onno:

great! now create a portfolio web page for a design student looking for employment

Sure! Here’s an example of a portfolio web page for a design student looking for employment:

HTML code:

<!DOCTYPE html>

<html lang=“en”>

  <head>

    <meta charset=“UTF-8”>

    <title>Design Portfolio | Jane Doe</title>

    <link rel=“stylesheet” href=“style.css”>

  </head>

  <body>

    <header>

      <h1>Jane Doe</h1>

      <nav>

        <ul>

          <li><a href=“#about”>About</a></li>

          <li><a href=“#work”>Work</a></li>

          <li><a href=“#contact”>Contact</a></li>

        </ul>

      </nav>

    </header>

    <main>

      <section id=“about”>

        <h2>About Me</h2>

        <p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>

        <img src=“profile-pic.jpg” alt=“Jane Doe”>

      </section>

      <section id=“work”>

        <h2>My Work</h2>

        <div class=“grid-container”>

          <div class=“grid-item”>

            <img src=“project1.jpg” alt=“Project 1”>

            <h3>Project 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“project2.jpg” alt=“Project 2”>

            <h3>Project 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“project3.jpg” alt=“Project 3”>

            <h3>Project 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

        </div>

      </section>

      <section id=“contact”>

        <h2>Contact Me</h2>

        <form action=“#” method=“post”>

          <label for=“name”>Name:</label>

          <input type=“text” id=“name” name=“name”>

          <label for=“email”>Email:</label>

          <input type=“email” id=“email” name=“email”>

          <label for=“message”>Message:</label>

          <textarea id=“message” name=“message”></textarea>

          <button type=“submit”>Send Message</button>

        </form>

      </section>

    </main>

    <footer>

      <p>&copy; 2023 Jane Doe</p>

    </footer>

  </body>

</html>

CSS code:

/* Global styles */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

body {

  font-family: Arial, sans-serif;

  font-size: 16px;

  line-height: 1.5;

}

h1, h2, h3 {

  font-family: ‘Montserrat’, sans-serif;

}

a {

  color: #333;

  text-decoration: none;

}

a

onno:

Can you use images from the web to make this attractive?

Sure! Here’s an updated HTML code for the portfolio web page, with image URLs from the web:

<!DOCTYPE html>

<html lang=“en”>

  <head>

    <meta charset=“UTF-8”>

    <title>Design Portfolio | Jane Doe</title>

    <link rel=“stylesheet” href=“style.css”>

  </head>

  <body>

    <header>

      <h1>Jane Doe</h1>

      <nav>

        <ul>

          <li><a href=“#about”>About</a></li>

          <li><a href=“#work”>Work</a></li>

          <li><a href=“#contact”>Contact</a></li>

        </ul>

      </nav>

    </header>

    <main>

      <section id=“about”>

        <h2>About Me</h2>

        <p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>

        <img src=“https://picsum.photos/400/400?random=1” alt=“Jane Doe”>

      </section>

      <section id=“work”>

        <h2>My Work</h2>

        <div class=“grid-container”>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=2” alt=“Project 1”>

            <h3>Project 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=3” alt=“Project 2”>

            <h3>Project 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=4” alt=“Project 3”>

            <h3>Project 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

        </div>

      </section>

      <section id=“contact”>

        <h2>Contact Me</h2>

        <form action=“#” method=“post”>

          <label for=“name”>Name:</label>

          <input type=“text” id=“name” name=“name”>

          <label for=“email”>Email:</label>

          <input type=“email” id=“email” name=“email”>

          <label for=“message”>Message:</label>

          <textarea id=“message” name=“message”></textarea>

          <button type=“submit”>Send Message</button>

        </form>

      </section>

    </main>

    <footer>

      <p>&copy; 2023 Jane Doe</p>

    </footer>

  </body>

</html>

Note that the src attributes of the img elements now point to image URLs from the web, obtained using the Lorem Picsum service.

Onno:

No background picture to make eveything unified? How about design elements. Can we do it in 3 columns?

Sure! Here’s an updated HTML code for the portfolio web page with a background image, design elements, and a three-column layout using CSS Grid:

<!DOCTYPE html>

<html lang=“en”>

  <head>

    <meta charset=“UTF-8”>

    <title>Design Portfolio | Jane Doe</title>

    <link rel=“stylesheet” href=“style.css”>

  </head>

  <body>

    <header>

      <h1>Jane Doe</h1>

      <nav>

        <ul>

          <li><a href=“#about”>About</a></li>

          <li><a href=“#work”>Work</a></li>

          <li><a href=“#contact”>Contact</a></li>

        </ul>

      </nav>

    </header>

    <main>

      <section id=“about” class=“section”>

        <div class=“grid-container”>

          <div class=“grid-item”>

            <h2>About Me</h2>

            <p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=1” alt=“Jane Doe”>

          </div>

        </div>

      </section>

      <section id=“work” class=“section”>

        <h2>My Work</h2>

        <div class=“grid-container”>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=2” alt=“Project 1”>

            <h3>Project 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=3” alt=“Project 2”>

            <h3>Project 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=4” alt=“Project 3”>

            <h3>Project 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

        </div>

      </section>

      <section id=“contact” class=“section”>

        <h2>Contact Me</h2>

        <form action=“#” method=“post”>

          <label for=“name”>Name:</label>

          <input type=“text” id=“name” name=“name”>

          <label for=“email”>Email:</label>

          <input type=“email” id=“email” name=“email”>

          <label for=“message”>Message:</label>

          <textarea id=“message” name=“message”></textarea>

          <button type=“submit”>Send Message</button>

        </form>

      </section>

    </main>

    <footer>

      <p>&copy; 2023 Jane Doe</p>

    </footer>

  </body>

</html>

And

/* Reset default margin and padding */

* {

  margin: 0;

  padding: 0;

}

/* Set the background image */

body {

  background-image: url(“https://picsum.photos/1920/1080?random=5”);

  background-size: cover;

}

/* Style the header */

header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px;

}

h1 {

  font-size: 2.5rem;

  font-weight: bold;

  color: #fff;

}

nav ul {

  display: flex;

  list-style: none;

}

nav li {

  margin: 0 20px;

}

nav a {

  color: #fff;

  text-decoration: none;

  font-size: 1.2rem;

  font-weight: bold;

}

/* Style the main content */

main {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 50px 20px;

}

.section {

  width: 100%;

  margin-bottom: 50px;

}

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}

.grid-item {

  background-color: #fff;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

img {

  max-width: 100%;

  height: auto;

  margin-bottom: 20px;

  border-radius: 5px;

}

h2 {

  font-size: 2rem;

  font-weight: bold;

  color: #fff;

  margin-bottom: 20px;

}

h3 {

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 10px;

}

p {

  font-size: 1.2rem;

  line-height: 1.5;

  margin-bottom: 20px;

}

form label {

  font-size: 1.2rem;

  font-weight: bold;

  margin-bottom: 10px;

  display: block;

}

form input,

form textarea {

  padding: 10px;

  margin-bottom: 20px;

  border-radius: 5px;

  border: none;

  font-size: 1.2rem;

}

form button {

  background-color: #333;

  color: #fff;

  padding: 10px 20px;

  border-radius: 5px;

  border: none;

  font-size: 1.2rem;

  font-weight: bold;

  cursor: pointer;

  transition: background-color 0.2s ease-in-out;

}

form button:hover {

  background-color: #555;

}

This should style the HTML code I provided earlier and create a visually appealing portfolio web page with the requested design elements.

Onno:

Nw could you make it responsive so it looks good on a smart phone?

Sure! Here’s the updated CSS code with media queries to make the portfolio web page responsive for smaller screens such as smartphones:

/* Reset default margin and padding */

* {

  margin: 0;

  padding: 0;

}

/* Set the background image */

body {

  background-image: url(“https://picsum.photos/1920/1080?random=5”);

  background-size: cover;

}

/* Style the header */

header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px;

}

h1 {

  font-size: 2.5rem;

  font-weight: bold;

  color: #fff;

}

nav ul {

  display: flex;

  list-style: none;

}

nav li {

  margin: 0 20px;

}

nav a {

  color: #fff;

  text-decoration: none;

  font-size: 1.2rem;

  font-weight: bold;

}

/* Style the main content */

main {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 50px 20px;

}

.section {

  width: 100%;

  margin-bottom: 50px;

}

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}

.grid-item {

  background-color: #fff;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

img {

  max-width: 100%;

  height: auto;

  margin-bottom: 20px;

  border-radius: 5px;

}

h2 {

  font-size: 2rem;

  font-weight: bold;

  color: #fff;

  margin-bottom: 20px;

}

h3 {

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 10px;

}

p {

  font-size: 1.2rem;

  line-height: 1.5;

  margin-bottom: 20px;

}

form label {

  font-size: 1.2rem;

  font-weight: bold;

  margin-bottom: 10px;

  display: block;

}

form input,

form textarea {

  padding: 10px;

  margin-bottom: 20px;

  border-radius: 5px;

  border: none;

  font-size: 1.2rem;

}

form button {

  background-color: #333;

  color: #fff;

  padding: 10px 20px;

  border-radius: 5px;

  border: none;

  font-size: 1.2rem;

  font-weight: bold;

  cursor: pointer;

  transition: background-color 0.2s ease-in-out;

}

form button:hover {

  background-color: #555;

}

/* Media queries for smaller screens */

@media screen and (max-width: 768px) {

  header {

    flex-direction: column;

    align-items: center;

  }

  nav ul {

    margin-top: 20px;

  }

  .grid-container {

    grid-template-columns: repeat(1, 1fr);

  }

  

  .grid-item {

    margin-bottom: 30px;

  }

  h1 {

    font-size: 2rem;

    text-align: center;

  }

  h2 {

    font-size: 1.5rem;

  }

  h3 {

    font-size: 1.2rem;

  }

  p {


Site Links

Posted on by

Recorded Lectures

Posted on by

Lectures are recoded and will remain up for 30 days. Copy the pass code and click the link. You may wish to download the lecture if you think you will refer back to it, or if you were absent that day. 30 days goes by quickly and only the last three or four lectures are available. If you wish to refer back to the material covered in the first two lectures, there is a makeup lecture available.

I will not save any lectures after the 5th, because only these lectures contain the fundamental issues you need to be familiar with to understand everything else.

Week 5:

Recorded: Week 5 Passcode: $gQpG!M9m5

Week 4:

Recorded: Week 4 Passcode: M8La8GnxQ*

Week 3:

Recorded: Week 3 Passcode: Je89xVCS=u

Week 2:

Recorded: Week 2 Passcode: s##2PqB8bv

12 Homework

Posted on by
Reply

Homework for the Final

  1. Finish your website.
  2. Test it.

Homework for the Unit

  1. Create a page featuring multimedia, including canvas and video.
  2. Ideally, you are able to incorporate canvas and video in the final, but the final does not have to include multimedia.
  3. A link to the multimedia page has to be on the work-sheet.

11 Homework

Posted on by
Reply

Homework for the Final

  1. Develop and document the information architecture of the finished site in your work-sheet.
  2. As You develop the navigation, create it as a PHP include.
  3. Test it.

Homework for the Unit

  • Replace the navigation of your final with a PHP include.
  • create a JavaScript/jQuery script for use in your final website.

10 Homework

Posted on by
Reply

Homework for the Final

  1. Your worksheet needs to reflect your final project, and it is due today (the work-sheet, not the final, with research, wireframe, comp and user experience profiles, including links where necessary).
  2. Create a mockup and develop a look that sells your project. This can build upon the CSS3 assignment from last week.
  3. Translate the structure of the comp into a wireframe
  4. Develop coherent user experience profiles.

Homework for the Unit

  • Using these new CSS3 properties, create an animatics or animated page that sells your project.
  • It’s possible to animate the elements created in the previous homework.
  • Make sure that you use at least two transforms, transitions and an animation.
  • Ideally you animate everything by hand, but I will understand if you use Adobe Edge.
  • A link to this promotional material has to be on the work-sheet.

09 Homework

Posted on by
Reply

Homework for the Final

  1. You should know what you are selling on the final web site, have done the research, developed the brand and have given the target audience some thought. All of this needs to be documented in the worksheet.
  2. Develop a potential user portfolio and flush out what they would want. Guesstimate their potential browsing habits. Provide an idealized user profile in the worksheet.
  3. As you plan your web site, read through the peer review questions. Let these questions help you in developing your website, as this is the criteria by which the final will be evaluated.
  4. Develop a photoshop comp of the opening page that incorporates both the evaluation criteria of the review questions and the many of the CSS3 techniques covered today. Now that you have an idea of what CSS3 can do, do it!

Homework for the Unit

  1. Use these new CSS3 properties to pull together a collateral piece for your project. It can be a sales poster, an online brochure, or any other kind of promotional material using at least five techniques discussed in class. Include blends, multiple background images, rounded corners, shadows, transparency, etc.

    Visit this Design Festival article to get you started.

08 Homework

Posted on by
Reply

The Final Project

prepare a pitch of your final website in a new 7-step worksheet dedicated to the final.

  1. Introduce the idea.
  2. What are you selling?
  3. This is the problem your website has to solve?
  4. How will the website solve the problem?
  5. Is the proposal sound?
  6. How it is different from other, similar websites?
  7. How does it addresses the target audience?
  8. Write down the problem you are solving and how the website will solve the problem. Include websites of similar products or competing products that helped you form your decision as to how to proceed in the work-sheet, as I will compare the pitch to the final website.
  9. You are allowed to change the problem and how you plan on solving it as time goes on. Add this to the worksheet, as this is to track your creative process.

Homework for the Unit

  1. You are to make your portfolio responsive.
  2. It is up to you to finish it.
  3. I want to see the core pages responsive to one media query, targeting small screens like the iphone.

The Webby Awards use criteria to evaluate web sites. You should be aiming for something similar.

Content
Content is the information provided on the site. It is not just text, but music, sound, animation, or video — anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it’s been developed for the Web because it’s clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.
Structure and Navigation
Structure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site’s content.
Visual Design
Visual design is the appearance of the site. It’s more than just a pretty homepage and it doesn’t have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.
Functionality
Functionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.
Interactivity
Interactivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate.
It’s input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It’s make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren’t reading a magazine or watching TV anymore.
Overall Experience
Demonstrating that sites are frequently more — or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.