Computer Science
Gilmour AcademyLancerTech
  • Our Curriculum and Department
  • Intro to Programming
    • 1: Parts of a Computer
    • 2: Parts of Python
    • 3: DRY Turtle
    • 4: Turtle Design App
    • Wordle with Turtles
    • 5: Interactive Turtles
    • OLD 5: Replit, GitHub, and repositories (Oh my!)
    • 6: Raspberry Pi / GoPiGo
    • 7: Kivy
  • Intro to Web Design
    • 1: Internet?
    • 2: Websites?
    • 3: Bootstrap Template
    • 4: Graphics and Branding
    • 5: Collaboration
    • 6: Advanced Editing
    • Publish Static HTML
  • AP Computer Science
    • 1: Logic & Instances
    • 2: How Java Works
    • 3: Data Types & Flow
    • 4: Strings
    • 5: Objects & References
    • 6: Inheritance & Algorithms
    • 7: Data Structures
    • 8: Sorting
    • 9: Review
    • Data Science
  • Web App Dev
    • 1: Core Concepts
    • 2: MVT Pattern
    • 3: Hello Flask
    • 4: Install Flaskinni
    • 5: Tour Flaskinni
    • 6: Visualize Your App
    • 7: Theme & Blueprint
    • 8: Standup Your DB
    • 9: Advanced Topics
    • 10: Deployment
  • 2D Game Design
    • Class Overview
    • Gamemaker Studio 2 and Github Setup
    • Game 1: Bouncing Ball
    • Turning in your games
    • Game 2: Maze
    • Game 3: Ping Pong
    • Game 4: Breakout
    • Game 5: Tank Battle
    • Game 6 Highlights
    • DO NOT DO:
    • Game 7: Final Project
    • Publish to Opera
    • FAQ
  • 3D Game Design
    • 1: Class Overview
    • 2: Installation
    • 3: Exploring the Unity UI
    • Game 1: Rolling Ball
    • Game 2: Tanks
    • Game 3: Third Person Platformer
    • Game 4: Final project
    • FAQs
    • OLD: Distance Learning Setup
    • OLD: GIT
  • 3D Modeling & Fabrication
    • Installation
    • Fusion 360 Interface and Sketch Modeling
    • Primitive Modeling
    • Patterns
    • Appearances and Rendering
    • Building Community Gallery Page 2023
    • Parametric Modeling
    • 3D Printing Concerns
    • Assemblies and Mechanical Design
    • Laser Cutting
    • Sculpt Tools
    • Milling Concerns
  • Robotics 7
    • Software Installation
    • Python basics (trinket.io)
    • Python Turtle
    • Programming for the Ev3
    • Setting up for clarity
  • Robotics 8
    • Replit
    • Python review
    • Kivy Basics
    • Calculator
  • Competitive Robotics
    • Hardware Team
      • CAD Examples
      • Elevators
    • Software Team
      • Command Pattern
      • Example Command
      • Subsystem
      • Running Your Code
      • Under the Hood
      • RoadRunner
      • Vision Processing
  • Archives
    • Adiletta Archives
      • Old Web
        • Ex: WordPress CMS
      • ItP
        • OLD: Parts of Python (old -- Mr. A)
        • OLD: 5: Raspberry Pi
        • OLD: 6: Deploying Code
        • OLD 7: Nav Algorithm
    • Vanek Archives
      • OLD Robotics 8
        • OLD: End of Class Project
      • OLD Competitive Robotics
        • Untitled
        • Webots Videos
      • OLD Robotics 7
        • Trinket Introduction
        • Lists: x/y position
        • Functions: Math program
        • Lists: Grocery List
        • Study Guide Program
        • Tic Tac Toe Game
        • Dice Roller Program
        • Visualization
        • Dice Roller + Visualization
        • OpenSCAD: Installation
        • OpenSCAD: Command Sheet and Intro
        • OpenSCAD: Difference
        • OpenSCAD: Variables
        • OpenSCAD: Union
        • OpenSCAD: For Loops
        • OpenSCAD: Final Project
      • OLD Art I - Blender Sculpting
        • Class Overview
        • Installation
        • Lesson 1 - Tools
        • Lesson 2 - Detail
        • Lesson 3 - Base Mesh: Metaballs
        • Lesson 4: Converting metaballs and adding detail
        • Lesson 5: Masking, Hiding, and Working with Multiple Objects
        • Lesson 6: Joining Objects & Basing
        • Lesson 7: Sculpture Painting
        • Student Gallery: Animal Sculpts
        • Lesson 8: 3D Compositon
        • Lesson 9: The Project - Putting it all together
        • Lesson 10: Developing the image further
        • Lesson 11: Layout the base metaball mesh.
        • Lesson 12: Final Detail
        • Lesson 13: Basing and Painting
        • Final Project Gallery
      • OLD Fab
        • OLD Building Community Project Gallery
        • Copy of Building Community Project Gallery
        • old Building Community Project Gallery
      • OLD: Turtle Design App
      • OLD Arduino Robotics 8
        • Arduino Basic Commands Cheat Sheet
        • Logging into Tinkercad
        • Arduino, Circuits, LEDs and Resistors
        • Functions and Variables
        • Serial Monitor
        • Buttons and Interrupts
        • Traffic Light Project
        • Potentiometers + Servos
        • Piezo Buzzer and Tone();
        • Sequencer Project
        • Arrays and for loops
        • Extra Loop Practice
        • Refining the Sequencer
        • Servos
        • Ultrasonic Sensors
        • Final Project
