“Graphic Design for Websites” is a workshop placing an emphasis on the basic elements and principles of graphic design in relationship to front end web design aesthetics. Students will be exposed to various examples and applications for wordpress based websites (on the CUNY academic commons and beyond). The workshop will also introduce and apply a myriad of Open Education Resources on design, techniques and software. Hands on exercises will be explored. Bring your lap top.
This week I had the honor of creating and presenting a workshop for the CUNY Graduate Center Students in the Digital Initiatives program. As per the workshops description above, we had a blast and covered quite a bit of information! This workshop was designed for students who have limited or no access to Adobe products and software. Have a look!
This is a multiple part assignment, please make that each step is followed.
Assignment specifications –
Part 1 – Students will create a fictional company. The company can produce any kind of product or service that you wish. Students will generate a one paragraph written description about the company, its products and services. The company will need a new logo and visual identity created from scratch to help bring its presence to life.
Part 2 – Creating a design brief and doing the research – Now that you have decided on the type of company, its products and services, who is the competition out there that already exists? What do those logos look like and are they effective? Who are your companies customers? What is the age range of your customer? Where will they find your business? Online or offline? Describe why. The more you know about your business, its products and services (and the believe in them) the more you can offer a solution to your client. A logo is usually the first thing that they will see. How will you grab their attention with your companies visual identity?
Part 3 – Sketch and development. Watch Draplin’s video below. He has a great style and technique for the process. Create a series of sketches in pencil. I suggest making small thumbnail sketches as we have discussed in our class.
Part 4 – Iterations, variety and development, using art boards and making decisions on type, colors schemes and scale.
Part 5 – Production and application. Formatting business cards, letter heads and related usage for both print and the web.
**We will be using Adobe Illustrator for this project from start to finish.
Below are a series of helpful resources to explore the world of logos, branding and identity. The videos and podcasts below are super helpful and applicable.
**Student Resources & Examples – What are some of your favorite logos and brand identities? Share a few examples in the comments section below by using a URL.
Typography Assignment – PART 2 – (as discussed in class on 11/21 and will continue on 11/28)
We will have a class critique on Wednesday 11/28 – a printed version of this assignment will be presented by each student. You will select two of your designs from Part 1 and print them as a single tabloid page.
Students will create a new 11″X17″ tabloid layout set for print in Adobe Illustrator. (You may use use multiple art boards to create iterations) Students will apply a series of their designs from part 1 into a collaborative magazine for print and the web.
*Student submissions of the completed project:
Student will submit both Part 1 & Part 2 of the project to me via e-mail saved as a .PDF file. Please send to – rseslow@bmcc.cuny.edu no later than Friday 11/30/18
FINAL PROJECT Discussion – Its time to discuss our final project! A class discussion about our final project will take place at the end of our class critique tonight.
(This post card Ad is only a simulation, not an actual event)
MID-TERM CRITIQUE
I will give a demonstration on how to print your Mid-Term projects from Illustrator when you arrive to class. Mid-term projects will be saved as a .PDF file from Illustrator and e-mailed to me – rseslow@bmcc.cuny.edu – Mid-term projects will also be exported for the web and saved as a high resolution JPEG file. These files will also be e-mailed to me.
**Mid-term projects are both vertical and horizontal files sized at 11″X17″.
We will be critiquing all completed student work during this class session. All students will participate in the critique. The visual critique is NOT a work session using the computers.
Project #5 – Class Discussion & Assignment – Applying type to Images, fonts, typefaces, composition, formatting and output for print & the web..
Typefaces and Fonts are built out of shapes and forms. Integrated with color and interesting compositions they become a powerful tool for creative output and the ability to solve design problems through visual communication.
Assignment – Poster Design with Type & the Alphabet. Create 2 new poster designs using typography in adobe illustrator. Students will generate both a balanced and unconventional composition using each individual letter of the alphabet. The examples above are just a few potential examples of style, simplicity and efficiency. A demonstration will be given in class.
Size requirements – 8.5 inches X 11 inches
Typefaces – Limit yourself to no more than 2-3 different fonts and 4 color values.
Step 1 – Find and discover your own inspiration and share the URLs in the comments section below. Each student will add 2-3 URLS of their inspiration in the comment section before starting this assignment.
Things to consider – Layout & balance – Using rulers and grids. Free transformation & typesetting style.
Project #1 – Post Cards – Class Critique – Post Cards were due via e-mail on Friday the 28th. Did you submit yours? If not, please do! E-mail the .jpg file to rseslow@bmcc.cuny.edu – Lets discuss printing versus screen resolution images, presentation and critiquing our results – I added a gallery page for our completed projects – here
LAB INFO:
Attached here is an updated list of the Fall 2018 student computer labs for this semester with their corresponding schedules and software available.
Also, tutoring services available for MMA100 students. The most recent list of tutors for MMA100 / MMP / VAT & MES is attached here in case you may want to make an appointment with a tutor.
Project #2 – Instructions – To be completed by next Wednesday 10/10 by 8pm
The Elements & Principles of Design are the governing vocabulary that define, illustrate and communicate how Graphic Design functions all around us. (Vocabulary Below)
Assignment Specifications: Students will generate a series of visual examples and solutions to define, communicate and illustrate the vocabulary of the Elements &Principles of Design. Each term will display an image example of the vocabulary listed below.
Size: – Students will determine the size of the layout – The final design may be a composite of 8 shapes composed and arranged onto one single page.
Process:
Part 1 – Student will first create a layout based on research and investigation via the Internet and class resources. Each term for the elements & principles of design will be illustrated by cutting, formatting and placing an example into a composition. (the example above from last week is one example, you can create your own) Templates a linked below. I suggest creating one using photoshop and the other using illustrator.
Part 2 – Students will generate their own examples of each term using techniques learned in class with both photoshop and adobe illustrator.
R&D – Where will you find visual inspiration and research?
Students should conduct research! (and not select only one image) Build a small repository of images and references! We will discuss this in class – generate or organize a series of thumbnails using pencil and a sketchbook (or their preferred method) to brain storm and illustrate their process.
Production:
Students will prepare their final works for both print out put in (CMYK) as well as presentation and application on the web (RGB).
Submission: Via e-mail to rseslow@bmcc.cuny.edu
Elements – Via Photoshop – File -> save for Web – select jpg.
Principles – Via Illustrator – File -> PDF.
Due dates for next week: We will be working on and completing this project in class (and outside of class if you need to) The project is due next Wednesday 10/10 at 8pm.
Please re-review the vocabulary below.
The Elements & Principles of Design Vocabulary
The Principles of Design
(The principles of design are tools used to format the elements of design.)
Balance – The elements of design converge to create a design or arrangement of parts that appear to be a whole with equilibrium.
Contrast – The “automatic principle.” Whenever an element is placed within a format, contrast is created in the various elements. Can be emphasized with contrast in size, shape, color,
Direction – Utilizing movement to create the visual illusion of displacement.
Economy – A principle operating on the “slim.” Especially important when dealing with clients, where their product or service is more important than the elaboration of design elements. Can also be considered “precise,” or “simplistic.” Or, it can be considered great design.
Emphasis – Also known as dominance. This condition exists when an element or elements within a visual format contain a hierarchy of visual importance.
Proportion – A two- or three-dimensional element defined by other elements of design.
Rhythm – A recurrence or repetition of one or more elements within a visual format, creating harmony.
Unity – Oneness, Harmony, The condition of completeness with the use of all visual elements within a format.
The Elements of Design
Color – typically known as hue. This word represents a specific color or light wavelength found in the color spectrum, ranging circularly from red to yellow, green, blue and back to red.
Line – is a line just a series of points? Or is it the best way to get from point “A” to point “B”? As a geometric conception, a line is a point in motion, with only one dimension – length. Line has both a position and a direction in space. The variables of line are: size, shape, position, direction, number, interval and density. Points create lines, lines create shapes or planes and volume.
Mass – Here, mass is interchangeable with volume. A mass is a solid body or a grouping of visual elements (line, color, texture, etc.) that compose a solid form. Volume is a three-dimensional form comprising length, width, and depth. Three-dimensional forms contain points (vertices), lines (edges), and planes (surfaces). A mass is the two-dimensional appearance of a three-dimensional form.
Movement – Also known as motion. This element portrays the act or process of changing place or direction, orientation, and/or position through the visual illustration of starting or stopping points, blurring of action, etc. This is not animation, although animation is an end product of movement, as well as other elements of design.
Space – A two-or three-dimensional element defined by other elements of design.
Texture – A technique used in two-dimensional design to replicate three-dimensional surfaces through various drawing and media techniques. On three-dimensional surfaces, it is experienced by touch or by visual experience.
Type – Also known as typography, and it is considered an element in graphic design. Although it consists of elements of design, it is – in itself – often an element in the form of visual communication.
Value – Another word for the lightness or darkness of an area. Brightness measured in relationship to a graded scale from white to black.
Color Theory – (Image via Arhaus‘ via Justcreative)
The link below was published via – JustCreative.com – This is great guide to understanding color in design with an emphasis on logos, identity and branding.
I highly recommend visiting and learning from JustCreative.com aka – Jacob Cass – Jacob is an amazing graphic designer and conduit of great design resources.
Video Screenings –
Photoshop Tutorial – The top 10 Things photoshop Beginners Want To Know How To Do
I love and recommend Terry White’s Youtube channel. He is an Adobe software wizard! Subscribe here.
Who is Michael Bierut and Why is he important? Please watch the video outside of class this week and respond in the comments section below. This is mandatory)
What is GESTALT and why is it important in Design? An introduction.
Dear BMCC MMA100 Spring 2018 Graphic Design Students,
I hope that this message finds you all well! As the summer begins to winds down I wanted to alert you to a few things:
First and foremost, our awesome class ZINE collaboration with CT101 students from York College is now officially accessible in print and available at the NYPL at their 5th Avenue & 42nd Street location – DeWitt Wallace Periodical Room at the Stephen A. Schwarzman Building . As a public space, all visitors to the NYPL can take out the zine for review. There are two copies reserved and forever archived. I will also be submitting 1 copy of the zine to the BMCC library on campus. I will let you know once it has been cataloged and is ready for viewing. You can also revisit, comment and contribute in reflection to the project by clicking on the graphic below.
2. The fall 2018 semester is upon us! I will be using this website on the CUNY Academic Commons for our class again. This means, that you will be receiving e-mails about class assignments, exercises and resources for the fall 2018 semester. I strongly suggest that you remain a part of our community! There are foundation elements that will be re-emphasized and to your learning and retaining advantage. I hope to see your comments and future contributions! The class will run at the same time and on the same day (Wednesdays – 5:30pm – 9:10pm) in the Fiterman Building – Room 706. Come and visit! Incoming students will learn from your wisdom as you share what you are applying into the field now.
PS – you can always unsubscribe from the e-mail list if you wish and simply come and visit the website for new information!
PSS – I would love to hear from you! Let me know what you are working on!
Part 1 –Students will go here<—- to read and respond to the Collaborative zine project dialog blog post. The reactions from our York College collaborators await us!
The cross CUNY course zine project between BMCC MMA100 graphic design and YORK College CT101 Digital Storytelling continues. Please make sure that you comment on the project as a whole as well as selecting your favorite pieces to comment on!
Above: Individual pages submitted by BMCC MMA 100 Foundations of Graphic Design Students
(Click any image to activate the slideshows of individual works)
Below: Individual pages submitted by York College CT101 Digital Storytelling Students
Synopsis – Professor Ryan Seslow’s students at CUNY BMCC & York College have come together to create an experimental cross course and CUNY campus collaborative zine. The zine project synthesizes the two disciplines of graphic design foundation and digital storytelling courses. Both courses were given the same information and assignment below to complete the project from the perspective of their class content and personal experiences.
As individual courses, we were interested in knowing how traditional design principles relate and contrast to the medium of storytelling (and vice versa) through the use of integrated software applications and web tools when applied and presented in a public space? “Public space” has an interesting context both physically and virtually. We wanted to test both.
What will the results be both digitally and non-digitally?
How will the immediacy of publishing to the Internet and the contrast of using a public library (NYPL) to experience the same content effect the overall generating and receiving of the works?
What kind of dialog would this create? (This is the short list of questions, we have many more!)
This blog post displays several examples of the creative learning potential of what can be achieved between two different college courses on two different campuses. It shows the creative potential of how we as human beings see things from our own unique perspectives and how things can always be another way. Solutions are friendly and inspired by collaboration. This blog post also severs as a gallery and exhibition space for the project.
We jumped in.
The process::
Part 1 – Design
Design Project Specifications & Simulation – You have been selected to contribute 1-2 pages to a collaborative cross discipline magazine that produces a quarterly publication in both a DIY – Do it Yourself printed edition for public access (NYPL Zine Collection) and an online digital version hosted on the CUNY Academic Commons BMCC MMA 100 Website.)
A downloadable pdf. version of the entire zine will also be available upon full completion of the project. (Anticipated publishing date 5/25/18)
Your submission to the publication will creatively communicate:
“How technology and creativity are powerful learning tools for inspiration, expression, digital storytelling and design.”
You have the creative freedom to produce and generate your contributions with full autonomy as to how you experience or define the description above. However, your final submissions should display an integrated composition of imagery (use of layers and opacity) along with descriptive verbiage typeset creatively.
***Size Requirements – 8.5 X 11 inches vertical, please, jpeg & pdf file formats.
Edition #1 of the printed version of the ZINE is now available at the NYPL on 5th Ave NYC.
Part 2 – Commenting & Dialog
In the comments section below: BMCC & York students will respond and react to both the project as a whole (in the space directly below) and individually to each other’s submissions (click on an individual piece that stands out to you and add your comments.)
TheAcademic Commons is a public platform and space for CUNY and beyond, the C.A.C commons community will also be invited to participate in commenting and creating dialog here.
Please consider addressing the following questions:
*What common threads or similarities do you see between the submitted work?
*What differences do you see?
*How does seeing all of the works organized into one space enhance or disrupt your interpretation of the project and its outcome?
*How do you think the general public will appreciate the project viewing it as a tangible object rather than an online experience? Do you prefer one over the other? Please explain and describe your answers. The printed zine will be donated to the NYPL’s Zine collection at their 5th Avenue & 42nd Street location – DeWitt Wallace Periodical Room at the Stephen A. Schwarzman Building
The printed ZINES will also be available at the BMCC & York College Libraries as of fall 2018.
Additional statements and questions can be generated by each student below as well.
A HUGE Thank You to all of the participating Students!!
*Featured image above by BMCC student Tugberk Ozpir
* Front and back cover Art by Marquis Gregory & Shaquille Edwards
* Special Thanks to Shannon Keller at the NYPL & The CUNY Academic Commons Committee
For additional queries contact me here – rseslow (at) bmmc.cuny.edu
**Midterm Project – Full Lab Session & class critique**
(The example image above is an RGB mode JPEG formatted for screen resolution and the web, however, when you click on the image it directs you to a print ready CMYK formatted PDF).
Specific Communication – Composition, Type, Image & Color – Solving Problems
Project Title – “Collaborative ZINE”
(This will be a cross CUNY campus collaboration project with CUNy York College CT101 Digital Storytelling Students!)
We will have a full lab session to work on and prepare our Mid-term projects this week during our class time tonight on 3/28/18 due to the snow cancellation last week. We will present our final designs in class tonight as well – 3/28/18. (and continued after spring break if we need to as well)
Design Specs – As per our conversation during our last class session – You have been selected to contribute 2 pages to a collaborative magazine that produces a quarterly publication in both a printed edition and an online digital version. Your submission to the publication will creatively communicate how technology and creativity are powerful tools for inspiration, digital storytelling and design. You have the creative freedom to produce and generate your contributions with full autonomy, however, your final submissions should display an integrated composition of imagery (use of layers and opacity) along with text. (see example above)
Students will have the ability to revise the works after the first critique and submit their updated iterations.
***Size Requirements – 8.5 X 11 inches Vertical
Usage of Imagery – Students should NOT randomly use images that find on the Internet, especially with out proper attribution to its creator. Please refer to our class resources page and work from the numerous repositories of public domain and creative commons sources – go here – https://bmccmma100.commons.gc.cuny.edu/course-resources/
Software Skill Showcase – Over the past 6 weeks we have toggled through learning various techniques and methods working with both adobe photoshop and illustrator. All image related composing and manipulations should be generated in photoshop, saved as a .psd file and placed into a new illustrator document (sized at 8.5 X 11 CMYK color mode) for typesetting and laying down text. (Please do not use photoshop for adding text with this assignment).
Submissions – Students will save all of their work and submit a compressed folder of all of their working files. This will include the original .psd photoshop and .Ai illustrator files – A .pdf saved via illustrator for print (display for class critique on 3/28/18) and one high resolution jpeg. for the digital zine publication on this website. (Convert to smart object and e-mail to me).
***I will give a demonstration on creating the folder and compressing it for submission on 3/28.
HAVE FUN!
YES, you MAY create more than the minimum of two examples that you are being asked to complete!
(Week #6s’ website content included several resources on typography, color theory and two great talks by John Maeda).
Upon arrival to class this evening 3/14 please review the information below:
1. Please print and pin up your Elements & Principles of Design assignments (print as pdf. files)** Class critique.
2. Class Exercise – If you have not yet done so, Please complete the lab work on week #5s in class assignment on shape, form, variety, color & composition using Illustrator. Click here for a .pdf example.
*Be sure to add your name and course info as seen in the example. Print your work as a .pdf as well as by exporting it for the web as a .jpeg file (we will recap in class).
3. Class Discussion & Assignment – Applying type to Images, fonts, typefaces, composition, formatting and output for print & the web..
Typefaces and Fonts are built out of shapes and forms. Integrated with color and interesting compositions they become a powerful tool for creative output and the ability to solve design problems through visual communication.
Assignment – Poster Design with Type & the Alphabet. Create a new poster design using typography. Students will generate a balanced composition using each individual letter of the alphabet. The examples above are just a few potential examples of style, simplicity and efficiency.
Size requirements – 8.5 inches X 11 inches
Typefaces – Limit yourself to no more than 5-6 different fonts and 4 color values.
Step 1 – Find and discover your own inspiration and share the URLs in the comments section below. Each student will add 2-3 Urls of their inspiration in the comment section before starting this assignment.
Things to consider – Layout & balance – Using rulers and grids. Free transformation & typesetting style.
Specific Communication – Composition, Type, Image & Color – Solving Problems
Project Title – “Collaborative ZINE”
We are at the mid-point of the semester! Wow! Lets discuss our Mid-term project and up coming critique. We will have a full lab session to work on and prepare our Mid-term projects next week during our class time on 3/21/18 . We will present our final designs in class on 3/28/18.
Design Specs – You have been selected to contribute 2 pages to a collaborative magazine that produces a quarterly publication in both a printed edition and an online digital version. Your submission to the publication will creatively display how technology and creativity are powerful tools for inspiration, digital storytelling, communication and design. You have the creative freedom to produce and generate with full autonomy.
Size Requirements – 8.5 X 11 inches Vertical
Submissions – pdf. for print (display for class critique on 3/28/18) and one high resolution jpeg. for the digital zine publication on this website. (Convert to smart object and e-mail to me).
Email us at commonshelpsite@gmail.com so we can respond to your questions and requests. Please email from your CUNY email address if possible. Or visit our help site for more information:
