Design Tools and Software


Photoshop

Main Use: Adobe Photoshop is a versatile raster graphics editor, primarily for photo editing and creating complex graphics for different types of online materials. It is an essential tool for tasks requiring detailed image manipulation, such as retouching photographs, compositing images, and designing web and print.

Useful Tricks:

  1. Non-Destructive Editing: Always create smart objects to make edits without altering the original image. This allows for easier revisions and experimentation. In your Layers Panel > Right-click on the Layer you wish to convert > Select 'Convert to Smart Object' from the drop-down menu.
  2. Keyboard Shortcuts: Learn essential shortcuts like Ctrl + J (duplicate layer), Ctrl + T (free transform), and Ctlr+W (quick selection tool), Ctrl+M (shape tool) to speed up your workflow.
  3. Create Guide Layout: Setting up guides and margins is a crucial step in creating well-organized and visually balanced designs. Go to View > New Guide Layout.

Illustrator

Main Use: Adobe Illustrator is a graphics editor for creating scalable graphics such as logos, icons, and illustrations. Unlike raster images, vector graphics can be resized without losing quality, making Illustrator ideal for creating artwork that needs to be printed at various sizes or used across different media.

Useful Tricks:

  1. Pen Tool: The Pen Tool (P) is essential for creating paths and shapes. Practice using it to draw and edit vector objects efficiently.
  2. Shape Builder Tool: Combine or subtract shapes easily using the Shape Builder Tool (Shift + M). This is great for creating complex shapes quickly.
  3. Anchor point tool: it allows designers to create and manipulate paths and complex shapes, refine curves, and ensure smooth transitions between points in your designs. To activate it, press Shift + C and click or drag on a path or an object.
  4. Artboards: Use multiple artboards within a single document to manage different versions or parts of a project.

InDesign

Main Use: Adobe InDesign is a professional desktop publishing software for creating print materials like roll-ups, coupons, magazines, brochures, and books. It excels in layout design and typography, offering powerful tools for managing large amounts of text and images.

Useful Tricks:

  1. Master Pages: Use Master Pages to create consistent layouts for recurring elements like headers, footers, and page numbers. This ensures uniformity across your document.
  2. Styles: Implement Paragraph and Character Styles to apply consistent text formatting throughout your document. This saves time and ensures consistency.
  3. Preflight Check: Use the Preflight panel to catch potential printing issues before they become problems. It checks for missing fonts, low-resolution images, and other common errors.
  4. Preview: Looking at your artwork's image through grid lines can become overwhelming. To take a look at it without them, simply press W.

Figma

Main Use: Figma is a web-based interface design tool that facilitates real-time collaboration among design teams. It is ideal for creating UI/UX designs, wireframes, prototypes, and other interactive elements for web and mobile applications.

Useful Tricks:

  1. Components and Variants: Create reusable components with variants to manage different states (e.g., hover, active) efficiently. This streamlines the design process and ensures consistency.
  2. Auto Layout: Use Auto Layout to create flexible and responsive design elements. This feature adjusts the layout automatically based on the content and screen size.
  3. Real-Time Collaboration: Take advantage of Figma’s real-time collaboration capabilities to work simultaneously with team members. Use comments and version history to track changes and feedback.
  4. Plugins: Extend Figma’s functionality with plugins. Popular plugins include Content Reel for placeholder text/images, Unsplash for stock photos, and Figmotion for creating animations.

Typography


Typography Basics

Typography is the art and technique of arranging text to make written language legible and visually appealing. At its core, typography involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning). Understanding the basics of typography is essential for graphic designers, as it significantly impacts the overall design and effectiveness of communication.

Key terms:

Choosing Fonts

Selecting the right font is crucial for conveying the desired message and tone. Here are some tips and best practices for choosing fonts:

  1. Purpose and Context: Consider the purpose of your design and the context in which it will be viewed. Formal documents often require classic serif fonts, while modern websites might benefit from sleek sans-serif fonts.
  2. Readability: Ensure your chosen font is legible in different sizes and on various devices. Avoid overly decorative fonts for body text, as they can hinder readability.
  3. Pairing Fonts: Use complementary fonts to create contrast and interest. A common practice is to pair a serif font with a sans-serif font.
  4. Limit Font Usage: Stick to 2-3 fonts per project to maintain a cohesive look. Too many fonts can make a design look cluttered and unprofessional.

Typography in Branding

Typography plays a critical role in branding, as it helps establish a brand’s identity and conveys its personality. Consistent use of typography across all brand materials ensures a professional appearance.

  1. Brand Personality: Choose fonts that reflect the brand's personality. For instance, a playful brand might use a script font, while a tech company might opt for a sleek, modern sans-serif font.
  2. Consistency: Use the same fonts across all brand touchpoints, including websites, business cards, advertisements, and social media. This consistency reinforces brand recognition.
  3. Custom Fonts: Consider developing a custom font to create a unique and recognizable brand identity. Many well-known brands use custom fonts to stand out and make a lasting impression.

Useful Websites

  1. Google Fonts (fonts.google.com): a library of free and open-source fonts, ideal for web and print design.
  2. Adobe Fonts (fonts.adobe.com): offers a wide range of high-quality fonts included with Adobe Creative Cloud subscriptions.
  3. Font Pair (fontpair.co): helps designers find great font combinations by providing curated pairings.
  4. DaFont (dafont.com): useful for finding unique and decorative typefaces.

