Log in

goodpods headphones icon

To access all our features

Open the Goodpods app
Close icon
All of the Above: Design, Code, and Learning - 33: Vector v. Raster, with Sean Doran

33: Vector v. Raster, with Sean Doran

07/21/15 • 10 min

All of the Above: Design, Code, and Learning

Episode 33: Vector v. Raster, with Sean Doran

In this episode:

Ever hear the words "vector" and "raster," when talking about graphics, but wondered what that actually meant? In this quick episode, Sean goes over the technical differences between the two, when each image type should be used, and how to optimize them.

SUBSCRIBE WITH

iTunesOvercastTuneInPocket CastsRSS


Show Notes & Links

Apps & Tools Mentioned

Sketch 3 by Bohemian Coding

Adobe Illustrator CC

Inkscape

Affinity Designer

Pixelmator

Adobe Photoshop CC

Gulp.js

Grunt.js

ImageOptim

Alfred


Intro

Since I recently taught a 2 hour workshop on Sketch 3, I wrote a couple of emails to the attendees the week leading up to the class in preparation for what they’d be learning. In the workshop I was showing them how to use Sketch 3 as a tool, and how to take advantage of what it has to offer, while also highlighting what areas Sketch isn’t good at. I didn’t have time to give an introduction to design basics, so that’s what these emails were for.

Sketch 3: A-Z was a one-week workshop that gave attendees the principles for designing modern day websites, and how they could get up and running with Sketch 3 as a new design tool to see their ideas come to life.

Before I begin, a big thank you to Kevin Mack and Columbus Web Group for putting on these Weekend Workshops. They are free, open to the public, and are meant to offer accessible education that isn’t your traditional schooling route. The monthly free meetups make for great networking events, educational opportunities, and an all around fun time. I can’t recommend them enough.

Scooby Doo after a couple of Scooby snacks

With programs such as Sketch 3, Adobe Illustrator, Affinity Designer, InkScape, we have what are called vector-based applications. So what I mean by vector-based is that it is based on points: tiny dots that have an X and Y coordinate. If you think back to grade school, you probably had graph paper and were told to put dots at certain (X,Y) coordinates. After all the dots were on the paper, you would connect the dots with a line in a certain order, and you’d end up with a drawing!

Sketch 3, and any design program that can handle vectors, takes that same graph paper concept, and steps it up a notch. Here's a lovely SVG just for you.

Vector graphics uses geometrical objects, like points, lines,...
plus icon
bookmark

Episode 33: Vector v. Raster, with Sean Doran

In this episode:

Ever hear the words "vector" and "raster," when talking about graphics, but wondered what that actually meant? In this quick episode, Sean goes over the technical differences between the two, when each image type should be used, and how to optimize them.

SUBSCRIBE WITH

iTunesOvercastTuneInPocket CastsRSS


Show Notes & Links

Apps & Tools Mentioned

Sketch 3 by Bohemian Coding

Adobe Illustrator CC

Inkscape

Affinity Designer

Pixelmator

Adobe Photoshop CC

Gulp.js

Grunt.js

ImageOptim

Alfred


Intro

Since I recently taught a 2 hour workshop on Sketch 3, I wrote a couple of emails to the attendees the week leading up to the class in preparation for what they’d be learning. In the workshop I was showing them how to use Sketch 3 as a tool, and how to take advantage of what it has to offer, while also highlighting what areas Sketch isn’t good at. I didn’t have time to give an introduction to design basics, so that’s what these emails were for.

Sketch 3: A-Z was a one-week workshop that gave attendees the principles for designing modern day websites, and how they could get up and running with Sketch 3 as a new design tool to see their ideas come to life.

Before I begin, a big thank you to Kevin Mack and Columbus Web Group for putting on these Weekend Workshops. They are free, open to the public, and are meant to offer accessible education that isn’t your traditional schooling route. The monthly free meetups make for great networking events, educational opportunities, and an all around fun time. I can’t recommend them enough.

Scooby Doo after a couple of Scooby snacks

With programs such as Sketch 3, Adobe Illustrator, Affinity Designer, InkScape, we have what are called vector-based applications. So what I mean by vector-based is that it is based on points: tiny dots that have an X and Y coordinate. If you think back to grade school, you probably had graph paper and were told to put dots at certain (X,Y) coordinates. After all the dots were on the paper, you would connect the dots with a line in a certain order, and you’d end up with a drawing!

Sketch 3, and any design program that can handle vectors, takes that same graph paper concept, and steps it up a notch. Here's a lovely SVG just for you.

Vector graphics uses geometrical objects, like points, lines,...

