MadTinker

Facebook and Social Media Asset Collection

Wed, 11 Dec 2024 00:00:00 +0000

Primary user intent: Users of all ages, including a large number of users 50-plus years old, looking to keep up with friends and family.

Facebook business page for small business example (Source: Facebook)

Facebook is the leading social networking platform, reaching users of all ages, backgrounds, and interests. Small business social media marketing can be done in various ways on Facebook. For example, you can create a business page that links to your website and provides useful info like hours and reviews, start and participate in private groups, and run targeted ads.

In most cases, users are not there to learn about businesses per se but will often ask their Facebook connections for recommendations and user experiences. Also, ads can be highly targeted, offering businesses an effective way to establish brand awareness and generate sales using paid ads.

Assignment

Create a Facebook page centered around a fictitious company.

Unfortunately, you must first have a standard account to make a Facebook page. This account can be fictitious and contain little or no content. Companies often have their CEO use their profile pages linked to a Facebook company page.

My Sample Facebook Page

The Facebook Page will require you to create a basic look and feel, which includes a logo, banner, and any other graphics and type needed while developing these pages. You must also complete all sections (description, about, etc.) of the page.

Assignment (Facebook Posts)

Please see the checklist on d2l for more information. (A checklist has been created.)

A Review of Facebook Ads.

Source: Facebook Ads Examples – A Curated Selection of Real Ads to Inspire You. (2020). Retrieved from https://adespresso.com/ads-examples/

What’s great about this ad:

Remember the importance of concise copy, engaging images, and effective landing pages in online marketing. A short, compelling copy and an eye-catching image can capture attention, while an effective landing page provides detailed information about the product’s value. This strategy can be used by both beginner and established brands in online marketing.
Eye-catching image. I don’t know about you, but my thumbs slow down for cute dogs when I’m scrolling through my Facebook feed. This friendly, sleepy dog has nothing to do with the software for sale, but it makes me curious. I might even click on it. Note: there’s a fine line between using cute images of puppies to express the mood of your brand and misleading viewers with clickbait. DON’T do the latter.
Effective landing page. If you click on this ad, you’ll be taken to a landing page that describes the product—and why it’s valuable—in more detail. This is a tried-and-true online marketing strategy that even the most beginner brands can use. It’s also a good reminder that you don’t have to say everything in your ad.

What’s great about this ad:

Clear and Concise. Without reading the headline or the description, you instantly know who this ad is for and what it’s about.
The image reiterates the offer. The image allows the audience to visualize the offer – advertising on the Waze app.

What’s great about this ad:

Designed for sound off. Approximately 85 percent of Facebook videos are watched without sound. Headspace’s video uses text and illustration to communicate its message effectively in any environment, making it accessible for viewers with hearing impairments.
Short and sweet. At 11 seconds in length, Headspace’s video may seem short, but it’s not. Attention spans are short online, and when it comes to video, advertisers have under two seconds to capture attention. Headspace grabbed mine with the question: “Feeling Awkward?” (The answer is almost always yes.)
Simple messaging. In addition to keeping the video brief, the message in the video is clear: Subscribe to Headspace. Sometimes a direct call-to-action is all you need.

What’s great about this ad:

The New Yorker’s ad makes a strong impression through effective branding and signature style. The inclusive illustrations in the ad appeal to a broad audience, increasing the likelihood of viewers identifying with the characters. The video’s short length and upfront call-to-action ensure that the message reaches the audience, even if viewers bail early.
Inclusive illustrations. In addition to being playful and smart, the series of characters in the video reflect a broad array of potential New Yorker readers. This increases the odds of someone saying, “Hey, that’s me,” and is a hidden form of persuasion. For added inclusivity, the video is also sound-free.
Upfront and to-the-point. At only six seconds in length, this video likely has a good completion rate. But even if it doesn’t—a Facebook study finds the majority of viewers bail after 1.7 seconds—the New Yorker’s message will have reached its audience. The call-to-action is present from the moment the video starts.

What’s great about this ad:

Product-focused. This video communicates the product and offer in just a few seconds. The bright colors also attract attention against a bland newsfeed background.
Free shipping and a bonus offer. Free shipping is usually an eye-catcher all on its own, but by combining it with a bonus coupon, TokyoTreat gives an additional incentive to sign up.

Sent From Adobe Express

Facebook Ads Examples – A Curated Selection of Real Ads to Inspire You. (2020). Retrieved from https://adespresso.com/ads-examples/

Assignment

Design an App Screen II

Sat, 07 Dec 2024 20:35:41 +0000

From: Figma 101: Design an App Screen. (n.d.). Retrieved from https://designlab.com/figma-101-course/design-an-app-screen

Create a login screen for your app.

Learning objectives:

Create a 3-column layout grid
Learn how to duplicate elements
Set Layer opacity (transparency)
Use fill colors and gradients
Practice locking and unlocking layers
Consolidate yesterday’s learning

Time to complete: 30 minutes

Today’s tutorial

In the last class, we explored the interface and learned about a few of Figma’s core functions. Today, we’ll use these commands and more to build the entire first screen of our app!

Over the next few days, we’ll create screen designs for a photo-sharing app. Feel free to pick whatever name you like—we’re choosing “filter” for ours. Let’s get started!

1. Open up your Figma file, and create the Frame for your app screen.

First, open up the same Figma file you were working on yesterday. (It should show up in tappearent” tab on the Figma home screen.)

Like we did yesterday, hit F to select the Frame tool, and pick iPhone SE from the options on the right of the window. Then let’s, set a background color for this screen. While the new Frame is selected, look over e Properties panel on the right of the Figma window. Click the white square under where it says “Fill”, and choose a color. We’ve gone for #2F80ED, which is the shade of blue.

2. Add a column grid

It’s important to work using a column grid, even when designing for mobile. This means making positive decisions about spacing and layout—for example, the amount of space we leave between elements and the edge of the screen.

In Figma, it’s super easy to add a column grid. Select the Frame by clicking on it in the Layers panel or on the Canvas, and then hit the “+” icon in the Properties panel under where it says “Layout grid”.

Count: 3 (this creates 3 columns)
Gutter: 16 (this adds 16 pixels of space between each column)
Margin: 16 (this adds 16 pixels of space at the edges of the Frame)

3. Add the name of your app

Let’s create a simple “wordmark” using the Text tool. A wordmark is the name of a company or product set in a beautiful way using text only. (Tomorrow we’ll work on a logo!) Press T to select the Text tool, then click in the frame and type out your app’s name. The settings from when we created the button yesterday may still be in place, so we must make adjustments. Here’s what we’ve set the text to:

Typeface: Roboto Bold
Text size: 42 pixels
Case: lowercase

(Check out the lovely ligature that joins the f and the i!)

4. Reposition the wordmark

If you click and drag on the text you’ve just created, you can move it around the frame to reposition it. If you drag it near the horizontal middle of the frame, you’ll notice that guides will pop up to indicate that the text is centered. Once it’s centered, release the mouse button!

5. Create the username field

We can easily create some sleek login fields just using rectangles and text. First, select the Rectangle tool R and click and drag to create a rectangle about 250 pixels wide and about 30 pixels high. Notice how Figma displays the size of the shape in numbers as you’re drawing it?

Change the fill color to be white (#FFFFFF). We then need to change the opacity setting to make the shape semi-transparent. This isn’t labeled as Opacity like it is in Adobe Illustrator, but it does exist: it’s the number shown in the Properties panel under “Layer” next to where it says, “Pass through.” It’s set to 100% by default—let’s change that to 25%. You can also set this by simply selecting the object and typing in the opacity value you want. Try it—select the rectangle and simply type “25”. (This is strangely satisfying, you’ll agree.)

Next, press T to go back to the Text tool. Click anywhere in the frame, and type “Username”. The font will probably still be set to the preferences you used for the wordmark, so once you’ve finished typing, select the text and change it to Inter Regular, the size to 16 pixels, and the case to “As typed” (the dash). Drag the text label over the rectangle. And presto! A form field.

As a final step, make sure that the “Username” text is positioned nicely in relation to the rectangle. You can do this by clicking once on the text layer, and then “nudging” it 1 pixel at a time using the arrow keys. If you hold down Shift ⇧ while using the arrow keys, the selection will move in 10 pixel increments.

6. Duplicate the username field to create a password field

It’s very easy to duplicate elements in Figma. With the Move tool selected V, just drag a marquee (rectangular selection) around the rectangle and text you just created. You can use old-school copy and paste (⌘C then ⌘V on Mac, or CtrlC then CtrlV on PC).

Alternatively, you can hold down Option (Mac) or Alt (PC), and then click and drag from the selection to make a duplicate.

Place your duplicate objects so that they’re sat directly below the username field. Then, simply double-click the “Username” text and change it to “Password”.

7. Duplicate the button you made yesterday.

Select the “SIGN IN” text and the yellow rectangle with the button you created yesterday. Group them by hitting ⌘G (Mac) or CtrlG (PC). If you look at your Layers panel they’ll now be called “Group 1.” Go ahead and rename that by double-clicking on it in the Layers panel and typing in “Sign In Button.”

Another way to duplicate elements is by selecting an element on your canvas and hitting ⌘D (Mac) or CtrlD (PC). Try this with the now grouped button. The duplicate will be placed directly on top of the original—so once you’ve created the copy, just drag it across to the other frame. This shows how easy it is to move elements between frames in Figma—it’s a simple drag and drop.

8. Make the background more interesting

In Figma, we can easily apply gradients to the backgrounds of our frames to make them more exciting. Start by selecting the Frame and navigating to the “Fill” section of the Properties panel on the right. Next, click on the blue color swatch right underneath where it says “Fill.” This will open the color panel. At the top of the color panel underneath where it says “Custom,” hit the Gradient button.

Still in the color panel, select the right color swatch on the gradient spectrum.

Pick a color that you think transitions nicely into the current background color. Get creative! We’ve gone with a pink (#E36FA6). You might also need to change the opacity like we did.

9. Align & refine the layout

The last thing to do today is to make sure that everything is nicely aligned. Here are some things to check:

Do the “Username” and “Password” input fields line up with the columns?
Are all of the interactive elements spaced out enough so that users don’t accidentally tap on the wrong thing?
Is everything centered to the frame?

As you can see, we made some other refinements at this stage: we changed the background color of the “SIGN IN” button to white and adjusted the button size to occupy the whole width of the column. We also changed the vertical position of the filter logo. Here’s how we did all of that:

Congrats on completing your first app screen in Figma!

From: Figma 101: Design an App Screen. (n.d.). Retrieved from https://designlab.com/figma-101-course/design-an-app-screen

Flexbox Grid

Fri, 06 Dec 2024 04:06:00 +0000

See the Pen Flexbox 12-Column Grid Example by Nicholas D'Angelo (@ndangelo) on CodePen.

Everyday Objects to Imaginary Constructs

Wed, 04 Dec 2024 16:48:00 +0000

Star Wars Episode III: Creating General Grievous Webisode

In this assignment, we will be exploring inspiration. In this particular project, we will explore this in a straightforward manner – taking the shape of one object and translating it to an imaginary construct.

Let’s watch the above video. Mainly from the 1:16min point onward. It shows an illustrator drawing an imaginary “robot.” His inspiration is the top of a spray bottle.

Here are a few examples:

Part 1 – Due Date: See D2L

Eric Geusz

Part 2 – Due Date: See D2L

Instructables

Shapes, forms, and nature that inspired Jorn Utzon: Sydney Opera House

Anna Pustovaya

Aleksandra Kroshechkina

Assignment:

Create four quadrants on four pages of your sketchbook
Find an object(s) that you think might inspire you to create a drawing
Within each quadrant create curves, lines, and doodles to develop a visual vocabulary to use later
Begin creating thumbnail sketches based of your “model, line/forms and sketches
Due date is TBD. Most if not all work will be completed in class.

CREATE A CITYSCAPE IN ADOBE ILLUSTRATOR

Wed, 04 Dec 2024 09:06:00 +0000

CREATE A CITYSCAPE IN ADOBE ILLUSTRATOR

ILLUSTRATOR TEMPLATE FILE

General setup

Below is an image that shows the general setup of the illustration. As you can see from the Layers panel, I’ve divided things up in stacking order, with the sky & ground as the bottom layer, and the bushes and the clouds in front as the top layers. When creating scenery like this, it’s a good thing to try to divide your layers up in such stacking order. In this case, it’s easy to organize things per category (trees, houses, bushes…), and then also separate items in front from items that go in the back e.g.

The general setup of the illustration, showing the Layers panel’s structure, with all the sub-layered grouped objects

Global Swatches

To turn a regular swatch into a Global Swatch you simply check the Global checkbox in the Swatch Options window that appears when you double-click a swatch. You can recognize a Global Swatch from a regular one in the Swatches panel by the white triangle in the bottom right corner of the swatch icon. The advantage of using Global Swatches is that when you modify the color value of such swatch, all objects using that swatch are automatically updated.

Create the Sky & Ground

Create the ground and the sky by drawing a rectangle for each, but first create a new layer by clicking the Create New Layer icon at the bottom of the Layers panel. Name it sky/ground.

1. Draw a green rectangle for the ground

You can start with the ground which is a flat horizontal rectangle from left to right of your document. There is a guide in place that is the horizon. Your rectangle should snap when you are close towards the border of your document or near the guide. Apply a light green for the ground.

Draw a green rectangle at the bottom from left to right of your document using the horizontal guide as a reference.

2. Draw another rectangle right above for the sky

Fill the rest of the document up with the rectangle for the sky. Apply the light blue gradient. With the rectangle still selected, go to Object > Arrange > Send to Back.

Draw another rectangle right above for the sky using a light blue gradient.

The Houses

Now we’ll be creating the houses. First, lock the sky/ground layer in the Layer panel (clicking the lock icon on the left). Create a new layer like you did before. Make sure it sits above the sky/ground layer. If not, you can drag it into place in the Layers panel (grab the layer and drop it above the sky/ground). Name the new layer houses.

3. Create the walls: draw a vertical rectangle

Create a vertical rectangle as shown in the image below, and apply the yellow swatch.

Create the walls

4. Copy & Paste in Front

Copy the rectangle shape, and hit Cmd/Ctrl + f (Edit > Paste in Front). Start dragging the pasted rectangle to the left, and while dragging hold down the Shift key so you move it perfectly horizontal. Move it until it aligns perfectly with the right side of the original rectangle. It should snap on the side (when you see ‘intersect’ in green you’re there, see image above). Give the rectangle an 80% yellow fill (drag slider to 80% in the Color panel).

5. Create the roof: add anchor point

Select the Pen tool and hover with your cursor over the middle of the top border of the copied rectangle (as shown in the image above). You should get a visual clue (a vertical line and the word ‘intersect‘) when you reach the middle. You should also get to see a plus sign to the bottom right of your pen cursor. Now click once to add the anchor point.

Create the roof by adding an anchor point at the top center, and by moving it up.

6. Move anchor point

Select the Direct Selection tool (white arrow), and click the newly created anchor point. Start dragging upwards, and while dragging hold down the Shift key so you move it perfectly vertically up. Stop dragging and release, when you think you reached a perfect 90° corner.

7. Finish the roof: draw an orange rectangle

Select the Rectangle tool again and draw a rectangle for the roof as show in the image above. Start from the bottom right (or left) corner and drag diagonal upwards to the top left (or right). You should get visual clues again from the Smart Guides to know exactly where to start and stop dragging (see image above). Apply the darker orange as fill for the roof.

Finish the roof.

8. Drag top border to the left

First deselect the rectangle by clicking on an empty space on your document. Now select the Direct Selection tool (white arrow) and click (+ hold down the mouse to start dragging) somewhere in the middle of the top border line of the rectangle. Drag the line to the left while holding down the Shift key. Always do this in this order: first click, hold down the mouse, start dragging, and then hold down the key(s). Then at the end, when you stop moving your mouse always make sure to first release the key(s), and then the mouse.

9. Create the window

Draw a circle for the window. Apply the brown grey as fill and give it 20% opacity (via the Transparency panel).

Add the window and the door

10. Create the door

Draw a vertical rectangle for the door. Start from the bottom right (or bottom left) and drag upwards to the top left (or top right) as shown in the image above. Apply the dark green as fill.

11. Make the door round

First deselect the object, and then select only the 2 top anchor points using the Direct Selection tool (white arrow): click in the first point, hold down shift, and then click in the second point. You should see the Live Corners widgets appear near the 2 corners. Click into one of them while holding down the mouse, and drag inwards down as shown in the image above until the top border line is fully round. I totally love this Illustrator feature. In case you decide later you want to go back to straight corners again, you can at all times. You just drag the corner widgets back outwards again.

Adjust the shape of the door and center align the window and the door with the front of the house

12. Center align the window and the door

Select the door, the window and the front of the house. Click again on the front shape, but this time without holding down the shift key. This will make this shape the target (or key object) to align to. So only the other objects can move into place. Now select the Horizontally Align Center option from the Control panel at the top. In case you don’t see this bar, go to Window > Control.

13. Add a few more windows

Copy & paste the door, and move the object to the left side of the house. Now select the bottom line of the shape (using the white arrow, make sure to deselect the object first). Select the line and move it vertically up holding down the Shift key. You can always temporarily lock the path of the wall of the house in the Layers panel. Click the triangle of the houses layer to reveal the paths, and click in the lock area (next to the eye) of the wall’s path layer.

Add more windows on the right side of the house

14. Align the windows and give them the proper color

Apply the brown grey fill to the new window, and add a 20% opacity to it. Now duplicate the window twice. Hold down the Alt/Option + Shift keys while dragging. Do this twice, first for the second, and then for the third window. Select all 3 windows and select the Vertical Distribute Center option from the Control panel at the top. Now also select the wall (unlock its path layer first by clicking the lock icon again), make sure to click the wall again to make it the target/key object, and select the Horizontal Align Center option from the Control panel.

15. Create more houses

Our first house is created. Now we’ll use this house as a starting point for some of the other houses by duplicating it. But first things first. We need to make sure everything stays well organized. So the first thing we’ll do is grouping the different paths of this house. Select all objects: walls, door, windows etc. and hit Cmd/Ctrl + g (or go to Object > Group).

Duplicate the house to create a 2nd one

Now grab the Group layer in the Layers panel, and drag it over the Create New Layer icon at the bottom of the panel to duplicate it. Lock the original house/Group layer (btw you can double click the layer and rename it to ‘house’ if you prefer extra tidiness in your layers). Now hold down the Shift key and move the duplicated house to the left. Then make it slightly smaller, but hold down the Shift key to keep things in proportion.

16. Apply the proper fill for the round window

Double click the house to go into Isolation mode. It makes the rest of your illustration slightly transparent and now you can select and modify each shape of the house without having to ungroup it first. So your grouped object stays perfectly intact. Apply different colors to the walls, door and window. Remove the windows on the side wall. To leave Isolation mode you can hit the Escape key, or the arrow at the top right of your canvas.

Adjust the colors, and windows of the house to make it a different one.

17. Adjust the door so it’s a straight rectangle shape again

Remove the rounded corners on the door by selecting the 2 top anchor points first and by dragging the rounded corner circle diagonal outwards to the top left or right until the end when you have fully straight corners again.

Adjust the door, and select the right part of the house to resize it

18. Make the right side of the house wider

Make the right side of the house wider by selecting only the most right anchor points using the Lasso tool. Drag a selection as shown in the image above. Once selected, drag the anchor points to the right, holding down the Shift key, or you can also use the right arrow key.

19. Add 2 square windows

Draw 2 square windows on the side wall. Use the brown grey as fill, and apply 20% opacity, in multiply transparency mode. Duplicate the first one like you did before so you end up with 2 windows, and use the same aligning technique as before to perfectly align the windows in the center of the side wall. The 2nd house is done. Now the 3rd house.

Add 2 square windows

20. Copy reflect the house

Duplicate the house again like you did before via the Layers panel, but make sure you are out of Isolation mode first. Now move the new house to the right of the original house by holding down the Shift key. You can also just duplicate the group on your canvas if you prefer: hold down the Alt/Option + Shift key and move the duplicated object to the right of our first house. Now select the Reflect tool. Hold down the Alt/Option key and click somewhere in the center of the house. In the window that appears, choose Vertical Axis and hit OK. Remove the door and windows using the Direct Selection tool (white arrow).

Copy reflect the house

21. Select the roof of the house

First deselect the house. Now drag a rectangle selection over the top part of the house using the Direct Selection tool (white arrow) as shown in the image above.

Select the roof of the house and move it down

22. Move the roof down

Drag the selected anchor points vertically down by holding down the Shift key while dragging as shown in the image above (to the right).

23. Enlarge the house

Make the house bigger by selecting it and dragging the top right corner outwards (holding down Shift key to keep its proportions). Then make the side wall of the house less wide, again by selecting the anchor points (white arrow) and dragging them holding down the Shift key.

Resize the house, add windows and align things up

24. Add windows and align things up

Apply new colors to the new house, and add 4 vertical windows on the side wall. Use the technique like before to duplicate an object: select and drag by holding down the Option/Alt + Shift key. First you draw the two windows at the top, then you select both and copy drag them below holding down the Option/Alt + Shift key again. To Horizontal Center Align the windows with the wall, you first group the windows together (Cmd/Ctrl + g). Also, just like before, make sure the wall is the target or key object.

25. Move the house into place

Now go out of Isolation mode and move the house into place. With Smart Guides enabled showing visual clues, this should be easy (see image below).

Move the house into place

26. Add the garage

Double click the house to go back into Isolation mode. Create the side/garage part of the house by drawing 2 rectangles. Use the visual clues of the Smart Guides so the rectangles are perfectly aligned to the right and bottom of the house. For the roof, select only the top right anchor point, and move it to the left by holding down the Shift key (or use the left arrow key). Last but not least, add the garage door by drawing another rectangle on top. Give it the same dark color of the roof, but apply 20% opacity.

Add the garage

27. Add the other houses

Based on what you’ve learned so far, draw the other houses using the same technique of copying, reflecting, aligning, recoloring, etc. You can look at the image below as a reference of how things can look. Feel free to do your own thing.

Add the other houses

Add small details to the houses

Attention to details is everything, so to finalize our houses, we add a few special details to some of them. This way they will stand out a little more, and it’ll add this little extra finesse to the illustration. To add these details always make sure to double click the (grouped) house first to go into Isolation Mode. This way the detail you’ll add to the house will also be part of the group.

28. Add square detail to the front of the yellow house

On the yellow house I added a tiny square of 1 x 1px on the right and used the Transform effect (Effect > Distort & Transform > Transform…) to duplicate this square horizontally leaving some space in between each by moving it 4px for 12 times. When applying these small details using the Transform effects, it’s good to keep in mind to use easy figures so you can do the math to achieve the effect you have in mind. To enter a specific value to the shapes you draw, you select the Rectangle or Ellipse tool, and click on the position you want the shape to appear. Then in the window that appears, you can enter the specific values and hit OK or enter. Once the object is placed, you can move it into position and apply the fill or stroke you like it to have and apply a repeating effect to it. Next are a couple of more examples to get you on your way.

Add square detail on the yellow house, and an ornamental line below the roof on the bluish house

29. Add ornamental line below the roof

On another house I added an ornamental line. First I drew a horizontal rectangle, and then on top to the left I drew a small (almost square) rectangle, half overlapping the big horizontal rectangle. I selected the top anchor points of this small rectangle using the Direct Selection tool and made the corners fully round. Then I selected this shape and went to Effect > Distort & Transform > Transform… to move it 7px horizontally 9 times in a row.

30. Expand effect and apply Minus Front

Afterwards I expanded this effect via Object > Expand Appearance. I selected both the big rectangle and all the smaller shapes. Then I selected the Minus Front option from the Pathfinder panel.

Expand the effect, and choose Minus Front to create the rounded gaps. Create a vertical brick effect on the other bluish house.

31. Create a vertical brick effect

Here I drew 2 small horizontal rectangles at the left border of the house. I selected both, and duplicated them vertically 13x leaving some room in between via Effect > Distort & Transform > Transform… as shown in the image above.

Feel free to use your creativity, and add a couple of more details on some other houses.

Pine trees

Now that the houses are finished, let’s draw some trees and bushes around the houses. Let’s start with the pine trees. First lock the ‘houses’ layer, and create a new layer on top. We’ll be drawing the pine trees in front of the houses. You can name this new layer ‘trees’ or ‘pine trees’ if you like.

1. Create the left half of the first pine tree

Start by drawing a dark green vertical rectangle as shown in the image above. Then select the Pen tool and hover with your cursor over the top left anchor point of the rectangle. A minus sign should appear at the bottom right of your cursor. Click the anchor point to remove it.

Create the left half of the first pine tree by drawing a rectangle and removing the top left anchor point, then vertical copy reflect

2. Copy reflect vertically

Select the Reflect tool, hold down Option/Alt, and click on the vertical line of your triangular shape. In the window that appears, select Vertical as Axis and hit the Copy button to duplicate the shape.

3. Apply color and draw the tree trunk

Give the other side of the tree a lighter green color. Draw another small (almost square) rectangle below the 2 shapes and give it a brown fill. Move this shape right below the 2 triangles of the tree, and make sure it’s nicely centered. Normally you should get visual clues to do this without using the align tools (see image below). Group all the shapes together by hitting Cmd/Ctrl + G, and move the tree onto the horizon guide.

Apply color, add the trunk, align things up and make it a Symbol

4. Make it a Symbol

Since we’ll be adding more than one of these trees in our illustration, creating a Symbol of the tree is smart. To do this, drag the object into the Symbols panel. In the window that appears, enter a name e.g. Pine tree and leave the other settings as they are.

Now you can add pine trees into your landscape by dragging the symbol out of the panel onto the canvas. You can scale the tree, or reflect it if you like. You can have a look at the main image of the illustration at the beginning of my article.

Deciduous trees

Next we’ll create the deciduous trees. Lock the other layers first, and create a new layer (‘trees’), this time make sure this layer sits below the layer ‘houses’. These trees will be bigger than the pine trees, as we’ll place them behind the houses to achieve an interesting landscape composition.

5. Draw the tree trunk and first branch

Start by drawing a vertical brown rectangle for the trunk of the tree. Then add another smaller and thinner vertical rectangle to create a branch on the left of the trunk. Rotate and position the branch a bit similar of how I show in the image below. Select the Rotate tool, then click into the right bottom anchor point of the rectangle and start rotating the rectangle to the left (by dragging).

Draw the tree trunk and first branch, and copy reflect the branch to create the 2nd one.

6. Copy reflect the branch

Select the branch and reflect it to the other side of the tree, by selecting the Reflect tool, holding down the Alt/Option key and click in the center of the trunk. Choose Vertical as Axis and hit the Copy button.

7. Create the green part of the tree

Now draw a bunch of light green overlapping circles to finalize the tree. You can decide to Unite all the circles into one single path via the Pathfinder panel and choosing Unite if you are happy with the result. If you want to maintain the flexibility to edit these circles later on, then hit the Unite option while holding down the Alt/Option key.

Create the green part of the tree, unite the shape and apply green gradient fill.

8. Apply green gradient fill, and make it a Symbol

I’ve decided to unite the shapes into 1 path, and I’ve also applied a linear gradient fill as well (see image above). Again, group the shapes together and drag the object into the Symbols panel to create a symbol so we can use it multiple times in our landscape.

9. Add in trees

Place the trees in different ways (smaller, bigger, mirrored…), and on different places on your illustration.

Add in different trees from the Symbol panel, resize them where needed and position them to your liking.

Bushes

Next up we’ll draw some simple bushes to fill up some of the areas. Like before, lock the other layers first to be safe, and create a new layer ‘bushes’ on top of all other layers (below ‘guides’). I named mine ‘green‘, thinking I would probably add more than bushes alone in this layer at that time. Of course it doesn’t matter what you name it, as long as you keep oversight of things.

10. Create a bush by drawing circles

Start by drawing a couple of slightly overlapping circles in different sizes in a horizontal sequence, with the first and last one lower than the ones in between, and having the bottom of the first and last circle aligned with the horizon guide (as shown in the image below). Select the most left and most right circle in the row and Vertically Bottom Align them both (via the Properties, Control or Align panel).

Create a bush by drawing circles

11. Complete the shape

Now select the Pen tool and draw a shape that fills up the area between the circles, starting at the intersection of the horizon guide with the bottom anchor point of the most right circle, then hold down the Shift key and click in the intersection point of the horizon guide with the bottom anchor point of the most left circle, and add more points where needed to fill the gap in a clockwise direction until you end at your starting point to close the shape. You get to see a circle sign at the bottom right of your pen cursor to indicate you’ll be closing your path (see image above).

12. Unite the shapes

Select all the shapes and Unite them together via the Pathfinder panel. Again it’s up to you whether you want to keep the flexibility to be able to change this shape later on. If you do, then hold down the Alt/Option key when you click the Unite option. You can also use the Shape Builder tool to unite the shapes together by selecting this tool and dragging over each segment of the object.

Unite the shapes

13. Make it a Symbol and add in some bushes

As you did before, drag your object into the Symbols panel to make it a symbol. Then drag and place the symbol on different places of your landscape. I have also placed some of them in an overlapping composition together to create an extra-long bush.

Make it a Symbol and add a couple of bushes in the illustration

14. Create another bush for the background

I’ve also created another bush shape in a different green that I turned into a symbol and then used in bigger a size on another layer behind the houses and the trees.

Create another bush to use in the background and to add in some variation.

15. Add some opacity

I also played with the opacity value. Some of the bushes use 60% opacity.

The skyline

Now we’ll be creating a soft skyline in the distance behind the houses, and trees. To get started lock all layers except the layer ‘houses’, and create a new layer right above the sky and ground. You can name it skyline.

1. Duplicate the houses layer

Next, click the small colored square to the right of the ‘houses’ layer to target and select all objects in this layer (see image below). Hold down the Option/Alt key and drag the little square downwards to the new layer you’ve just created. This will duplicate all the objects into the new layer. You can also use this technique to move objects from one layer to another without holding down a key. So holding down Alt/Option will duplicate what you’re moving.

Duplicate the houses layer and Unite the shape into 1 object

2. Unite the shape into one object

Now also lock the ‘houses’ layer, and to make it easier to work, hide all the layers except the ‘skyline’ one by clicking the eye icon. With the duplicated houses still selected, go to the Pathfinder panel and click the Unite option.

3. Select the roofs

Now select the Direct Selection tool and drag a rectangle selection over the houses’ rooftops. You can use the Lasso selection tool (see image below).

Select the roofs

4. Move the rooftops up

Use the Up Arrow key (or the Direct Selection tool) to move the selected anchor points upwards to make the skyline taller than the houses. You can make the ‘houses’ visible again to see how high you should make the skyline by clicking the eye icon in the Layers panel.

Move the rooftops up

5. Apply the subtle green blue fill

Next, you could clean up the object and remove the unnecessary anchor points by selecting the Delete Anchor Point tool (located behind the Pen tool) if you like. This is not needed, but if you’re like me and you prefer clean paths you do the small effort. You can also use the regular Pen tool and hover over an anchor point. This will also give you the minus sign to your cursor to remove an anchor point. To complete the skyline duplicate some of the shapes to fill up the empty gaps. Create some diversity by tweaking the roofs here and there. You can also mirror an object. Finally, apply the subtle green blue fill.

Apply the subtle green blue fill.

The clouds

The last item left to create are the clouds. As you can see, the clouds have a similar shape as the bushes, except that they exist of less circles. So to create them you use the exact same technique as for the bushes: draw a couple of slightly overlapping circles in different sizes in a horizontal sequence with a big one in the middle or to the side. Make sure the first and last one is a bit lower than the ones in between. Select the most left and most right circle in the row and Vertical Bottom Align them both. Then fill the bottom space by drawing a path using the Pen tool. Make sure the bottom line is perfectly horizontal (use the Shift key) and that the beginning and end point of this line is at the same position of the bottom points of the (first and last) circle.

6. Create and add clouds

Give the object a white fill, and Unite the shape. Then drag the object into the Symbols panel so you can apply the symbol a couple of times in different ways in the sky. To create a bit of diversity, create at least two different clouds and apply them in different sizes with different opacity values, as shown in the image below.

Create and add clouds by using the same technique you’ve used to create the bushes. Make it a Symbol and add them into the sky using different size and transparency values.

Add a Clipping Mask

You are almost there! To finish things off we’ll apply a Clipping Mask to our entire illustration so the bushes or the other objects that are on the side of our illustration and kind of fall off our canvas are nicely masked away.

7. Create a Clipping Mask layer

Create a new layer on top of all other layers (ignore the ‘guides’ layer, its position in the panel doesn’t matter), and name it ‘cityscape’. Draw a rectangle in this layer that has the size of your canvas, and make sure it is placed exactly on the canvas’ border, but with Snap to Point still enabled, this should be easy to do. You can also double check the Y and X coordinates in the Control panel at the top. Make sure to click the top left Reference point first if you do. The X and Y values should both be 0, the W should be 942 px and the H 440 px. You edit the values of course if you have to. Apply no fill and no stroke (the swatch with a red diagonal line) and click on the Make Clipping Mask icon button at the bottom of the Layers panel.

Move the layers into place to ‘frame’ the illustration.

8. Move all layers into place so the masking takes effect

Click the triangle icon of the ‘cityscape’ layer to reveal the object layers. Now select all the layers of your illustration (click in the middle of each layer and use the Shift key to select the 2nd, 3rd, 4th… layer), and drag them right below the rectangle path layer (see image below). You should get a thick horizontal line to indicate dropping the selected layers right below the mask path. The result should be that your illustration is now perfectly framed into your document.

Move all layers into place right below the Mask Layer so they become sublayers and the masking takes effect.

From: https://veerle.duoh.com/design/create-a-cityscape-in-adobe-illustrator

13 Successful Logo Designers And Their Awesome Tutorials

Wed, 04 Dec 2024 00:00:00 +0000

Hi guys, how are you? We all know how hard it is to create awesome, effective logos that align with the company’s mission and voice. After many hours of trying, failing and trying again you may come up with great results, or you end up being frustrated that nothing good comes out to light. That’s why we want to help you with some brilliant tutorials from the best assets in the industry.

Hope you find this helpful.

1. Aaron Draplin — Graphic Designer, Portland, Oregon

Aaron Draplin</figcaption></figure>

Books

Pretty Much Everything

Courses

Elsewhere

Twitter

2. George Bokhua — Logo Maker, New York, USA

George Bokhua

Courses

Elsewhere

3. Mackey Saturday — Graphic Designer, New York

Mackey Saturday

Course

Logotype Design: Create Brand Marks with Typography

Elsewhere

4. Paula Scher — Graphic Designer, New York, USA

Paula Scher

Books

Elsewhere

6. Sean McCabe — Hand Lettering Artist, Texas

Sean McCabe

Book

Overlap Book — Start a Business While Working a Full-Time Job

Course

Hand Lettering Resources & Education

Elsewhere

7. Matt Yow — Graphic Designer, San Francisco, CA

Matt Yow

Course

Brand Identity Basics

Elsewhere

8. Martina Flor — Letterer & Designer, Berlin, Germany

Martina Flor

Course

The Golden Secrets of Hand-Lettering: Create the Perfect Postcard

Elsewhere

9. Matt Vergotis — Logo Designer, Australia, CA

](https://cdn-images-1.medium.com/max/1600/1*eja7g7wI-CbfesrwLDTUKA.png)

Matt Vergotis

Course

Brushpen Logo Design: Develop Your Signature Style

Elsewhere

10. Ray Dombroski — Graphic Designer, California Hawaii

Ray Dombroski

Course

Typographic Logos: Typography and Lettering for Logo Design

Elsewhere

11. Steve Wolf — Graphic Designer, Austin, Texas

Steve Wolf

Tutorial

Live Graphic Design with Steve Wolf

Elsewhere

12. Karina Eibatova — Artist — Designer, Vienna, Austria

Karina Eibatova

Course

From Watercolor & Pencil Graphics to Logo Design & Abstract Painting

Elsewhere

13. Will Paterson — Graphic Designer, Richmond, England

Will Paterson

Course

Hand Lettering Logo Design Course
[How To Design a Modern Logo Start to Finish](https://www.youtube.com/watch?v=UsB6MV56fLo)

Elsewhere

Source: 13 Successful Logo Designers And Their Awesome Tutorials

10 Essential InDesign Skills by InDesignSkills

Tue, 03 Dec 2024 09:06:00 +0000

Typography Posters

Tue, 03 Dec 2024 00:00:00 +0000

Typography is the art of arranging, designing, and modifying type.

Creating a well-designed typography poster is no easy task and requires time and patience. When a poster focuses solely on typography as its main element, the designer must ensure that the type is both legible and artistic.

This collection showcases 30 amazing typography posters created by designers from around the world.

1. Typography is Tedious

By: Derek "longdesinzzz"
Location: United States

2. Make Good Typography

By: Enzo "EN70"
Location: Poland

3. Urban Typography

By: Andrew Ackroyd
Location: United Kingdom

4. Punk Typography

By: TPHorne

5. Funke – Terry Francis

By: Sébastien Nikolaou
Location: Greece

6. AIGA Typo Show

By: Allison Wilton
Location: United States

7. Bauhaus Typography

By: Samuel “SeriousSamm”
Location: United States

8. “T” ypography

By: “bacon111”
Location: United Kingdom

9. Jimi Hendrix

By: Kuba Czerniak
Location: Canada

10. Better Than Nothing

By: Nils Davey
Location: United States

11. Helvetica

By: William Antonius
Location: Indonesia

12. Sylfaen Type

By: Dan Smith
Location: United States

13. Design Culture Now

by Dan Smith
United States

14. Helvetica

by Emn1ty
United States

15. Morgellons Awareness

by Nikko. P. Lukman
Indonesia

16. Watchmen Quote

by Lisa “Spambi”
United States

17. Wonderland of Type

by Daniel Peters
Singapore

18. Typography

by Philippe Nicolas
Italy

19. The Cult of the Ugly 2

by “shetsy”
Canada

20. The Cult of the Ugly

by Tyler Durden
New Zealand

21. Typography

by Stefano Joker Lionetti
Italy

22. Typography Dope

by Francesco Muzzi
Italy

23. Movie Poster

by Boris Bonev
Bulgaria

24. Chaos is My Name

by Palax
Turkey

25. Defence H1N1

by Mike Chan
China

26. Most of the Clients Don’t Know What Typography Is!

by Mike Chan
China

27. Valdrada

by Carpet Crawler
Argentina

28. Graphic Evolution

by Boris Bonev
Bulgaria

29. The Past and the Future Make the Present Inspiring

by Mauro Hernández
Colombia

30. Nothing Can Stop a Good Idea

by Mauro Hernández
Colombia

Some of the Most Powerful Social Issue Ads That’ll Make You Stop And Think

Fri, 29 Nov 2024 22:22:49 +0000

Sensitive Material Warning

The following post contains images that may be disturbing. These are social cause posters. They are generally trying to upset the viewer.

However, if you become uncomfortable during this presentation please feel free to step out of the room during the lecture.

3 years ago by Lina D. with minor alterations by N.D’Angelo.

From: Panda

Many people complain about advertisements as an obnoxious way for companies to invade our everyday lives and cram their products down our throats, but that’s not all that advertisements are good for. The advertisements on this list are excellent examples of effective advertising strategies for social issue campaigns that let their voices be heard.

A well-made advertisement is designed to grab your attention and to remain in your memory long after you’ve left it behind, and that is exactly what many of these social causes need. Getting people to think and worry about various social and environmental issues (or even simply getting them to be aware of them) is important for raising public supporting and affecting meaningful changes. A few of these ads are, in fact, commercial ads, but it’s still nice that they champion socially or environmentally aware causes/products.

Just like with commercial advertisements, having just the facts is not enough. They are important, but the ad must also appeal to the observer’s emotions. Many studies have indicated that emotion can have a powerful effect on memory formation, ensuring that memories with emotion will last longer than those without.

According to “Father of Advertising” David Ogilvy, his contemporary, Howard Gossage, said that “Advertising justifies its existence when used in the public interest—it is much too powerful a tool to use solely for commercial purposes.”

Torture Victims Are People Just Like You And Me

Advertising Agency: Advico Y&R, Zurich, Switzerland

Stop The Violence: Don’t Drink And Drive

Advertising Agency: Terremoto Propaganda, Curitiba, Brazil

Premature Ending: “If you smoke, statistically your story will end 15% before it should.”

“THE END. If you smoke, statistically your story will end 15% before it should. For help with quiting call QUITTLINE on 0200 00 22 00” (Advertising Agency: Iris, London, UK)

World Wide Fund For Nature: Frightening vs. More Frightening

Advertising Agency: DDB&CO., Istanbul, Turkey

Deforestation Continues With The Turn Of A Page

Advertising Agency: LINKSUS, Beijing, China

Unhate

Advertising Agency: Fabrica, Italy

Elm Grove Police Department: Slower Is Better

Advertising Agency: Cramer-Krasselt, Milwaukee, USA

Save Paper – Save The Planet

Advertising Agency: Saatchi & Saatchi, Copenhagen, Denmark

Air Pollution Kills 60.000 People A Year

Advertising Agency: unknown

Bird Conservation: If You Don’t Pick It Up They Will

Advertising Agency: TBWAHuntLascaris, Johannesburg, South Africa

What We See When You Smoke

Advertising Agency: JWT, Atlanta, USA

Bangalore Traffic Police: Don’t Talk While Driving

Advertising Agency: Mudra Group, India

Child Soldiers: It’s Not Happening Here, But It’s Happening Now

Creative/Art director Pius Walker, Amnesty International, Switzerland.

Distracted Driving: Think Of Both Sides

Advertising Agency: Red Pepper, Ekaterinburg, Russia

Every 60 Seconds a Species Dies Out. Each Minute Counts

Advertising Agency: Scholz & Friends, Berlin, Germany

Innocence In Danger: Where’s The Pedophile?

Art Director: Michael Arguello, Copywriter: Bassam Tariq, Additional credits: Jason Musante

Sexual Predators Can Hide In Your Child’s Smartphone

Advertising Agency: Herezie, Paris, France

Smoking Causes Premature Aging

Advertising Agency: Euro RSCG Australia

You’re Not A Sketch. Say No To Anorexia

Advertising Agency: Revolution Brasil

Neglected Children Are Made To Feel Invisible. Stop Child Abuse Now

“To dramatize the issue of neglect, we placed mannequins dressed as children behind billposters. When the inevitable happened, we revealed a second message.” (Australian Childhood Foundation, JWT Melbourne)

Global Action In The Interest of Animals: Plastic Bags Kill

Advertising Agency: BBDO Malaysia, MALAYSIA, Kuala Lumpur / Advertising Agency: Duval Guillaume, Belgium

What Goes Around Comes Around. Keep The Sea Clean

Advertising Agency: JWT, Dubai, UAE

Tailgating Isn’t Worth It. Give Trucks Room

Advertising Agency: Amélie Company, Denver, Colorado, USA

Sleepiness Is Stronger Than You. Don’t Drive Sleepy

Advertising Agency: BBDO Bangkok, Thailand

See how easy feeding the hungry can be?

Advertising Agency: TBWAHuntLascaris, Johannesburg, South Africa

Causing Cancer By Yourself

Advertising Agency: Dentsu, Beijing, China

Deforestation And The Air We Breathe: Before It’s Too Late

Advertising Agency: TBWAPARIS, France

For The Homeless, Every Day Is A Struggle

Advertising Agency: Clemenger BBDO, Melbourne, Australia

The Prevention Beer Mug: Please Don’t Lose Control Over Your Drinking

Advertising Agency: EURORSCG Prague, Czech Republic

One Child Is Holding Something That’s Been Banned In America To Protect Them. Guess Which One?

Advertising Agency: Grey, Toronto, Canada

Breast Cancer Awareness Bra

Advertising Agency: Bolero, Fortaleza, Brazil

What Goes Around Comes Around: Stop The Iraq War

Advertising Agency: Big Ant International, New York, USA

UN Women: Auto-Complete Shows Perceptions Of Women

Advertising Agency: Ogilvy & Mather, Dubai, UAE

Don’t Buy Exotic Animal Souvenirs

Advertising Agency: LOWE GGK, Warsaw, Poland

Animal Abuse And Shelters: Same Pet, Different Owner

Advertising Agency: TBWA-Santiago Mangada Puno, Philippines

Buckle up. Stay alive

Advertising Agency: Lg2, Quebec, Canada

Principles of Design

Sat, 23 Nov 2024 14:24:31 +0000

Check Your Documents for Balance, Alignment and Other Principles of Design

by Jacci Howard Bear

Updated March 04, 2017

The principles of design suggest how a designer can best arrange the various components of a page layout to connect to the overall design and to one another.

All the principles of design, also known as principles of composition, apply to any piece you create. How you apply those principles determines how effective your design is in conveying the desired message and how attractive it appears. There is seldom only one correct way to apply each principle but check your document to see how well you applied each of these six principles of design.

Balance

Are your designs in balanceVisual balance comes from arranging elements on the page so that no one section is heavier than the other. At times, a designer may intentionally throw elements out of balance to create tension or a certain mood. Are your page elements all over the place or does each portion of the page balance out the rest? If the page is out of balance, it should be done purposely and with a specific intention in mind.

Check Your Use of the Principle of Balance

Proximity / Unity

In design, proximity or closeness creates a bond between elements on a page. How close together or far apart elements are placed suggests a relationship (or lack of) between otherwise disparate parts. Unity is also achieved by using a third element to connect distant parts. Are title elements together? Is contact information all in one place? Do frames and boxes tie together or are they separate related elements in your document?
Check Your Use of the Principle of Proximity

Alignment

Is your layout in alignment with your goals?Alignment brings order to chaos. How you align type and graphics on a page and in relation to each other can make your layout easier or more difficult to read, foster familiarity, or bring excitement to a stale design. Have you used a grid? Is there a common alignment—top, bottom, left, right or centered—between blocks of text and graphics on the page? The text alignment should aid readability. If certain elements are out of alignment, it should be done purposefully with a specific design goal in mind.
Check Your Use of the Principle of Alignment

Repetition / Consistency

Do your designs exhibit consistencyRepeating design elements and consistent use of type and graphics styles within a document shows readers where to go and helps them navigate your designs and layouts safely. Ensure that your document utilizes the principles of repetition, consistency and unity in page design. Do page numbers appear in the same location from page to page? Are major and minor headlines consistent in size, style and placement? Have you used a consistent graphic or illustration style throughout?
Check Your Use of the Principles of Repetition and Consistency

Contrast

Do you have good contrast among components of your design? In design, big and small elements, black and white text, squares and circles, can all create contrast in design. Contrast helps different design elements stand out. Is there enough contrast between the text size and color and background color and pattern to keep text readable? If everything is the same size even when some elements are more important than others, the design lacks contrast.

Check Your Use of the Principle of Contrast

White Space

Designs that try to cram too much text and graphics onto the page are uncomfortable and may be impossible to read. White space gives your design breathing room. Do you have enough space between columns of text? Does text run into frames or graphics? Do you have a generous margin? You can also have too much white space if items float on the page without any anchor.

ADDITIONAL PRINCIPLES OF DESIGN

Other designers and instructors may include principles such as harmony, flow, or hierarchy in addition to or in place of some of these principles of design. Some principles may be combined or go by other names, such as grouping (proximity) or emphasis (use of various other principles to create a focal point). These are different ways of expressing the same basic page layout practices.

Graphic Design Basics

Good graphic design is no accident

[Jacci Howard Bear](https://www.lifewire.com/jacci-howard-bear-1073678}

Graphic design is the art and science of combining text and graphics to communicate an effective message in the design of websites, logos, graphics, brochures, newsletters, posters, signs, and other types of visual communication. Designers achieve their goals by combining the elements and principles of graphic design. Some concepts, such as contrast, are both elements and principles: the former, as a visual characteristic; and the latter, as the technique employed by it.

Elements of Graphic Design

In addition to the obvious ones such as images and type, graphic design elements include lines, shapes, texture, value, size, and color. Graphic designers for print and web pages use some or all of these elements to generate effective designs. The goal is usually to attract the viewers’ attention and, sometimes, to motivate them to take a specific action.

Lines in Graphic Design

Lines are the most basic of the design elements. Lines can be straight, curved, thick, thin, solid, or not solid. They are used to connect two points, separate sections of a design, and focus the user’s eye. Their qualities create emotion, movement, organization, and more. For example, a jagged line conveys emotion; a line that ends in an arrow forces the viewer’s eye to look in a specific direction. A line that meanders among several elements guides the viewer from one element to the next and onward through the page.

Shape in Graphic Design

The basic geometric shapes are squares, circles, and triangles. They form boxes or borders on a design or solid shapes for decorative purposes. Icons, symbols, and dingbats are also considered shapes, and they add interest and clarity.

Texture in Graphic Design

Certain graphics techniques, such as the use of rhythm and shadow, create texture—the visual “feel” of an element. Texture can serve as a background, enhance overall appearance, and add character to other elements such as type and images.

Color in Graphic Design

Color attracts attention and conveys emotion and mood. For example, red represents strength, anger, or passion. Blue invokes peace, professionalism, or security.

Value in Graphic Design

Value is a measure of darkness and lightness in an element or design. Value creates contrast and emphasis. For example, a light object against a dark background draws the viewer’s eye.

Size in Graphic Design

The size of an element in graphic design generally indicates its importance. The most important information is typically the largest on the page and draws the viewer’s attention first.

Balance in Graphic Design

Most good graphic designs achieve visual balance by using symmetrical, asymmetrical, or radial symmetry around a visual center.

In symmetrical balance, both sides of a page layout are the same in weight, shape, lines, and other elements.
Asymmetrical balance occurs when the two sides of a website aren’t the same, but they have similar elements.
Radial symmetry places elements in a circular pattern. Although it is popular in print layouts, radial symmetry isn’t seen much on websites because the circular placements are difficult to achieve.

Occasionally, a graphic designer intentionally produces an unbalanced design, usually to focus attention on a single element. In design, as in other areas, you need to know the rules before you can break them effectively, but unbalanced designs can work.

Alignment in Graphic Design

Alignment refers to lining up the elements of a design along the top, bottom, center, or sides of the elements. The aligned elements don’t have to be of the same type. They are frequently aligned along the left edge of the layout. Different-size photos appear as a unit when they are aligned across the top or the bottom.

Repetition in Graphic Design

Repetition duplicates the characteristics of similar elements to contribute to design consistency. Repetition can also create rhythm in a design. A series of bulleted points of interest in the same color, type, and size appear as a complete unit.

Proximity in Graphic Design

Proximity maintains a relationship between items that go together. The elements don’t have to be positioned closely together, but they should be connected visually.

Contrast in Graphic Design

Contrast occurs when opposing elements are juxtaposed: big versus small or dark versus light, for example. It can highlight important elements of a design. Contrast is easily achieved with color, but it can also occur with texture, type, and graphic elements.

Space in Graphic Design

Space is the part of a design that is left blank. Negative space is intentionally placed in the design. The margins and gutters between other elements are referred to as passive space. Space in a design adds emphasis to an area because the eye gravitates to the part of the design that is not empty. Effective graphic design takes into account both positive and negative space.