Session 1: This week we will begin our discussions about the Basic Portfolio Project. I will also be assigning the Markup Exercise and demonstrating the start of the build process for the Basic Portfolio Project template. In today’s lecture we will discuss color theory for the web. Later in a demo we will look at creating a universal navigation bar that horizontally spans the header.
Basic Portfolio Project Milestone #1
Due: Week 4, Session 2 (before class starts: 2 points)
1. Be prepare to discuss your layout and design concept
2. Prepare a minimum of three sketches to illustrate your ideas
3. Prepare a color scheme using color.adobe.com
Relevant Resources:
CSS Reset
CSS Normalize
Session 2: Today we will start by discussing the requirements for the Markup exercise.
Today’s demo will apply to the requirements for the Markup exercise. Also, during studio time be prepared to demonstrate the points listed last session for Portfolio Project Milestone #1. This milestone is required for the approval of your design concept for the Portfolio Project.
Technical Exercise 2: Markup
Due: Session 2, Week 5 (4 points)
Description:
Build a single page that profiles the first computer or gaming console you remember using. If you cannot remember the exact model choose from something around the same time period. Browse VintageComputing.com, Wikipedia, or other sites to collect the content and resources for the page. You must cite the resources that you use in the page as links. Your layout must include page-jumps for navigating to specific content areas. It must also include a header, header images, content images, an aside, and a footer. Focus on the markup. Styling will be added later during the styling exercise. Take a look at CSS Zen Garden to see how significant CSS can change the look a feel of an HTML document.
Requirements:
1. Create a profiling the first computer or gaming console you remember using
2. Use available web resources to find the content for the page
3. Cite each image and source that you use inline, in the footer, or the aside
4. Use page jumps to navigate to content areas within the page
5. Break up the page into a header, main content, aside, and footer
6. Add the files and folders to your environment and upload to your webspace
Points Breakdown:
2 points will be awarded for organizing the content for the page
2 points will be awarded for properly coding the markup in html5 format
This article briefly summarizes what is possible in the realm of responsive design. It also provides extensive links to other helpful resources when designing a responsive website. The section “Viewport-Relative Units and the End of Pixel-Based Layout” describes CSS viewport units.
http://www.smashingmagazine.com/2013/05/the-state-of-responsive-web-design/
This article explains the benefit of using viewport units. It shows examples of back end coding and front end appearance.
https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
This website gives a shorter explanation of viewport units. It also provides examples and describes the parent-child relationship in coding.
http://tutorialzine.com/2015/05/simplify-your-stylesheets-with-the-magical-css-viewport-units/
This article talks about how to create an effective web layout through design and user friendly functionality.
http://shortiedesigns.com/2014/03/10-top-principles-effective-web-design/
This article discusses the idea of color psychology and how particular colors can either attract or repel people and how you can use colors in your webpage to invite a certain viewer.
https://blog.kissmetrics.com/psychology-of-color-and-conversions
This article shows 4 of the most popular design layouts of 2015. It gives some examples of how they are used and when they can be most effective.
http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/
http://www.creativebloq.com/web-design/steps-perfect-website-layout-812625
This website gives steps on how to begin a website layout and some things to think about when doing so. There are things mentioned in there such as colors and typography, which are things discussed either in class or on the class outline.
https://teamtreehouse.com/library/applying-normalizecss-browser-reset-css
This website is linked to a video, which gives another basic explanation of what normalize css is and how to easily apply it to source code.
http://mashable.com/2010/07/23/web-design-resources-beginners/#n1A5GWFERiqk
This website is a good resource for other resources. I was looking around for sites that could give good example of different web layouts, and stumbled across this which has that and other relevant resources, such as typography.
This article provides 50 examples of aspects to consider when you design your website to be responsive. Specifically, how would you adjust your website according to to the user’s screen resolution, what elements or sections are more important to show when the width of screen gets narrower, and so on. It is all about the user’s experience.
http://designmodo.com/responsive-design-examples/
==================================================================
This article is a good follow-up to Apppleby’s post above, it compares the use of viewport relative units (vh,vw,vmin, & vmax) to the use of percentage. Furthermore, it provides good examples in which both can be used to give certain results, e.g. the effect of having pages within your website.
https://bitsofco.de/viewport-vs-percentage-units/
==================================================================
This article provides interpretation of different color schemes to be used in designing a webpage style, and how different schemes communicate differently with their users. At the end, the article provides links to online color generator tools, one of which we are going to use, namely, Adobe CC.
http://www.designyourway.net/drb/colors-in-web-design-and-why-to-choose-them/
CSS tricks articles that are easy to follow and has clear instructions.
https://css-tricks.com/
An article that shows different color palettes with images and videos.
https://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html
A simple CSS layout generator. It helps us experiment and see the result of texts, sidebars, and background colors.
http://www.cssportal.com/layout-generator/
This article shows 8 guidelines that modern websites should follow. The article explains that, in web design, less is more. The less distracting colors and animations, the better. Type should be legible, and graphics should only be used as a tool, not as a gimmick.
https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-Guidelines-for-Exceptional-Website-Design-and-Usability.aspx#sm.0001xhzz05zzpet7qr419vpaur7pq
Here, we have an article that describes how to effectively use color while making a web page. Color can be used to draw attention, and highlight important parts of the page. The article also describes that again, less is more.
https://designmodo.com/web-design-colors/
And now, for the other end of the spectrum, here’s what not to do when building a website, and how NOT to use colors. In this case, using much, much more means less and less attention a reader/potential client will grant you. And for the love of Pete, don’t use music on a web page if a reader can’t turn it off. Or better yet, just don’t use music.
https://www.elegantthemes.com/blog/resources/bad-web-design-a-look-at-the-most-hilariously-terrible-websites-from-around-the-web
I found this article interesting due to the fact that it is not the same way we are going about designing our own pages, though it can be useful. The article deals more with the process of the layout itself using photoshop as a helpful tool rather then discussing the coding process.
http://www.vandelaydesign.com/website-layout-photoshop-tutorials/
This page is another very helpful tool in that it discusses why different tones and colors might be used to convey a different feeling from your page. It can clearly be seen that the layout of a site can be similar to a work of art and is discussed as such in the article.
https://designschool.canva.com/blog/website-color-schemes/
This short and sweet article is great because it simply talks about why it all matters. Why functionality relates directly to how the page is laid out, scrolling, links, etc…it all matters.
http://www.kobayashi.ca/2011/11/29/design-layout-functionality-the-basic-elements-of-web-experience/
https://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/
This link explores the importance of website colors in relation to the emotions they evoke. The article gives a run-down of each color family and explains the general effect they have on the viewer. In addition, the article does a good job of explaining the way different colors interact and includes tips on how to choose complementary colors for a site.
https://tutorialzine.com/2014/07/20-impressive-css3-techniques-libraries-and-examples
This article provides design inspiration and techniques using css. Although some of the techniques are advanced, the site provides tutorials for many of them, which are fairly easy to follow. The design inspirations on the site prove that css can be used to create compelling and modern design for the web.
https://www.creativebloq.com/web-design/steps-perfect-website-layout-812625
This article lays out the steps to designing your own webpage. It begins with a design on paper (similar to our own checkpoint assignment) and works through the process of making calculated decisions to produce a clean, visually appealing design. The article includes information about things such as color scheme, typography, and feature necessity.
This website defines basic color theory and provides examples of different ways for colors to be paired. I find it does a good job of concisely explaining why different colors work together.
https://www.colormatters.com/color-and-design/basic-color-theory
This website explains what websites should look like. While it doesn’t provide any guidance for coding, it does show what to look for to ensure a good user experience.
https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/
The last website explains the more subjective side of color theory. It provides an explanation for what emotions certain colors illicit, and it shows examples of well-known websites that use a particular color effectively.
https://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/
This article expresses that the layout and colors you use for your website can affect the way people view your product/ service. It can go as far as making or breaking their overall decision. This site also lists 15 helpful tools online that can help you figure out which design and color scheme is best for you.
https://www.practicalecommerce.com/15-tools-resources-color-design
This article focuses on how and what color to choose for your website. By choosing a dominant color, it’ll be easier for consumers to recognize your brand. Also, every “dominant” color has a meaning/ mood it gives off to consumers.
https://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/
This last article talks about what is currently in style and will be in style in 2019. It mentions that it takes 3 seconds for the average person to look over your site and develop an opinion about you or your company. As humans we are quick to judge and impatient at times. So it is important to have a site that will come up fast and not take too long to load. Also it has come out that we do more online researching and such on our mobile devices than on our computers. So it’s important to consider and design your website to be able to fit on the screen of a phone or even tablet. This site also mentions that asymmetric designs, video backgrounds and animations are all in this coming year.
https://www.theedesign.com/blog/2018/web-design-trends-2019
https://computhink.com/color-branding-in-web-design/
This first link discusses the importance of color branding in web design. It points out how the color of your brand reflects the psychology of its product. The article points out a few interesting points:
-Color depends on the context both in market and culture
-Women and men have different taste in color, but everyone loves blue
-Genders also tend to differ in their preferences for tint and vibrancy
-The effect of color varies from person to person
https://webflow.com/blog/web-design-101-color-theory
This next article discusses color theory. It runs through the important vocabulary to know before analyzing color theory.It goes through the science of color pattern and how the codes portray the colors.
https://www.canva.com/learn/6-trending-colors-to-use-in-2019/
My last link I found on a website I use very often called canva. It discusses the top 6 trending colors to use in 2019. This will be helpful as we complete our websites and choose what colors we use. The colors are all over the scale and interesting to see the evidence they have backing the colors up.
This article gives several examples of appropriate and effective uses of color for a user interface depending on the website’s content in question, with sourced data that shows blue is a safe color to use when in doubt.
https://uxdesign.cc/how-to-use-color-in-ui-design-wisely-to-create-a-perfect-ui-interface-2af42f901f4
This article discusses popular website UI design trends for 2020,chief among them the growing demand for dark mode due to the rise of OLED screens.
https://99designs.com/blog/trends/web-design-trends/
This article dives into the importance of color for mobile app design, showcasing examples and giving tips on effectively using color contrast in order to reduce eye strain.
https://www.smashingmagazine.com/2017/01/underestimated-power-color-mobile-app-design/
This article provides a lot of information about basic principles of layout design and how designers can best deliver content to users. It covers a lot of relevant information and guides on which fonts to use, how to choose images, and how to use repetition.
https://www.internetacademy.co.in/it/design/basic-principles-of-layout-design.html
This article is a great guideline for when it comes to choosing color schemes and a color aesthetic. It provides a lot of information on why color theory is important in web design and how users move around a particular web layout.
https://blog.hubspot.com/marketing/color-theory-design
This is a site where you can navigate and browse successful web designs and design templates. I think this is a great place to get ideas on how one can layout their webpage.
https://www.squarespace.com/website-design/?channel=pnb&subchannel=go&campaign=pnb-dr-go-us-en-website-e&subcampaign=(website-design_web-design-example_e)&utm_source=google&utm_medium=pnb&utm_campaign=pnb-dr-go-us-en-website-e&utm_term=web%20design%20example&gclid=CjwKCAjwzvX7BRAeEiwAsXExo3hOhz0_uXrKKSvo7DjdiU_fVECYhQFERwGS3Msl0F_O-JaI-pEXGhoCgBEQAvD_BwE
https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka/related
This first link is to a google chrome extension for a color picker. Users can use the tool to pick out colors from a website and see the HEX code. Users can then copy and past this code, or can keep track of the color by looking into the eye dropper history.
https://coolors.co/
The second link is for an extension/ website based color palette generator. Users can create random color palettes and slowly adjust certain colors until they end up with a color palette they like. Further, the generator offers saving options, as well as quick use HEX codes.
https://webflow.com/blog/color-theory
This website offers a beginner guide to understanding color theory, starting with vocabulary, then the color wheel, followed by schemes and color psychology.
Color Theory:
https://webflow.com/blog/color-theory
When designing websites, particularly blogs in this case, it’s important to account for how to use and arrange colors for your site’s design. Colors hold meaning and evoke emotional responses from viewers, whether as common psychological associations or individual associations from the contexts of lived experiences. Web designers should look at the color which contains primary, secondary, and tertiary colors, and using those foundations to understand which colors complement each other and which do not. The article provides a guide for which colors are associated with what feelings (in a western context) and examples on how color theory is effectively used.
https://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers–webdesign-1437
This article is for beginner web designers and defines color theory as the interaction of colors through in a design through complementation, contrast, and vibrancy. It defines complementation, contrast, and vibrancy, explains how to choose an effective color scheme from triadic, compound, and analogous. For triadic, the method is drawing an equilateral triangle over a color wheel and using the three points of the triangle to form the tri-color scheme; the compound is done by choosing two colors from opposite sides of the spectrum; is based on a careful selection of colors in the same area of the color spectrum. The article encourages deeper research into color theory and to use tools such as Kuler and Color Scheme Designer 3, which prevent you from becoming frustrated with the learning process
https://elementor.com/blog/color-theory-web-design/
An effective use of color theory in web design helps streamline user experience, allows for digital accessibility, finding information, and influences consumer behavior. A web site’s visual factors helps users decide how to interact with the site, whether to interact with it all, and can help boost brand recognition. Sir Isaac Newton discovered a visible spectrum of light and mapped them into classifications now known as the color wheel, which is still used today. The website defines the color wheel, color relationships, color warmth, color systems, tints and shades, hue, saturation, and lightness, and contrast. The article also delves into color psychology and how web designers should account for how certain colors evoke certain psychological responses.
https://webflow.com/blog/color-theory
This article talks about basic color theory, including the four most common color schemes: monochrome, complementary, analogous and triadic. It also discusses common psychological meanings/influences of colors and gives resources for choosing colors and color schemes.
https://thenextweb.com/news/how-to-create-the-right-emotions-with-color-in-web-design
This article contains alot of the same information as the previous one, but focuses more on the different emotional responses associated with a larger variety of colors. It also has a few good examples of uses of color schemes in websites.
https://www.flux-academy.com/blog/how-to-strategically-use-color-in-website-design
Again, this article has alot of the same basic information as the other two, but it also has some broader ideas, such as variation of the meanings and associations of colors across cultures. It also has more good examples of the application of color and the 60/30/10 rule.
This link gives us the HTML color codes of many different colors that we may want to use during our website building process. It also allows users to pick a color and gives examples of what different text may look like or what a light/darker shade of that color would be. This website also allows the user to mix two different colors and get the specific color codes of the different mixed shades.
Link: https://www.w3schools.com/colors/colors_names.asp
This article goes over the psychology of color in web design and how important color is in strengthening your brand or attracting people to your website. A quote that stood out was “Studies show that people decide whether or not they like a product in 90 seconds or less and that 90% of that decision is based solely on color.” It specifically goes over different colors and the psychology behind them.
Link: https://99designs.com/blog/creative-inspiration/psychology-color-web-design/#:~:text=The%20psychology%20of%20color%20can,is%20based%20solely%20on%20color.
This article is about how websites and web design have changed over 20 years. One main focus is how much more user-friendly websites have become and how important it is for a website to be easy to navigate and use. It discussed how in 2016 mobile internet surpassed desktop usage and how websites had to change to become more mobile-friendly.
Link: https://www.sqdigital.co.uk/insights/how-websites-and-web-design-have-changed-over-20-years/#:~:text=The%20increase%20in%20the%20use,much%20more%20visually%20appealing%20websites.
https://www.markdownguide.org/basic-syntax/
This website is a great resource for basic HTML codes for basic syntax. As a visual learning, this is super helpful and I like to see the code written out so I can figure out how to integrate in into my own site.
https://elementor.com/blog/color-theory-web-design/
This is a great website that clearly lays out why color is so important for web designers and all fundamental essentials we should all know as new web designers. I love the simple graphs and images that show examples.
https://www.webdesignmuseum.org/old-software/html-editors
This is a super cool website that is a virtual museum of what different HTML used to look like on different softwares. It’s great to see how HTML and web design has grown so much and to see how more accessible it’s become to people.
https://elementor.com/blog/website-color-schemes/
I chose this article because we are working on color theory. I thought it would be important for students to gain some insight on how to choose a color scheme for their websites, as it is probably the most noticeable feature of design.
https://www.w3schools.com/html/html_layout.asp
I chose this article because it focuses on HTML layouts. As we’re designing our websites, we may want to do more than the basic training we’re given, and W3 shows us in this article how to control sections of the page.
https://www.w3schools.com/html/html5_video.asp
Since we may want to include videos on our website, I found this article through W3 that explains how to have a video play automatically. You need to insert “autoplay” in your code.
https://webflow.com/blog/color-theory
The first link provides readers with insights into color theory for website. It lays out a beginner-guide on how to choose the right color combinations and craft visually appealing layouts.
https://www.flux-academy.com/blog/how-to-strategically-use-color-in-website-design#
This link discusses how to strategically use color by offering precise guidelines. It recommended following the 60/30/10 rule, which allocates 60% of the color as the primary color, 30% as the secondary and 10% for the accent color.
https://www.appliedi.net/blog/7-elements-of-an-aesthetically-pleasing-website/
This website covers the seven key components essential for creating an aesthetically pleasing websites. These include color as the foremost element, followed by images, textual context, navigation, alignment, consistency and the strategic use of white space.
https://www.interaction-design.org/literature/topics/color-theory
This article gives a basic introduction to color theory. It covers things such as hue, value, and saturation as well as color schemes and temperatures.
https://thefutur.com/content/color-schemes-of-the-most-visited-websites
This article takes a look as the color schemes from some of the most visited websites such as google, YouTube, Facebook, X (Twitter), etc. Some interesting things I noticed were that each site only has 4 colors. Additionally, many of them used either an off-white, off-black, or combination of both.
https://thefutur.com/content/how-to-apply-a-color-palette-to-your-design
This article discusses how to effectively apply a color scheme to a website using color ratios between the primary, secondary, and accent colors.
1) https://tedigitalmarketing.com/website-design-development/importance-of-color-in-web-design/#:~:text=Choosing%20the%20appropriate%20color%20palette,assessment%20is%20based%20on%20color.
This article explains important aspects of color psychology. More specifically, the feelings different colors evoke and the audiences they attract.
2)
https://www.jotform.com/blog/how-to-make-a-web-design-look-good/
This article gives detailed explanations of what they say are the “7 key principles for visually appealing websites.” I think the article does a great job of giving visual examples for each topic and explaining why each one is effective.
3) https://www.bigcommerce.com/glossary/css/
This article explains the importance of CSS and briefly notes the history of it.
https://daveyandkrista.com/top-trending-color-palettes-for-websites/
– The Davey & Krista blog post suggests predictions in 2025 top color trends for websites. Colors found in nature, including earthy browns, calming flower tones, and bold colors that “convey authenticity “are expected to be trendy and appealing to the consumer, aiming to create a grounded atmosphere amidst uncertainty.
https://www.theedigital.com/blog/web-design-trends
– This TheeDigital article highlights key trends that are expected to shape the web design sphere in 2025. Some key elements include strong color contrast between text and backgrounds, labels and instructions with form fields and functional alt tags for images to meet accessibility needs, reducing digital carbon footprints by optimizing media and coding for efficiency rather than aesthetics, and experimental navigation to maximize user engagement.
https://michalmalewicz.medium.com/web-design-trends-2025-06d1b74fc1f8
– This Michael Malewicz Medium article explores upcoming trends and antitrends in web design layout and visuals predicted for 2025. Three antitrends are mentioned which are: Brutalism, excessive animation/interactivity/decoration and the overuse of AI in designs. Brutalism brings up accessibility concerns, excessive animation, interactivity and decoration is overstimulating and makes scaling complicated, and the overuse of AI designs looks unprofessional and seems random at times.