05 AI for Layout

Posted on February 22, 2024 by onno

using artificial intelligence to help you create your website, is not as straightforward as asking a simple question. It will answer in code, but you will need to know how to place the code, and how to fill it in, so it looks like the website you’re hoping to make. That said, it’s easy enough to use it to create various examples of what you are trying to work with, and can be an incredible learning aid. That’s why I’m pushing you to use AI to help you, because, if you become a better coder, and understand what this all means, because of it, that’s the answer I’m looking for. Be liberal in the the questions you ask and request corrections, to get the code you want.

ChatGPT 3.5

I’ve had some luck with ChatGPT 3.5 and 4, but it’s a mixed bag. Not everything works, and you have to know what you are doing before you can understand what does and does not work, so use it, but beware. ChatGPT 4 is better than 3.5, but I let my subscription expire, and I can’t expect everyone to spend the $20 a month on the newer version, so this uses 3.5.

Open up a CodePen and put in the HTML, CSS, and Javascript that the program provides. My recommendations is to build modular, meaning first get the general outlines working, then ask it to build smaller things. It does not do well to put the whole thing together, so I am not worried about you not leaning how to code. You have to know enough about what you are doing, to make this work.

What follows are a number of prompts. The first one is pretty lame, but I remain too general. I try to tighten it up, and make it more interesting, but as you can see, I never get beyond a simple wireframe. This may help you get started, and I think that, by looking at the code it produces, you get a better idea of how the code works, but I think, in the end, you will have to code your website yourself, maybe with some AI, but it sure will not create your website for you.

First AI Example I need a really fantastic dynamite pulsating illustration portfolio website that can sell my illustrations to all kinds of audiences, from hip to corporate. Make it magical.

See the Pen
AI#3 by onno de jong (@onno)
on CodePen.

Second AI Example Can you create a responsive illustration portfolio website using CSS grid? I would like it to have 6 sections for different styles . Please color the background of each section a different color.

See the Pen
AI#2 by onno de jong (@onno)
on CodePen.

Third AI example Can you help me create a complete web page using different layout strategies. This is for an illustration portfolio and it needs to have several sections. I would prefer if the menu were fixed or used sticky positioning, and that the sections are animated and slide from one the next when I press the menu. Make each section’s background a different color.

See the Pen
Untitled by onno de jong (@onno)
on CodePen.

08 Engage AI Project

Posted on November 1, 2023 by onno

You have finished the portfolio. Congratulations. Now that you have learned to code, You need to go to the next level. For that reason, I have created this afterglow project, too continue the energy you put into the website you just created. You are to create your portfolio (or any other website) using AI or any other technology that helps you build websites. Now you know how to code, and put things together. I could not have asked you to ask AI before you learned how to code, for you would not have been able to integrate that code. Now that you understand what it takes to build a website, you are ready to rely on AI or any other technology to help complete the next one for you.
If it creates code, you have to understand what it is doing to integrate it. That is the purpose of this assignment. This is a trial run for the final. I want you to use what takes to get you to the next level to complete that project.
This is not as easy as asking AI to create your website. Be in the driver’s seat. Ask it to code certain things, and then integrate AI code goodness back into your self-promotion website 2.0. Use any source for code you find on the web or AI, as long as you can integrate it back into a fully functioning website. All I ask is that you document where you got the code from. Does it have to be my portfolio? No. You can create a website about anything you like. When is it due? I don’t know yet, but before the final, not after.

03 Container Queries

Posted on August 1, 2023 by onno

Container queries enable you to apply styles to an element based on the size of the element’s container. While Media Queries ushered in an ethic of responsive design, it is not granular. The entire page has to go through the viewport breaking points, which is fine for the major design elements, but not so good for the many tweaks that go into designing a responsive web page. Finessing the design for different devices often requires many breakpoints. Container queries allow child elements to react to changes in their parent element size, making it possible to finesse every element of the page’s responsive design. You can now increase or decrease padding, change font sizes, add or remove background images, or completely change the display property and orientation of child elements, for example, based on the size of the parent.

How to set up the Parent/Container