Previous Episode

undefined - 32: The Web Design Equation, with Sean Doran

32: The Web Design Equation, with Sean Doran

Episode 32: The Web Design Equation

In this episode:

Feeling overwhelmed with your web design project? Too many things to keep track of? Today Sean shares the system he uses to manage projects — keeping him focused on solving problems instead of worrying about what he’s missing.

Subscribe With

iTunesOvercastTuneInPocket CastsRSS


Show Notes & Links

Apps & Tools Mentioned

Pattern Lab

Sketch 3 by Bohemian Coding

Sketch Toolbox

Sketch Mirror by Bohemian Coding


Designing like a Mathematician

Whether it’s designing a website, a mobile app, or something in between, there are five parts to the design equation: Constants, Variables, Constraints, Maximums, and Minimums. When confronted with a large project, it’s helpful to identify what bucket each element of the screen falls into. From there, it’s easier to iterate and refine towards a final solutions. So let’s explore these in a little more detail.

But before we can explore those ideas in more detail, there’s one methodology that will help you out immensely: Atomic Design

Unlike print design, designing digital products, e.g., websites, apps, lend themselves to so many variables that are outside of your control that it can get overwhelming.

But First, Biology and Atomic Design

Atomic Design is a concept that Brad Frost first presented in 2013, and has been refining ever since — even creating Pattern Lab, a tool to help implement this approach to front-end web development. It breaks down the web page into 5 different building blocks:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

The idea behind Atomic Design is to create reusable patterns through combining atoms, molecules, and organisms to create templates. With these templates, they can be translated into specific pages. The deeper dive into what each group is, and how it’s defined can be found on Pattern Lab’s about page. For a basic overview:

Atoms

These are the single solitary building blocks of a web page. These would be your headers (h1’s and h2’s) , buttons, and input fields. Just single entities that live by themselves.

Molecules

Take one atom, and combine it with another atom. There’s your molecule. It can have more than two atoms, but the goal is that the molecule performs one function, and it performs it well. Take a block quote with a citation at the end of it. That would be combining the block quote atom with the citation atom to create that molecule.

Organisms

Organisms are combinations of molecules and/or atoms. The best example of an organism would be a header. You have navigation (atom), a logo (atom), a search box, input text, and a search button (all together a molecule). This fits right in with what an organism should be.

Template

This would be a fully composed layout of what kinds of information should be displayed on the page, but not actually filled in with information. T

Page

Now, if you are to take a look at your Facebook Profile, you can see everything that I just mentioned, but filled out with content that makes it a real page.


Onto the Equation

Now that you know what atomic design is, and how it helps you to identify and design reusable patterns, let’s get into the nitty gritty.

Constants

When working in an agile environment, it sometimes feels as if the only constant is change itself. But within a project, there are things that become staples and will never change, or at least they hopefully won’t change for an extended period of time.

Constants can be items such as:

  • Brand Logo
  • Company or Product Name
  • Color Palette
  • Typography
  • Existing Content

These are more or less the essentials to a basic website

Other than those basic fundamental parts of a web design, there are tons of other constants that are used within ...

Next Episode

undefined - 34: None of the Above | The Hiatus Episode

34: None of the Above | The Hiatus Episode

Episode 34: None of the Above | The Hiatus Episode

In this Episode:

This isn't a goodbye, this is a "see you later" as we blastoff into the sunset, sailing through the atmosphere with reckless abandon.

Subscribe With

iTunesOvercastTuneInPocket CastsRSS


Sunset by Nick Slater

Episode Artwork Inspiration

Nick Slater is an amazing illustrator that you should definitely follow. He is prolific, has an identifiable aesthetic, and is always delivering high quality work. I remembered seeing this illustration a month ago, and it instantly popped in my head when trying to come up with something as we "sunset" our podcast. Also, Professor Blastoff.


Show Notes & Links

Sean Patrick John Paul George Ringo Doran

Sam Jebediah Bantner

Bryan M Brush


The Final Feedback

How did you enjoy this episode? It was short, and sweet, and we might not make any more — but rating it on iTunes is forever.

Review on iTunes

Episode Comments

Generate a badge

Get a badge for your website that links back to this episode

Select type & size
Open dropdown icon
share badge image

<a href="https://goodpods.com/podcasts/all-of-the-above-design-code-and-learning-4922/33-vector-v-raster-with-sean-doran-192386"> <img src="https://storage.googleapis.com/goodpods-images-bucket/badges/generic-badge-1.svg" alt="listen to 33: vector v. raster, with sean doran on goodpods" style="width: 225px" /> </a>

Copy