theory – Graphic & Web Design

Movie Posters Expert Explains Color Schemes

James Verdesoto, the movie posters artist behind iconic posters such as Pulp Fiction, Ocean’s Eleven; Girl, Interrupted, and Training Day, explains how color schemes are used in Hollywood movie posters.

This is a great glimpse into the mindset of a graphic designer as he not only discusses the use color, but also other narrative and formal techniques such as the use of negative space in the composition, relative scales of the subject within the page, framing, and the use of logos.

A great crash course in graphic design in only ten minutes!

Grid System: The Basis of (Web & Print) Professional Layout

Grid Systems from Bas Leurs

Ever wonder how professional graphic designers make their work look so… professional? And how they manage to create complex layouts so quickly?

Simple. Both web and graphic designers—as well as architects—use one of greatest tools in the visual arts: the grid system.

Of the many different attempts during art history to create a design system based on a grid, the so-called Swiss Grid is probably the foremost example. In many ways, modernist graphic design is the Swiss Grid.

Based on a strategically chosen number of columns and sometimes also on text parameters such as font size and leading as well as baseline, the grid system makes placing elements on a page fast and precise.

For the reader, it makes a series of pages—or screens—predictable and intuitive. This increases usability and comprehension. In e-commerce systems, the well structured layout increases sales by making the navigation of the site and shopping cart more efficient.

Web Design Vocabulary

A basic set of vocabulary terms used in web design and development.

Server (software): A software dedicated to a particular task for example serving web pages, printing files or storing data.
Server (hardware): Once a server software requires too much power from the computer it is installed on for other programs to also run on it, the entire computer is dedicated to that particular task. For example: serving web pages.
Network: Any situation where two or more computers are connected in a way that they can “talk” to each other.
Domain Name: The name of a web site, such as “duckduckgo.com” or “johnabbott.qc.ca”.

Optimizing Images: A Lazy Web Designer’s Guide

Choose your image optimization wisely

illustration of speed — © Sean MacEntee https://www.flickr.com/photos/smemon/5183175462/ Creativecommons.org 2

Look at your image. Does it have millions of colors like a photograph does? Use JPEG.

Does it have flat color, as in a vector-based drawing with flat colored fills? Use PNG (or GIF).

Avoid using GIF. Use PNG instead. It is the open source equivalent (and even better) that was made to offer an alternative to the proprietary GIF image format.
Wikipedia article

TLDR? Look at this table instead

File Format	Image type
JPEG	Photographic imagery
GIF	Flat color, limited color palette, simple transparency.
PNG-8	Flat color, limited color palette, simple transparency.
PNG-24	Complex transparency

Understanding networking for web designers

When learning to become a web designer, it is critical to understand how networking works since so many different parts come together to make a web site work.

When a web site goes down, it can be anyone of the different parts that has failed. Being able to pinpoint that part, and who is responsible for it is key to getting the web site back up and running again quickly.

Internet and WWW aren’t the same thing

First of all, let’s get one thing straight. The internet and the World Wide Web are not the same thing.

The internet is a series of interconnected networks. It is a network of networks built of of private, public, academic, business, and government networks.

A Quick History

Mainframes

U.S. Army Photo from M. Weik, A technician changes a bad tube in the ENIAC computer circa 1940. — “U.S. Army Photo”, from M. Weik, “The ENIAC Story” A technician changes a tube. Caption reads “Replacing a bad tube meant checking among ENIAC’s 19,000 possibilities.” Center: Possibly John Holberton https://flic.kr/p/8QEF6m https://creativecommons.org/licenses/by-nc/2.0/

What is Semantic HTML?

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.
https://en.wikipedia.org/wiki/Semantic_HTML

For web design students, there are many career option when considering the universe of the World Wide Web. Front-end development, back-end development, front-end design… the options are many.

For those who wish to do more than only the visual layout of screens using tools like Sketch, the Adobe Illustrator and Photoshop (and so many others) there is one constant: writing good HTML.

Not all HTML is created equal

However, there is a distinction to be made. Not all HTML performs the equally in terms of search engine optimization, and not all HTML is easy for people to read.

Batch creating a list of folders using the Terminal

Batch creating folders with the terminal is easy and efficient.

Here’s a quick tip for anyone needing to create a large set of folders. This is often required when building the hierarchy of a large web site, or just for organizing the filesystem on your computer.

For example, in Graphic & Web Design we have the end-of-program comprehensive assessment. This is what the list of items required for the assessment looks like:

Explore web career path job titles & descriptions

Explore Rachel Manning’s detailed picture of the web industry in Dissecting Front-end Job Titles.

Web Designer — Probably went to school for graphic design. This role has mostly been replaced by UI design since the rise of appreciation for good user experience.

UX Designer — Often a researcher that brings the site to the stage of wireframes and prototypes.

UI Designer — Designs the look and feel of the site, often creating an advanced prototype.

Although it starts off mostly talking about Computer Science students, the discussion of design and interactivity careers is very good. It’s an important read for soon-to-be graduates interested in web careers.

Soon you will be meeting teams of people. All of them with very different responsibilities and skills. This article helps differentiate the forest from the trees.

Structuring plain text data

The internet, and the World Wide Web are based on plain text.

Everything on the web is plain text: .html, .css and .js files. (Pictures, audio and video aren’t in plain text of course – but they were added on the web much later.) To be a productive web designer, you need to be able to efficiently edit text files – and even several ones at once.

Screenshot of the very first web page hosted at CERN in Switzerland.

In 1989, when Tim Berners-Lee and Robert Cailliau invented HTTP and HTML, there was no “visual” world wide web. The world would have to wait until the launch of Mosaic to have a “graphical browser”.

For years, and even decades, computer networks were criss-crossed by typing commands in Terminals and using text-only tools like FTP for transferring files or various text editors (from nano to Vim and Emacs) to create and edit them.

Continue reading “Structuring plain text data”

Basic BASH Terminal commands for Web Designers

The moment you choose to get into web design and development, you choose to enter a universe of endless connections in between machines scattered across the globe.

mother — Louise Bourgeois’s Maman spider sculpture and the web it cast in shadows at dawn. National Gallery of Canada. Ottawa, Ontario Canada. Photo ©Eric Girouard.

There is you at your computer, and then there is everything else on the internet. By definition, the rest of the internet is “remote” to you dear reader of this post.

So, once again by definition, web design is a career where all the important stuff happens on other machines – on “remote web servers” usually – and being able to connect to such a machine to create and edit files and folders as well as manage transfers of data from machine to machine is a valuable skill.

The most efficient tool for logging into any remote computer is the CLI (“command-line interface“) which you gain access to when you start an application called the Terminal.