Target the element you wish to target as a containment query by using class or id.
Set up the containment context for the element by setting the container-type property. The values are size, which is the logical properties description that describes both height and width, inline-size, which means only width, and normal, which means neither height nor width, but the element is a query container that can receive container style queries. Because we most often think in terms of width, inline-with is the easiest value to.
Name your container, using the container-name property. You can give it more than one name (separated by a space), in case you wish to target it with more than one @container rule. Chose an context appropriate name.
The container shorthand does both: container: Charley / inline-size.
Finally, target the named container @container Charley (min-width: 700px) { } It works just like media queries, so you already understand how to implement those, it is easy to style the child element definitions.The styles are applied when the conditions are true.
The container elements should be beneath the original style definitions describing the element, to override the existing style.

Container Queries specific measurements

Measurements for the viewport are standardized. How wide is it, how high is it, etc. Container queries have similar measurements requirements, and have corresponding measurements:

cqw (container query width) – 1% of the container’s width
cqh (container query height) – 1% of the container’s height
cqi (container query inline) – 1% of the container’s inline size
cqb (container query block) – 1% of the container’s block size
cqmin (container query minimum) – the smaller value of cqi and cqb
cqmax (container query maximum) – the larger value of cqi and cqb

That allows you to write, for example, a text size that varies in height depending on the parent’s size. font-size: clamp(2rem, 15cqi, 4rem); where the 15cqi refers to 15% of the container’s inline size. The clamp() function gives this a minimum value of 2rem, and a maximum of 4rem. In the meantime, if 15cqi is between these values, the text will shrink and grow correspondingly.

Self-Aware Modules

I can see container queries being used to build all kinds of self aware widgets that behave as you expect them to, no matter where they are placed. Container queries can be reused anywhere on the page without needing to know the actual size, as it will restyle itself to fit whatever space is allocated. As a designer, you think in modular patterns rather than pages, where responsive design is not thought of in regards to the device, but to all the other elements on the page.

See Container Queries in action

Click on the logo to go to CodePen to see it (in the upper right hand corner, where it says edit on CodePen)

See the Pen
CSS Container Queries Demo (+ polyfill) by Bramus (@bramus)
on CodePen.

Additional Resources

09 Call to Action

Posted on May 20, 2023 by onno

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 May 9, 2023 by onno

< !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:

Create the HTML structure:

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

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

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

</div>

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.

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.

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>

<head>

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

</head>

<body>

<nav>

<ul>

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

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

</ul>

</nav>

</header>

<main>

<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>

</section>

<h3>Project 1</h3>

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

</div>

<h3>Project 2</h3>

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

</div>

<h3>Project 3</h3>

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

</div>

</section>

<h2>Contact Me</h2>

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

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

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

</form>

</section>

</main>

</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;

}

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>

<head>

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

</head>

<body>

<nav>

<ul>

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

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

</ul>

</nav>

</header>

<main>

<h2>About Me</h2>

</section>

<h3>Project 1</h3>

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

</div>

<h3>Project 2</h3>

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

</div>

<h3>Project 3</h3>

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

</div>

</section>

<h2>Contact Me</h2>

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

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

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

</form>

</section>

</main>

</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>

<head>

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

</head>

<body>

<nav>

<ul>

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

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

</ul>

</nav>

</header>

<main>

<h2>About Me</h2>

</div>

</div>

</section>

<h3>Project 1</h3>

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

</div>

<h3>Project 2</h3>

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

</div>

<h3>Project 3</h3>

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

</div>

</section>

<h2>Contact Me</h2>

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

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

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

</form>

</section>

</main>

</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 January 28, 2023 by onno

01 OpenAI Text/DALL·E

Posted on January 26, 2023 by onno

DALL·E 2023-01-26 06.04.23 - oil painting in the style of Van Gogh of product design students at parsons having a wild and crazy time in New York City — Prompt: oil painting in the style of Van Gogh of product design students at parsons having a wild and crazy time in New York City

OpenAI Chat: Website for Product Design Student

Image and chat response created by artificial intelligence

Me:

Can you turn the following into a website? I am a student product designer looking for work?

ChatGPT:

Yes, I can help you create a website to showcase your work as a student product designer. However, as a language model, I do not have the capability to create a website directly. I can provide you with the information and guidance you need to create a website, such as tips on design, layout, and content. You will need to use a website builder or hire a web developer to create the website for you.

Me:

How do I start?

ChatGPT:

To start creating a website, you will need to decide on a few key things:

Purpose: What is the main goal of your website? Is it to showcase your portfolio, promote your services, or provide information about your work?
Domain and hosting: You will need to purchase a domain name (e.g. www.yourdomain.com) and find a hosting provider to host your website.
Platform: There are several different website builders and platforms available, such as WordPress, Wix, and Squarespace. You will need to choose one that best fits your needs and skills.
Design and layout: Think about the overall design and layout of your website, including colors, fonts, and images. You should also consider how to organize your content in a way that is easy to navigate.
Content: Create the content for your website, including text, images, and videos that showcase your work.