Tricks and Best Practices

  1. Use Styles Consistently: Maintain consistency in font styles (bold, italic, etc.) throughout your design to create a harmonious look.
  2. White Space: Don’t be afraid to use white space to give your text room to breathe. Proper margins and padding enhance readability.
  3. Responsive Typography: Ensure that your typography is responsive and looks good on all devices. Use relative units like ems or percentages instead of fixed pixel sizes.
  4. Contrast and Color: Ensure sufficient contrast between text and background to maintain readability. Use color to highlight important information without overdoing it.

Principles of Design

Understanding and Creating Margins

Margins serve as the empty spaces around the content within a layout. They help create a balanced and aesthetically pleasing composition by providing visual breathing room. When setting up margins, consider the overall design context and the medium, whether it's print or digital. Margins also guide the viewer’s eye and improve readability by preventing the content from feeling cramped.

Here is a little helping guide for the most common online and printing materials margins: 

Online Newspapers: Typically around 20-30 pixels on all sides. This ensures readability and a clean layout without overwhelming the viewer.

Ad Banners: A margin of 10 pixels is usually sufficient. This helps prevent content from being too close to the edge, ensuring better visual impact.

Social Media Posts: Around 20-30 pixels. This keeps important content within the safe zone, preventing it from being cut off or hidden by platform UI elements.

Flyers: Generally, 0.25 inches (6.35 mm) is a standard margin to ensure no important content is cut off during trimming.

Business Cards: A safe margin of 0.125 inches (3.175 mm) is recommended to keep text and logos within the safe print area.

Billboards: Given the large scale, margins can be more flexible, but a general rule is around 5-10% of the total height and width to ensure readability from a distance.

Banners: Similar to billboards, 5-10% of the height and width is recommended to ensure that key content is not too close to the edges and remains readable.

Rollups: A margin of 1-2 inches (25.4-50.8 mm) from the edges ensures that important information is visible and not at risk of being obscured by the rollup hardware.

In all cases, it’s crucial to consider the specific medium and context of use, adjusting margins to maintain aesthetic appeal and functional clarity.

Using Grid Systems and Guides 

Grid systems are essential tools in graphic design, providing a structured framework that helps organize and align content. They bring order and consistency to layouts, making them more visually appealing and easier to navigate. Grids can vary in complexity, from simple column grids to more intricate modular grids, but they all serve to maintain a cohesive structure. Using a grid system allows designers to align elements precisely, ensuring a harmonious relationship between text, images, and other design components. 

You can set up different premade grid systems, such as the perspective grid tool in Illustrator, or the Layout grid in Figma. 

Guides, often represented as blue lines, are an essential tool for achieving precise alignment and organization. You can set up guides in Adobe programs by simply pressing ctrl+r - which brings out the rulers and you can drag the rulers to get a new guide. You can also remove them by dragging them back to the rulers. You can use them to create margins, set up distances or make sure that objects are straight. 

Proportion and Scaling

Proportion and scaling are crucial principles in graphic design that influence the visual impact and readability of a composition. Proportion refers to the relative size and weight of elements within a design, ensuring they work together harmoniously. Correct proportion helps in creating a balanced and aesthetically pleasing layout, where no single element overwhelms the others.

Scaling, on the other hand, involves resizing elements to fit different contexts and mediums while maintaining their visual integrity. Effective use of scaling ensures that designs are versatile and adaptable, whether they are viewed on a small mobile screen or a large poster. Mastery of proportion and scaling enables designers to create visually compelling and functional designs that effectively communicate their intended message.

Color Theory

Color theory plays a crucial role in how visuals are perceived. It revolves around the color wheel, a tool that organizes colors in a circular format to showcase the relationships between them.

The color wheel

The color wheel is a fundamental tool in color theory, used by artists, designers, and anyone working with color to understand how colors interact with one another. Secondary colors (green, orange, purple) are formed from these primary colors by mixing two primaries. Tertiary colors, such as red-orange and blue-green, are created by mixing a primary with a secondary color. Understanding these relationships is crucial for creating harmony and contrast in design.

There are several color schemes derived from the color wheel that designers frequently use:

  1. Complementary Colors: These are opposites on the wheel, such as blue and orange. They create high contrast and vibrant visuals, often used to make elements stand out.
  2. Analogous Colors: These sit next to each other on the wheel, like blue, blue-green, and green. They usually match well and create serene and comfortable designs.
  3. Triadic Colors: This scheme uses three colors evenly spaced around the wheel, such as red, yellow, and blue. It offers a balanced and vibrant look.
  4. Monochromatic Colors: This scheme uses different shades, tints, and tones of a single color, creating a cohesive and harmonious look.

Importance of Eminent CTA Buttons

One practical application of color theory in graphic design is creating Call to Action (CTA) buttons. These buttons are essential elements on websites and apps, guiding users towards desired actions like signing up, purchasing, or downloading. The choice of color for CTA buttons is crucial as it impacts user behavior.

CTA buttons need to stand out to catch the user’s attention instantly. This is where the principles of color theory come into play. Using a contrasting color for CTA buttons can significantly increase their visibility. For instance, if a website has a predominantly blue color scheme, a bright orange or red CTA button can draw the user's eyes.

Furthermore, the psychological impact of colors also affects the choice of CTA button colors. For example:

Useful websites

To understand and use these principles more deeply, we recommend using the Canva color wheel, which can help you find the right color combinations only by pasting a hex code. You can also make custom palettes and export them for further use and showcasing.

Another useful website for making color palettes is coolors.co, where you can search through more than 500 colors, find and make palettes, and find different shades of each color. It also helps you decide whether you should write on a specific color in black or white.