Blog – Page 12 – Graphic & Web Design

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

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”.

Responsive Resize feature in Adobe XD: screen design for Illustrator and InDesign aficionados

This three minute YouTube video by Adobe XD evangelist @Pinskymust-see for designers wanting to get into screen design.

Adobe XD makes ‘responsive resizing’ design easy for those used to fixed document sizes in print layouts

From Fixed Layout to Shifty Divs

People often start their design career by learning Adobe software—namely Illustrator, InDesign and Photoshop.

Those applications are all over twenty years old. They were built with predetermined paper-based (or eventually with fixed pixel-based) sizes in mind. The apps weren’t developed with the notion that the page’s size can vary.

On the other hand, designing for a digital screen implies that the virtual page we work on is responsively resizing. In other words, whether you display your design on a smartphone, a tablet or a desktop computer – or you hold the device in portrait or landscape mode – the screen shape is isn’t the same.

Every designer weened on visually building fixed layouts faces the challenge of suddently having to previsualize a set of shifting rectangles before starting to build them out of code in order to be able to see them in the first place.

This new conceptual and analytical skillset is often diametrically opposed to the coordinated visual and gestural mouse-weilding skills that originally got students interested in visual design.

Responsive Resize to the Rescue

Adobe XD’s Responsive Resize feature lets designers visually create fluid layouts that adapt across different screen sizes and layout ratios using familiar drawing tools like the rectangle and circle.

Responsive Resize lets a whole range of previously acquired design skills suddenly translate to the dynamic nature of interactive screen layout and design.

Check it out and leave your comments below.

Emilie Ahier – Live a Life Driven by Creativity, Inspiration, and Passion

My name is Emilie Ahier, I am currently a Graphic and Web Design student at John Abbott College. I joined this program 3 years ago and at that time I didn’t even know if I would like it. I knew what Graphic Design was, but I didn’t know I would develop such a strong feeling of belonging. For me, detail is extremely important, and I find that I have a strong eye for it; I love to create minimalist and colourful designs and I am always eager to learn more. In this program, I really discovered who I was and what I wanted in life. As someone who is driven by the desire to create; I am passionate about my work. Above all, I wish to find a career path where I can express my creativity on a daily basis.

Samantha Zakher: Life after Cegep

Who am I?

My name is Samantha Zakher and I am a twenty year old student. I am currently attending John-Abbott College in my third year and studying Graphic and Web Design. I have always been passionate about design. Especially drawing and painting. Art was always my strongest subject in school.

What are my life goals?

Car Project done in Adobe Illustrator © 2018

I would mostly like to work in design just because I enjoy it more. I am really good at drawing and painting. I have been doing that since a was very young. I used to take painting classes every Saturday morning for two years just so that I could improve. Continue reading “Samantha Zakher: Life after Cegep”

Sarah del Buey: A Creative Path

My name is Sarah del Buey. I am a 20 year old student at John Abbott College studying Graphic and Web Design. From a young age I have always been creative and had a hunger to create different art forms that provoke people to feel something or open their minds to new thoughts. I have many skills such as photography, photo-editing, animation, video editing, and graphic design. My mission is to take these skills and help brands identify themselves and reach wider audiences.

Sarah-Maude Chapdelaine: Next couple of Years

Admiring fashion, the new trends every year since I was a little, that’s why it was easy for me to choose my niche of interest. Fashion has a big impact on my life since forever now. How I dress in the morning is how I set my mood for the day. I always tell myself I have to dress to impress not just for people around me but myself included. My niche of knowledge would be in the direction of the graphic design for the fashion industry based in Montreal. The fashion industry has been a subject that I’ve appreciated for many years now. I would devote my two strength together to have the best work experiences.

Arianne Fennell: An Evolving Plan

The Stress Of Making Decisions

vector self portrait by arianne fennell — Vector Self Portrait, **© 2019 Arianne Fennell**

When I was younger, I never worried much about the future. Things worked out for me and I found that I never had a difficult time in deciding what I wanted to do or how I wanted to do it. It’s only in my last semester at John Abbott College where I really felt the pressure of making decisions for my future. It required me to sit down and actually make a plan.

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

Who is Natasha Witwicki? Social Media Branding & Marketing Designer

Product pictures taken by Natasha Witwicki — Examples of my own product pictures.
© Natasha Witwicki, 2018

Hi there! My name is Natasha Witwicki. You already knew this, but I’m a third year graphic design student studying at JAC. I’m always up to something creative, whether it be drawing (both traditional and digital), photography, photoshop, or one of many niche art forms such as resin decoden. I love trying new creative things, seeing my aesthetic pop in whatever I decide to do.

My Experience

I have LOTS of experience in social media branding and marketing, as well as e-commerce. You wouldn’t know unless I told you since I’m a very shy, reserved person… but I have a small business that I’ve grown online with over 1 million followers.