Once you have decided on these things, you can start building your website. You can also hire a web developer to help you with the process.

Also, you can showcase your work using online portfolio platforms like Behance, Dribbble, etc which will make the process easier for you.

Me:

how important are websites for job recruitment?

ChatGPT:

Websites can be an important tool for job recruitment, both for job seekers and employers.

For job seekers, a website can be a great way to showcase their skills, qualifications, and work experience. It can also be an easy way for potential employers to find job candidates and get a sense of their qualifications and experience.

For employers, a website can be a powerful recruitment tool as it allows them to reach a wide audience of potential job candidates and to provide detailed information about job requirements, company culture, and benefits. Additionally, many companies use their website as a way to post job listings and accept online job applications.

Having a website can also give a sense of credibility to the job seeker and employer, as well as it can be a way to share more than what a resume can show, like online portfolio, videos, projects, etc.

Overall, a website can be a valuable tool for both job seekers and employers in the recruitment process.

Me:

In product design, what do employers look for in a website

ChatGPT:

In product design, employers typically look for a few key things when reviewing a candidate’s website:

A clear and well-designed portfolio: Employers want to see a clear and well-organized portfolio that showcases the candidate’s best work. This should include detailed images, descriptions, and any relevant information about the design process.
A strong online presence: Employers want to see that the candidate has a strong online presence, including a professional website, social media profiles, and an active blog. This shows that the candidate is up-to-date with the latest industry trends and technologies.
A clear understanding of the design process: Employers want to see that the candidate has a clear understanding of the design process, including research, concept development, prototyping, and user testing. This can be demonstrated through case studies, design diaries, or other documentation of the design process.
Relevant skills and experience: Employers want to see that the candidate has the relevant skills and experience to do the job. This should be highlighted in the portfolio and on the website, and should include information about the candidate’s education, work experience, and any relevant certifications.
Strong communication and presentation skills: Employers want to see that the candidate can effectively communicate and present their ideas, and this can be demonstrated through the website’s writing, videos, and images.
Strong attention to details: Employers want to see that the candidate has strong attention to details, this can be seen in the design of the website, the way the portfolio is presented, the way the information is organized, etc.

Overall, employers want to see a website that is professional, well-designed, and effectively communicates the candidate’s skills, qualifications, and experience.

Me:

If I only have two years of school work to show, what is the best work to show my skillset and problem solving abilities.

ChatGPT:

If you only have two years of school work to show, it’s important to choose the projects that best demonstrate your skillset and problem-solving abilities. Consider the following when selecting projects to showcase:

Complexity: Choose projects that demonstrate your ability to tackle complex problems and design solutions. These should be projects that required you to use a variety of design techniques, tools, and methodologies.
Originality: Choose projects that demonstrate your ability to come up with original ideas and designs. This could be projects where you had to solve a unique problem or create something that hasn’t been done before.
Design process: Choose projects that demonstrate your ability to follow a design process, including research, concept development, prototyping, and user testing. Provide information about your research, the design process, and the results.
Relevance: Choose projects that are relevant to the type of product design you want to work in. If you want to work in industrial design, for example, choose projects that demonstrate your ability to design physical products.
Problem solving: Choose projects where you had to demonstrate problem-solving skills. This could be projects where you had to find innovative solutions to difficult challenges.
Show the outcome: Choose projects that have clear outcomes, and demonstrate the impact of your design, for example, a product that was manufactured, a service that was launched, etc.

It’s also important to have a clear and well-organized portfolio, with detailed images, descriptions, and any relevant information about the design process, and a clear way of navigation. It’s also helpful if you can provide examples of how your designs have been received by users or customers.

Me:

How important is it for my website to stand out and be memorable? What can I do to make it that way?

ChatGPT:

It is important for your website to stand out and be memorable because it is often the first point of contact potential employers will have with you. A well-designed and memorable website can help you make a strong first impression and increase your chances of getting hired.

Here are a few things you can do to make your website stand out and be memorable:

Be unique: Showcase your personal style, point of view, and personality on your website. This will help you stand out from other candidates and make a lasting impression on potential employers.
Make it visually appealing: Use a clean, modern, and visually appealing design. Use high-quality images, typography, and layout to make your website look polished and professional.
Make it easy to navigate: Make it easy for potential employers to find what they’re looking for on your website. Use clear and consistent navigation, and make sure your portfolio is easy to find.
Show your process: Employers are interested in seeing the design process, not only the final product. Share your design process, research, sketches, and iterations, this will make your portfolio more interesting and unique.
Show your impact: Highlight the impact of your designs, for example, if a product you designed was manufactured, or if a service you designed was launched, etc.
Show your skills: Make sure your website showcases your skills and qualifications, and highlight any relevant work experience or education.
Use multimedia: Use videos, images, and animations to make your website more engaging and interactive.
Make sure your website is mobile-friendly, as many people use their mobile devices to browse the web.

Overall, a memorable website should be visually appealing, easy to navigate, and effectively communicate your skills, qualifications, and experience. It should showcase your unique style, personality and process, as well as the impact of your designs, and be mobile-friendly.

DALL·E claymation sculptures of product design students at parsons having a wild and crazy time in New York City — Prompt: claymation sculptures of product design students at parsons having a wild and crazy time in New York City

Me:

Will a more generic templated design suffice or does that make it look like what too many other people in my field offer?

ChatGPT:

Using a more generic templated design for your website may make it look similar to other websites in your field, which can make it less memorable and less effective in standing out to potential employers. While it’s understandable to use templates to save time and effort, it’s important to remember that a template often used by others may not be able to reflect your unique style, personality, and design process.

Using a pre-made template can make it harder to showcase your individuality and skillset. It’s also less likely to reflect your design process, design thinking, and problem-solving abilities, which are important for product design.

That being said, it’s not impossible to make a templated website stand out. You can customize it by changing the colors, typography, images and layout, to reflect your style and personality, and by adding multimedia elements, like videos and animations. Additionally, you can make sure that the navigation and the portfolio are easy to find and well-organized.

It’s also important to remember that the content of your website, like the portfolio, case studies, and writing, is the most important aspect. Even if the template is generic, if the content is well-presented, engaging, and effectively communicates your skills, qualifications, and experience, it can still make a strong impression on potential employers.

In summary, while a generic templated design may save time and effort, it can make it harder to stand out and make a memorable impression. Customizing the template and making sure the content effectively communicates your skills, qualifications, and experience is important to make it stand out.

Me:

So you think it is best to hand code websites for maximum creative impact and originality, and to show my problem solving skills.

ChatGPT:

Hand coding a website can have a greater creative impact and originality than using a pre-made template, as it allows you to create a unique and personalized design that truly reflects your style, personality, and problem-solving abilities. It also allows you to have more control over the website’s layout, functionality, and overall user experience.

By hand coding a website, you can create a design that is tailored to your specific needs, and that showcases your problem-solving skills. You can also take into account the latest web design trends and technologies, and ensure that your website is fully responsive and optimized for different devices and screen sizes.

That being said, hand coding a website does require a certain level of technical skill and knowledge, as well as time and effort to develop. It’s important to consider your own skills and resources before deciding to hand code a website. Additionally, it’s not only the website design that makes the difference, but also the content. An effective website should have a clear message, easy to understand and well-organized, and should showcase your skills, qualifications and experience.

Overall, hand coding a website can have a greater creative impact and originality, and can showcase your problem-solving skills. However, it also requires a certain level of technical skill, and time and effort to develop. It’s important to consider your own skills and resources, and also focus on creating a clear, well-organized and effective website content.

Me:

What are the current trends in product design?

ChatGPT:

Here are a few current trends in product design:

Sustainable design: There is an increasing focus on designing products that are environmentally friendly and sustainable. This includes using sustainable materials, designing for disassembly and recycling, and reducing energy consumption.
Human-centered design: Product designers are increasingly using human-centered design methods to create products that are tailored to the needs, wants, and preferences of users. This includes user research, prototyping, and testing to ensure that products are easy to use and meet the needs of their intended users.
Technology integration: Product designers are incorporating new technologies, such as IoT, AI, and AR/VR, into products to enhance their functionality and user experience. This is particularly relevant in areas such as smart home, wearables, and transportation.
Accessibility: There is a growing awareness of the importance of designing products that are accessible to people with disabilities. This includes designing products that are easy to use for people with physical, visual, auditory, or cognitive impairments.
Minimalism: The minimalistic design trend is still popular in product design, characterized by simple and clean lines, and a focus on the essential elements of a product. This helps to create a sense of elegance, simplicity and timelessness.
Personalization: Product designers are increasingly creating products that can be customized to the individual preferences of users. This includes using 3D printing and other technologies to create personalized products.
Virtual and Augmented Reality: These technologies are increasingly used in product design to create immersive experiences, virtual prototypes and simulations, as well as to enable remote collaboration and remote product testing.
Material Innovation: Product designers

