Skip to main content

Graphic Design Fundamentals: Getting Started

Lesson 13 of 18

Designing a Website

 

Graphic Design Fundamentals: Getting Started

Lesson 13 of 18

Designing a Website

 

Lesson Info

Designing a Website

And then that brings us, then, to the issue of editorial work, when you're dealing with interactivity, and that is designing a website. So, the model for the sort of organizational or typographic model, for information on the web, is pretty much a more or less direct translation of book structure, or of newspaper structure. More often newspaper structure. It is set up typically using a grid of columns in a certain number, or to accommodate certain kinds of content that might change. And here's the kind of use of the flexibility of a grid, is that while some kinds of content might be very, very static, others might be changing on a regular basis. They may be database driven. The user may be able to select some content to appear and disappear. So the elements, unlike in a book experience, actually begin to move. So there's a little game you have to play with what's going to get hidden by something, where do you need to have spaces open, and so on. And the newspaper or brochure is a typic...

al model for this kind of website we're going to look at, which is often referred to as brochure ware. So this is a site for a construction architectural services company. It's family owned. Italians of three generations, three or four generations back, who have been working together that long with an incredible attention to detail, sense of craftsmanship and heritage that they brought with them from the old country. Essentially this site functioned as a brochure for their services, introducing a profile, the company, contact information, email form for getting estimates. Very, very sort of prosaic, day to day use kind of thing, but it's primary focus was to show off projects. My research in this case, also, was quite diminished in scope, and that is because I hired Dibiasi for a small project in my apartment, and I was getting quotes and they had given me a business card, which was thoroughly ugly and as you can imagine, not well designed. If you've ever seen construction companies business cards, they tend to be sort of like lawyers business cards, and not very interesting. So, in return for a portion of the cost of the services, I designed the business card for them, which is always something you can do, you know, you can trade. Sometimes things work out. So I chose a typeface for the name that was very strong. It's a very industrial or a slap serif typeface, with very industrial character. I used, essentially, adjust the various weights within that type family. The black, the book weight, and the medium weight, and on occasion for supporting information, I simply used a little bit of a softer sans serif, something slightly condensed as this slap serif is also slightly condensed. It's not quite a regular width font, just to be able to set it back. There's only, this particular typeface, it's contours and the joints are so active, there's a lot energy kind of pulsing around the outer contour of these letter forms. The negative spaces tend to get really, really pinched, so no matter how small or how light I made this supporting information, using the same typeface, I could not get it quiet enough. So I had to add other things so there was enough contrast between it and something else. They got these printed, and they had a really, really good response to them. So they asked me, "What else should we do?" I said, "Well, you should probable have a website." They said, "Well, we have a website." and then I looked at that, and didn't really need to look further, because it was also, as you imagine, somewhat ugly and kind of like the original business card. I said, "Okay, let's talk, let's talk." So the reason I didn't really have to research, because there's already a kind of a feeling. There's a language involved. There's a typeface chosen already, and a sense of a kind of geometry that I could use. So the first thing I did was to gather information from them. What do you want to be able to show? What's the most important part? And that was primarily projects. The project area, or page within the site was going to carry the bulk of the stuff. The most interactivity, the most photography, the most text, and so on, and the other ones were essentially sort of lists, and paragraphs on occasion, with very, very little information. In the sitemap I'm showing, connectivity here between the individual projects and either testimonials or client list directly related, so that if the user wants to investigate the project further, potentially to get a reference to ask about their, Dibiasi's, performance and reliability, is that they could just go find who the client was. But on the project pages, the projects are noted by their location. So after I made the sitemap, I started looking at ideas, and here, again, with the sketches. So, I knew there was going to be some geometry involved. I started looking at things that were very, very heavily gridded out, creating sort of band structures. For list information that could go sideways. That could also contain images, and potentially open and close to reveal more information if you clicked, and it would be like a scrolling accordion kind of a deal. Sort of column structures, with headings bases in either colored or solid squares, with different kind of a square proportion. Really kind of asymmetrical and very, very light configurations. Configurations focused on materials. This is a progression of splices of wood, metal, marble, tile to show off the detail and material. Looking at a dot that's so prevalent in the period at the end of the name, which I added, simply because it's such a strong name, and it ends with this kind of a eeee, and I just wanted a pop at the bottom, and it also became almost like a nail head at the end of the word. Some in which there would be kind of, what is often a very typical letter boxed beauty shot of a project, with very, very minimum navigation. And my goal throughout, was to really keep the navigation as quiet and minimal, at the sort of the top level, or the global level as possible. Because, especially in the project pages, there would be additional sub-navigation, where once you were within the project pages, where the project page is, you'd be able to poke around in different kinds of things. I was looking at some possibilities for images, which are not all that typical in websites, in a graphic way. So I started to thing about, and so, what are those images? The first thing I thought of was, there's something about Italian people and Italian graphic design, especially Italian modern graphic design that is very to the point, very direct. And at the same time not direct in a brusque or an austere way, but in a casual, very finely finessed sort of detailed way. It's almost like Italian cooking. It's about the freshness and the native quality of the ingredients, and how good those elements are just as they are, and you sort of put them together, and then you're done. So I was looking for a strong image form. I looked at photography, and that was a possibility that I thought would be very, very interesting, since as a graphical element for a brand style in web design, you don't see it that often. And I like to make things that you don't see that often, so that it doesn't look like everything else that you see, and therefore, the client stands out. I looked at then also as going really, really bold in a pared down, iconic way. I thought about whether or not a linear drawn icon would be interesting, to pick up on the linear quality of the type forms. Or possibly something that was a little bit straddling the world between dimensional and realistic, but also flat and iconic. And that's sort of what drew me the most. So I made a bunch of icons of tools to use. I didn't really know what I was going to do with them yet, I just made them. In the drawing of these, each of them is pared down to really only what is essential for recognizing first, the physical parts of the particular tool, so that you know what the tools are, and also to show you the truth about how different parts relate to each other. The fact that there is a set of grooves on this part of the drill, and the drill threads actually rotate. That there is shininess, the gleam of light, the rigid zigzag against the softer components of the handle, with enough positive and negative interplay to show you that there is a separation between those two parts and their materials. And then all, essentially kind of, line forms. When you're looking at any kind of an image, there's the thing that it is, and there's the thing that it really is, which is, this is not a hammer. And this is not an adjustable wrench. This is another line. And this is not a drill. This is another line. It happens to be a much fatter, heavier weight line, and it's also made up of two lines, a heavy weight one and a narrow one. So, compositionally, in terms of how the tools work, and this is fundamentally true of the tools themselves, is that they're essentially linear in nature. So there was something there. I developed a set of supporting icons for things that might be used for searching, for gaining access for archives, for calculating estimate costs, and some other details. Ended up not really using these, they kind of disappeared through the process along the way. So, already I established this typography, and I started to look at what are the relationships? What kinds of information are there, and what are the functions of those informational or typographical element? Of course there is the logo. There's headings for groups of information, or for sections. There'd be text that would accompany or support those headings. And then there might be a sub heading that separates one thought, or one sequence of information of text, from another one. In the navigation, I tried to create the greatest contrast between the text material that was really speaking about the subject matter, about the client, about their activities, and thereby, make sure that the quality of this typeface was devoted solely to encompassing, or voicing, their brand, and not really for anything else. So I went to this other sans serif that i used in the business card, the navigation, I had to always intend it was going to be relatively small, relative to the other things. So I began to look at the relative sizes. And these are, if we were looking at not the page, at this size as defined by the size of this monitor, but if we were looking at these elements in the space itself, which we will be soon, you would see that the height of this is essentially half of the height of the heading. So the size relationships, the relative sizing, and the relative weight relationships are very, very specific, so that they carry or that they present a certain degree of energy, or a certain lack of energy A certain presence, emphasis, or de-emphasis for the hierarchy. So I started to attend to the grid. In this case, I went with a column grid, no module, no modules. So that means there are no roads intersecting with the columns, which means that things can kind of float up and down, which they tend to do, because there's going to be, likely, some scrolling involved. So things, at various times, will not be in alignment, and there's no way to control that. Unless, of course, you make the page non-scrolling, which I did, because I hate scrolling. It's so annoying. I'd rather flip, but that's me. So I imagined this with a scrolling page where images of featured projects, and even the content once selected, would kind of populate this sort of central zone. Then the navigation would expand and contract in this kind of accordion or tree formation. Then this stuff would scroll, but the branding and the navigation of course would be sticky. I looked at a horizontal configuration to maximize the proportion of most typical monitors, which is the horizontal form, where you don't have really that much height, especially if you're not going to be scrolling. So I was already thinking well I'm going to try and get us not to scroll to go past this point, because I hate scrolling. And to create, again, you can see how elements of different widths, or the widths of different elements are defined by combinations of two or single columns, as well as the spaces in between. So you get a certain kind of very recognizable pushing and pulling between object and space, or form and space, as you traverse the typography across the top. I'd looked at a side by side, really pulling out the sub-navigation at a much larger, more dramatic size than the actual navigation header, because once you've arrived at a page of content, theoretically, you know that you are there. So the importance of the indicator, or the titling of the page actually decreases, and the content of a page, one could argue, is really more important. Especially if that content is sub-navigation. Is that these are individual links to particular projects that will appear in this location, once you have clicked on them. And then I returned to this grid formation. I'm always looking for something that's going to be a little bit different. It's a good thing not to just jump onto a convention for how information's displayed in a particular medium. On the other hand, it can also be a problem, when you're trying to fight something that works already. Why reinvent the wheel? Well, maybe the wheel ought to be a little bit shinier, in this case. So I was cycling through my sketches, and I had been looking at some of those that had the little grids of dots, and I was like, "What is that? "What is that? "Is it a background texture? "Is it a button of some kind? "Am I gonna organize the navigation around it?" And then I thought, "Well, if you really "want people to focus on the photograph, "and it's description, why don't we drop "the branding down to the bottom," especially if the page is not going to scroll, and it's going to be kind of sticky, so it'll kind of stay in view, and then when you leave the home page, what you're interested in, what you're focused on, is the largest and most pronounced element in the field, but we minimize it. Rather than this giant chunk of text eating up visual realm, like no breathing space, it becomes quiet. So these became little links. They're rollovers. So as you roll over them, name of the dot increases in size, and the name of the project pops out. So there's no listing. You have to investigate a little bit. And it becomes this kind of detail that graphically has a kind of an architectural quality to it. It talks about planning. It talks about the kind of a detailed and detailed thinking about how things work that is very specific to construction in general, but even more so to this particular family. It created a new graphical texture as a contrast to all the linearity in the typography elsewhere. And it was something I hadn't seen before. There it was. So I then took a quick look at what was going to happen with the navigation itself, in terms of it's interactivity. That is, when you roll over, you interact with a navigational link. How do you know that it is about to become active, or that it is even a link? So some change has to occur. So there, in general you can have two and sometimes three states that are used to describe the navigation, and when it's not doing anything, it' the resting state. When you mouse, or roll over it, it's the roll over or mouse over state that tells you that the link is now active, that you can access it. And then, very often, there's kind of a click state, that is as you click down on the link with your mouse, you activate it, and it undergoes another change. I found that that last state was going to be a little bit distracting, but I suddenly looked at some relatively simple kinds of changes. First, just a color and a little graphical detail, a line. Just the color and weight change by itself. Does it get enclosed in a box? Does it change size, since there's space in between? Does the line element happen at the top? Maybe it's a dot, like the other navigation, because navigation is now related to dots. So the connection, informationally, that I'm setting up or that I'm asking the user to understand and make use of, has to do with this dot element. Is the dot going to also accompany some other effect, like the link sliding out of alignment position? Or is it that the link actually becomes less pronounced as you roll over it? So there are some options. So that brings us to execution. So this is the home page. A configuration of some of the tool icons play with the diagonal, as a contrast to the heavy vertical, horizontal axis of the grid. Really extreme contrast in weight, which are again, supported by extreme contrast in line weight and positive-negative relationship within the images. You see here the rollover. I'll do that again, so you're checking it out. So, relatively subtle. On mouse over, the type becomes darker. The dot appears in direct alignment with the dot of the logo, structurally sound. And then when we moved to the project page, I initially had looked at, and so this is a splash page, or the entry page, for the project, the first thing I looked at was using another one of the icons. But because the page was divided more or less in half, and there was this kind of channel of space, the diagonal became kind of confusing. Especially because the content for that particular project, when it's selected, it's going to load over here, and that image would get kind of covered, interfered with. So the cleanliness would kind of disappear, the visual cleanliness. So I went back to looking at some of the photography and thought, well, the photography, in this kind of high contrast, but slightly lightened kind of tonality, carried a similar kind of presence of boldness, but at the same time, allowed the other stuff to be really much bolder. So for me, there was a kind of a congruity, a congruence, a dialog between the boldness of the icons, and the boldness of the photography, even though the icons are very, very black, and the photography is very, very light. So, on mouse over, you get a change in color. I eventually got rid of, or edit out the size change, because that became distracting, and I need to be able to float the project's name directly above it's corresponding dot at a particular height. So that got simplified a little bit. But once you click on it, the dot tell you that this is the project that you've chose, but now the project's title, the image, and it's text appear in all the other locations. Over the image, there's an enlargement icon very, very simple plus sign, means make bigger, augment, almost defaultedly structural, almost a little geeky. And then these very, very pale forward and backward arrows, where you can cycle through in different images for the same project. When you click on the project enlargement, it actually fills the screen. All the other information disappears, and you have a little bit of descriptive information, and a link just to close the view back. I assume, you know, people hate click through, but I assume that for the most part, when you choose to enlarge a photograph, you've done it on purpose, because you want to look at the photograph, and you don't need to be able to fluidly access other portions of information, or other links while you're doing that, because you've decided to do something specific. So, having all the other material all the other links disappear was really no problem for me. Generally, which is not really often the case, I am just in the same way that I hate to scroll, I hate to have to click back and forth between things, you know, where to access another part of the site. It's just me. But what I think is also common to other people. People are in a hurry. So anything you can do. So when you go back from there, you return, you can then cycle over, or mouse over, one of the other navigational elements. In this case it's the profile. You also notice that before we go there, and this will happen again, is that once you have selected the link and the content, therefore, that you are traveling to, that link becomes the page heading and disappears from the navigation, which from an informational design standpoint, is often a no-no. But I did it anyway. Again context is everything. There are only five links. When I've gone to one of them, and I am investigating the content in that area, I don't need to look over there to go find it again. I'm in it. And it's not a very, very deep site, so the potential for confusion or the potential to get lost within site was not really a concern. So when conditions warranted, or dictated, or allow it to happen, you can break a rule here and there. Usually you want your information, your navigation, to remain in the same location, have the same size, over and over again always, on every page. But sometimes it's not necessary. So in rolling over profile, it takes us to the profile page, which is one of the more text heavy pages. So you have an introduction. You'll see that profile has left the global navigation. Projects has returned. Profile is now the header for this page, with an introductory paragraph, and then a very, very brief history. The photograph has changed again, to another construction, subject-based image. Then you have a listing first of primary personnel, that is basically the present chief architect, financial officer, carpenter, and so on, and then you can access the individual employees, like the carpenters, the stone masons and bricklayers, electricians by calling up, by rolling over these and going to another little page that will slide out and go back in, if you so desire. So I kind of hid that, rather than leaving that page and going to another place where you would lose this focus on this. That material is still there, it kind of joins the trades of people to the upper level management, but also keeps them secondary in terms of focus. On mouse over, when you want information, there's a color change, and the dot is used at a much larger scale to house a portrait of the person in question. That link also functions not only just as a mouse over, but as a direct email link, that'll take you to the email form on the page.

Class Description



AFTER THIS CLASS YOU’LL BE ABLE TO:

  • Identify and apply fundamental graphic design elements
  • Add essential design skills to your toolkit
  • Approach and manage the creative process through varied projects


ABOUT TIMOTHY’S CLASS:

You don’t need to have a background in fine arts or be an Adobe InDesign whiz to create compelling designs. In this class, Timothy Samara takes you back to the fundamentals of graphic design - the same principles he has consistently returned to in his 25-year career.

Through real-world projects, you’ll learn the basics of:

  • Form and image
  • Color theory
  • Typography
  • Layout and composition

Most unique about Timothy’s class is his demonstration of how design theory manifests in actual projects; he cracks open his professional portfolio and takes you into the world of how real designers work. With an extensive career behind him, Timothy’s design services have spanned from web design to print media, to interface design, and to building brand identity. By walking through Timothy’s creative process, you not only see how design elements interact and impact an overall product, but you get a rare view of the problem-solving graphic designers do and the decisions they make. What rules exist and when are they broken? How do you juggle meticulous research vs. spontaneity?

Whether you want to design a poster, flyer, or logo - this class will give you the insights you need to design with confidence. Welcome to the art and science of graphic design.


WHO THIS CLASS IS FOR:

This class is designed for beginner and intermediate graphic designers as well as more experienced designers looking for a brush-up on design principles, career-changers, marketing team members, and anyone interested in graphic design fundamentals.


ABOUT YOUR INSTRUCTOR:

Timothy Samara is a New York-based graphic designer and educator whose twenty-five career has so far focused on visual identity and branding, communication design, and typography. Since 2000, he has split his time between professional practice and academia, defining a highly respected reputation as an instructor at the School of Visual Arts, Parsons/The New School for Design, Purchase College SUNY, New York University, The University of the Arts, and Fashion Institute of Technology. Mr. Samara is a frequent university lecturer and contributor to design publications both in the U.S. and abroad. He has written eight books on design to date (all from Rockport Publishers), which have been translated into ten languages and are used by students and practitioners around the world.

Connect with Timothy online: LinkedIn

Lessons

  1. Introduction to Graphic Design

    What exactly do graphic designers do? What is the overall goal of design? We see many products that designers create - from logos, to t-shirts, to newsletters and invitations - yet what do graphic artists actually do to produce these products? What design skills do they use and what factors influence their decisions? What roles do graphic designers play in business, the economy, and within communities?

  2. Graphic Design: Areas of Specialization

    With the advent of technology, not only have tools like Adobe Photoshop and Illustrator transformed the graphic designer’s process of creation, but the possibilities of design have expanded into far reaching areas. Timothy gives a quick overview of areas of specialization as a graphic designer; from editorial design to wayfinding, and advertising to motion graphics and branding, learn about the possibilities the field offers.

  3. The History of Graphic Design

    History repeats itself. Learn about the evolution of graphic design and the origins of many of today’s design trends. Timothy takes you on a fascinating journey through the 36,000 year old history of graphic design, from cave paintings to the Industrial Revolution in New York, to the arts and crafts movement in England to the birth of Modernism, Bauhaus, and the development of corporate identity. How has visual language evolved from past to present?

  4. The Designer's Toolkit

    Every designer carries a basic toolkit of the fundamental graphic elements in a design - these are the elements a designer plays with and manipulates to create a final product, be it a web page or a series of comic books. Starting with form and image: how do graphic designers choose the images they use? How do geometric and organic forms influence a design? How do designers use form and image to create a narrative, or meaning?

  5. The Graphic Designer's Tools: Color

    Color is a dynamic tool. What elements of color can be adjusted, and how does this impact overall design and the effect on your audience? What relationships do colors have with each other and how do you choose a palette? What biological changes do our bodies go through when we perceive color - and how do you harness the power of color as a designer?

  6. The Graphic Designers Tools: Typography

    Sometimes overlooked, typography is essential to user experience; the right combination of factors can create a comfortable and engaging experience that piques your audience’s interest. How can you use typography to guide your audience’s attention and best communicate your message?

  7. The Graphic Designer's Tools: Layout & Space

    Graphic design is made up of different, and at times competing elements: typography and imagery. How do you merge these to create harmonious and compelling visual compositions? You will learn how to manipulate space in your design and organize elements to influence how your audience reads your message.

  8. Typical Work Processes

    You have a project - now where do you start? Creative processes differ from person to person, however the typical design process goes through the same stages: research, ideation, refinement, and execution. Timothy describes the factors to consider at each stage.

  9. Designing an Advertisment

    Witness Timothy’s graphic design skills in full force as he takes you through the journey of a project from his own professional portfolio: an advertisement for an expo. Timothy demonstrates the iterative process, from image selection to concept sketches to color manipulation, and his reasoning behind every decision along the way. He calls to attention an important factor in editorial design - on what scale and in what format will this advertisement live, and how does this affect the design?

  10. Designing a Poster

    What unique opportunities does poster design offer? How does the size of media affect a reader’s experience? Timothy walks you through his process of designing a poster for a theatrical performance and the more complex concept and image development this design work requires. We see surprises and new ideas surface through the process of refinement, as well as the value of broad research.

  11. Designing a Book Layout: Basic Concepts

    Timothy designs the layout of a book, a retrospective of an artist’s work. He raises and answers compelling questions throughout the process: How do you work with multiple stakeholders on a single project? How do you turn limitations into positive challenges? How do you problem-solve when a client is not satisfied? How does using a layout grid actually create, rather than hinder flexibility? Timothy shows you how to explore compositional ideas within the format of a book with extensive images and text.

  12. Designing a Book Layout: The Details

    Typeface, alignment, transitions, even the color of the cloth of a hardbound book: these are all factors in cover to cover book design. Timothy demonstrates the process of creating a book cover in line with his client’s artistic vision, finalizing the process, and bringing the project to execution.

  13. Designing a Website

    Web design presents a playground of opportunity: how does interactivity influence design? How do page layout, flow, and navigation affect the user experience? How does hierarchy, or the order in which the audience perceives information, translate into the interactive context? Timothy takes us through a web design project; we see his research process, concept sketching, use of grids, and problem-solving in the context of a web page.

  14. How to Design a Brand Identity: Preperation

    Graphic design at full volume is the creation of brand identity. Timothy models beginning the process of designing a brand identity for a client with the core component: the logo. What are the best research practices for logo design? How do you create a powerful logo? Does it need to communicate a message? How do you problem-solve for its applications in various forms of media?

  15. How to Design Brand Identity: Showing the Client

    Timothy shares his best tips for working with a client in logo design. How many options should you present and in what context? How do you involve your client in the problem-solving and refinement process?

  16. Building Brand Language

    Brand identity may start with a logo, but a logo is just one part of a brand - it needs to exist within a world with context. Timothy models how to flesh out the rest of a brand’s visual language, from website content to color palettes, icons, and taglines.

  17. Designing the Touchpoints

    If you want to take your client’s brand to its audience and not only increase exposure, but build and strengthen the relationship between brand and customer, you need to design brand touchpoints. Packaging, letterheads, and business cards all add to the narrative. How can you develop a simple and effective advertising system?

  18. Fundamentals are Forever

    Timothy closes where he begins - with the fundamentals. What is the mission of the designer? What can you learn from the history of the discipline? How will trusting the process of discovery push your practice to the next level?

Reviews

a Creativelive Student
 

Wonderful class! I loved getting the info as to the creative process. Great!

sixtina maculan
 

Thank you for sharing your experiences in this class. It's been a pleasure to listen, learn and understand, as well as a wonderful motivation.

Øyvind Hermans
 

I love this class, clear and precise information with very interesting examples. I have worked as a graphic designer for 6 years but have no design eduction, so at times I feel like there is these gaps of design-knowlegde in my decisions, this was the perfect filler of these gaps.