4: Graphics and Branding
Let's talk about the design in web design.
Last updated
Let's talk about the design in web design.
Last updated
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.
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.
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:
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.
Webpages have agendas. The author wants the reader to do something, read something, buy something. Especially on a hero, you need to make the key action item into an exciting call to action button.
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.
Check out this article about the top five mistakes most common in small companys' websites.
Navigation that isn't simple, logical and explanitory
No clear calls to action
Insufficient contrast between text and background or clashing colors
Jumbled, unengaging, or unorganized content
Clutter
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.
Brains love patterns and it can hurt when they're broken. Patterns exist in grammar, color, lines and all sorts of other things too.
Less is more.
Lots of clear space with well-organized boundaries can create a "clean" feel. Example.
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 works with rasterized images (as opposed to vector images). Let's discuss the difference first.
We're going to learn about three basic skills:
Let's learn a little about types of images. Now we'll practice masks.
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.
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.
Consistency in colors, branding across all your emails and publications (attention to things like favicon).
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 that gets close to the effect you want. Follow along and then try to tweak and customize it.
If I can't hire a graphic designer for my client, I start with a template purchased from GraphicRiver.