Powered by GitBook
On this page
  • Learning Targets
  • Serif vs Sans Serif
  • Color Palette
  • Call to Action
  • Raster VS Vector
  • Design Principles
  • Common Mistakes
  • Mostly Boring
  • Parallelism
  • Keep Room to Digest
  • Metro, Material and Flat Trends
  • Photoshop
  • Layer Masks
  • Resizing
  • Color Correction
  • Logo Design in Illustrator
  • Requirements of a Logo Package

Was this helpful?

Export as PDF
  1. Intro to Web Design

4: Graphics and Branding

Let's talk about the design in web design.

Previous3: Bootstrap TemplateNext5: Collaboration

Last updated 1 year ago

Was this helpful?

Learning Targets

  • I can describe the difference between raster and vector.

  • I can describe the difference between serif and sans serif.

  • I can iterate on my design.

  • I can use Photoshop's masking layers and quick select tool.

  • I can create a logo in Adobe Illustrator.

Serif vs Sans Serif

One of the first decisions to make when starting a new project is your font selection. It helps set a lot of the tone for your site. Typically, I select a header font and a body font--something fun for titles and something easy to read for my paragraphs.

Color Palette

Another key mood-setting decision to make is the type of colors you'll use around your site.

Once you've selected your colors, we're going to add a note to your custom CSS like so:

/**

COLORS
https://coolors.co/05a8aa-b8d5b8-d7b49e-dc602e-bc412b
Blue: 05a8aa
Green: b8d5b8
Red: bc412b
Orange: dc602e

**/

Adjust your colors!

Choosing a hero image isn't just about visual impact; it sets the color palette for your entire website. Remember that initial color inspiration you had? Time to revisit it! Once your hero image is finalized, re-evaluate your chosen color scheme. Does it complement the image's tones and moods? Can you pull color accents directly from the image itself? Aligning your color scheme with your hero image fosters visual cohesion, ensuring a seamless and aesthetically pleasing browsing experience for your visitors. Don't let your hero stand alone; let its colors sing throughout your website's design.

Call to Action

Raster VS Vector

If your image has been zoomed in or stretched too far, and it's a rasterized image, you'll notice the pixels that make up the image. That's a problem. But the solution is not to use a super high-resolution image with a big file size. That'll just make your webpage take forever to load. We need the right resolution each time.

Use vector where you can. Raster, if the image is the right resolution, looks great. The image below can confuse students into thinking raster is always blurry.

Design Principles

Common Mistakes

  1. Navigation that isn't simple, logical and explanitory

  2. No clear calls to action

  3. Insufficient contrast between text and background or clashing colors

  4. Jumbled, unengaging, or unorganized content

  5. Clutter

Mostly Boring

Backgrounds and most colors should NOT try to grab your attention. Most of it should be steady, comfortable patterns. Subtly is hard for students eager to splash bright colors on the page. That's why we study examples of great pages. Look how chill most of their decisions are... it makes the touches of bright color really exciting.

Parallelism

Brains love patterns and it can hurt when they're broken. Patterns exist in grammar, color, lines and all sorts of other things too.

Keep Room to Digest

Less is more.

When something is considered "clean" design

Metro, Material and Flat Trends

There is a constant variation in what's trending in web design styles. Here are three of the most popular. The last, flat, is more related to colors and icons and less known as a style.

Photoshop

Photoshop works with rasterized images (as opposed to vector images). Let's discuss the difference first.

We're going to learn about three basic skills:

Layer Masks

Resizing

Our themes typically come with images perfectly formatted for the area. Instead of taking a new image and trying to crop and adjust it into the right size, I simply edit the original image in Photoshop. Once it's open, I'll drag and drop the new one on top of that.

Color Correction

We add in new adjustment layers to tweak colors. Turning down the brightness on a hero image so that it lets your CTA stand out more is a common technique.

Logo Design in Illustrator

Requirements of a Logo Package

  • PNG and JPG images

  • Wide but thin logos (banner format)

  • Square shaped logos

  • Large, medium and small file types

  • Original .ai files as well as exported versions

  • Reversed colors for dark backgrounds as well as light backgrounds

Find a Tutorial

Find a tutorial that gets close to the effect you want. Follow along and then try to tweak and customize it.

Let's start by picking colors that match our intended mood

Webpages have agendas. The author wants the reader to do something, read something, buy something. Especially on a , you need to make the key action item into an exciting call to action button.

Check out about the top five mistakes most common in small companys' websites.

Lots of clear space with well-organized boundaries can create a "clean" feel. .

Let's learn a little about . Now we'll practice masks.

Consistency in colors, branding across all your emails and publications (attention to things like ).

If I can't hire a graphic designer for my client, I start with a template purchased from .

hero
this article
Example
types of images
favicon
GraphicRiver
LogoCoolors - The super fast color palettes generator!Coolors.co
LogoThe 7 types of logos (and how to use them) - 99designs99designs
LogoHow to design a logo
LogoHow to Create a Cool Cut-Out Text Effect in IllustratorDesign & Illustration Envato Tuts+
Serifs helped printers stamp ink onto the page
There's an irony here
Is this a happy or a sad picture? There are more frowns than smiles but it still feels happy
Notice this picture has a thick border around it unlike any other?
Metro style is angular, often monochromatic