Me:

What is the best advice you can give a product design student?

ChatGPT:

Here is some advice for a product design student:

Develop a strong design process: Having a clear and well-defined design process is essential for effective problem-solving and creating successful designs. This includes understanding the problem, researching and gathering information, generating ideas, prototyping and testing, and iterating on your designs.
Learn from other designers: Study the work of other designers, both past and present, to understand different design styles and approaches, and to gain inspiration for your own work.
Be open to feedback: Always be willing to receive feedback on your work and to use it to improve your designs. Feedback can come from your professors, peers, and professionals in the industry.
Stay informed: Stay up-to-date with the latest trends, technologies, and materials in the field of product design. This will help you to create designs that are innovative and relevant.
Don’t be afraid to experiment: Experimentation and exploration are key to developing your own unique style and voice as a designer. Don’t be afraid to try new things and take risks.
Network and collaborate: Network with other designers and professionals in the industry, and seek out opportunities to collaborate with them on projects. This will help you to gain valuable experience and to make connections that can be beneficial for your future career.
Show your work: Document and share your work through a portfolio or website, this will help you to showcase your skills and qualifications to potential employers.
Keep learning: Remember that learning never stops, continue to seek out opportunities for

Me:

I will be competing for jobs with many other like minded and like skilled students, what are the best ways to stand out?

ChatGPT:

Here are some ways to stand out as a product design student competing for jobs:

Develop a strong portfolio: A well-crafted portfolio is essential for showcasing your skills and qualifications to potential employers. Make sure that your portfolio is well-organized, visually appealing, and that it effectively communicates the design process and thought behind your work.
Build a personal brand: Develop a personal brand that reflects your unique style and personality. This can include a personal website, social media presence, and a consistent design aesthetic.
Specialize in a specific area: Consider specializing in a specific area of product design, such as a certain industry or type of product. This will allow you to become an expert in that area and to differentiate yourself from other designers.
Showcase your problem-solving skills: Emphasize your problem-solving skills in your portfolio and during interviews. Highlight how you approached and solved complex design problems, and how you used research, prototyping, and testing to arrive at your final design.
Showcase your experience: If you have any relevant experience, such as internships or freelance work, make sure to include it in your portfolio and highlight it during interviews. This will demonstrate to potential employers that you have real-world experience and that you are capable of working on projects from start to finish.
Be proactive and take initiative: Don’t wait for opportunities to come to you, actively seek out opportunities for internships, collaborations, or freelance work. This will give you valuable experience and help you to build a network of contacts in the industry.
Be adaptable and flexible: Be open to new ideas and be willing to learn new skills and technologies. This will help you to stay current and relevant in the industry.

DALL·E oil painting in the style of Van Gogh of product design students at parsons having a wild and crazy time in New York City — Prompt: oil painting in the style of Van Gogh of product design students at parsons having a wild and crazy time in New York City

Me:

Thank you for your advice

ChatGPT:

You’re welcome! I hope my advice will be helpful for you as you continue to pursue a career in product design. Remember that success in the field of product design often comes down to hard work, persistence, and a willingness to learn and adapt. Keep honing your skills, showcasing your work, and networking with others in the industry. Good luck!

08 Portfolio Presentation

Posted on January 20, 2023 by onno

Congratulations on completing your projects. Even if you’re not totally done/things are broken, present what you have and talk through your design decisions and code, starting with first assignment, eight steps, typography poster, issue website, and last but not least, your portfolio where you sell yourself to the rest of the class. As long as you’re in class, presenting your project, you’re welcome to resubmit it by the end of the semester.

Structure

I will assign in class a first responder (1R), second responder (2R), and notetaker (N). The first responder (1R) will kick off our discussion as soon as the presenter has finished sharing their work, covering design issues. The second responder (2R) will add, subtract, and expand on the first responder, focusing on the code. The notetaker will listen carefully and document the highlights of the critique in a class document for later reflection by the presenter. Class engagement is a requirement, so let us all work together to make each one of us the best that they can possibly be.

When critiquing, these are the questions that need to be considered:

Design considerations:
1. Does the portfolio stand out?
2. How would the target audience respond. Contextualize your answer.
3. What is the narrative? Could the story be told better?
4. How is the graphic design? Scale? White space? Typography?
5. What is the inspiration/research behind it, How is the content supported?
6. Do the layout and navigation support the goals for viewing the collection?
Code Considerations:
1. Is the markup valid and semantically correct HTML5 ?
2. Are images the correct format and size ?
3. Are UX concerns driving the design process ?
4. Are all 7 steps articulated in the design process for portfolio and final ?
5. Is the CSS valid, clean, external, and using structural selectors wherever possible ?
6. Are various layout strategies used to construct the layout ? Document Flow ? Positioning ? Floats ? Flex Box ? CSS Grid ?
7. Is the website responsive to a change in viewport size, from smart phone to the standard web browser ?

Recorded Lectures

Posted on January 30, 2021 by onno

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

04 How CSS Works ( w3.org)

Posted on March 3, 2020 by onno

CSS takes a source document, organized as a tree of elements and text nodes, and renders it onto a canvas(such as your screen, a piece of paper, or an audio stream). To do this, it generates an intermediary structure, the box tree, which represents the formatting structure of the rendered document. Each box in the box treerepresents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.

To create the box tree, CSS first uses cascading and inheritance, to assign a computed value for each CSS property to each element and text node in the source tree. (See [CSS3-CASCADE].)

Then, for each element, CSS generates zero or more boxes as specified by that element’s display property. Typically, an element generates a single box, the principal box, which represents itself and contains its contents in the box tree. However, some display values (e.g. display: list-item) generate more than one box (e.g. a principal block box and a child marker box). And some values (such as none or contents) cause the elementand/or its descendants to not generate any boxes at all. Boxes are often referred to by their display type—e.g. a box generated by an element with display: block is called a “block box” or just a “block”.

A box is assigned the same styles as its generating element, unless otherwise indicated. In general, inherited properties are assigned to the principal box, and then inherit through the box tree to any other boxes generated by the same element. Non-inherited properties default to applying to the principal box, but when the element generates multiple boxes, are sometimes defined to apply to a different box: for example, the border properties applied to a table element are applied to its table grid box, not to its principal table wrapper box. If the value computation process alters the styles of those boxes, and the element’s style is requested (such as through getComputedStyle()), the element reflects, for each property, the value from the box to which that property was applied.

Similarly, each contiguous sequence of sibling text nodes generates a text run containing their text contents, which is assigned the same styles as the generating text nodes. If the sequence contains no text, however, it does not generate a text run.

In constructing the box tree, boxes generated by an element are descendants of the principal box of any ancestor elements. In the general case, the direct parent box of an element’s principal box is the principal box of its nearest ancestor element that generates a box; however, there are some exceptions, such as for run-inboxes, display types (like tables) that generate multiple container boxes, and intervening anonymous boxes.

An anonymous box is a box that is not associated with any element. Anonymous boxes are generated in certain circumstances to fix up the box tree when it requires a particular nested structure that is not provided by the boxes generated from the element tree. For example, a table cell box requires a particular type of parent box (the table row box), and will generate an anonymous table row box around itself if its parent is not a table row box. (See [CSS2] § 17.2.1.) Unlike element-generated boxes, whose styles inherit strictly through the element tree, anonymous boxes (which only exist in the box tree) inherit through their box tree parentage.

In the course of layout, boxes and text runs can be broken into multiple fragments. This happens, for example, when an inline box and/or text run is broken across lines, or when a block box is broken across pages or columns, in a process called fragmentation. It can also happen due to bidi reordering of text (see Applying the Bidirectional Reorderign Algorithm in CSS Writing Modes) or higher-level display type box splitting, e.g. block-in-inline splitting (see CSS2§9.2) or column-spanner-in-block splitting (see CSS Multi-column Layout). A boxtherefore consists of one or more box fragments, and a text run consists of one or more text fragments. See [CSS3-BREAK] for more information on fragmentation.

ChatGPT 3.5

How to set up the Parent/Container

Container Queries specific measurements

Self-Aware Modules

See Container Queries in action

Additional Resources

What is a call to action?

OpenAI Chat: Website for Product Design Student

Image and chat response created by artificial intelligence

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Me:

ChatGPT:

Structure

When critiquing, these are the questions that need to be considered:

Design considerations:

Code Considerations:

Week 5:

Week 4:

Week 3:

Week 2: