Magazine Cover

TalkAboutFinal-1TalkAboutFinal-2

Description

TalkAbout is a magazine for BYU-Idaho, with articles about school news, about school organizations, and, hence the name, about talks.

The logo features the “o” in “About” forming an arrow circling about.

The photos are bright, with a heavy, yellow emphasis to complement the blue logo, headers, mug and pen.

The magazine has a simple, 3 column layout with an image encompassing most of one column. A pen sits on the page, text wrapping around it.

Message

The cover is meant to complement the main article, to inspire readers to record their testimony in their journal. This is emphasized by the journal, pens, and scriptures, yellow as the primary hue to promote that it can be a joyful experience.

The magazine itself is meant to be inspiring, yet informative, supporting one spiritually while helping them get involved with what makes BYU-Idaho unique.

Audience

The primary target audience is primarily students, both men and women about ages 18 to 26, though this range is meant to include all students. As the new BYU-I marketing initiative says, this university is “Student focused, by design.”

A secondary audience would be the professors, as they can benefit from spiritual edification and school news. This could range from men and women 30 to 70 years old, but once again, this could vary depending on the actual ages of professors.

Process

I started by searching for a list of BYU-Idaho devotional transcript to be the highlighted article. After I found one that caught my eye, “Have You Documented Your Testimony,” I searched for images related to journals to use for my draft.

Due to time and logistic restrictions, I created my draft entirely with Google Slides. I found images, and used textboxes to create everything, except the arrows in the logo, which used the arc and triangle shapes. I created several rectangles at set dimensions to form margins. I modeled the design off of an article found in The Ensign magazine.

sketches.jpg

Click here for a PDF of the Magazine Draft.

I exported the logo from Google Slides to a Scalable Vector Graphic. InDesign does not support that file type, so I imported and saved it as an Adobe Illustrator file so I could place it in. I replicated my draft in InDesign, using the rule and guide tools to create margins and columns. I placed and sized the draft images until everything matched my draft.

I used the textbox overflow feature, which was incredible useful, something Google Slides lacks. Whenever I needed to adjust the text size or column size, the text would automatically flow into the columns as needed. I used Paragraph Styles to create the headers, a drop cap for the first paragraph, and slight indentation for the other paragraphs.

As suggested by my professor and my critique group, I removed several arrows from the logo to simplify it. I also created more interesting article headlines on the cover, aligning then with the bookmark ribbon using various sizes and combinations of my fonts.

I used my camera to take pictures resembling the images I used for my draft. I used Photoshop to greatly adjust each photo. I increased the brightness and saturation of all three photos. The color balance was very tricky, however.

I wanted the inside image of the open journal to match the cover. This required selecting the pen, inverting the selection, and ramping up the yellow and decreasing the red in the color balance. Surprisingly, this was the most time consuming part of the project, as it took much trial and error, as well as many uses of the spot-healing tool to fix the pen as I  struggled to properly select it.

For the black pen sitting in the article, I used a layer mask to create a transparent image around the pen. I then placed the image and used the text-wrap tool to wrap based on the transparency (alpha channel).

Time for finishing touches, I used the spot-healing tool for many things. First and foremost, I used it to fix several distracting spots and imperfections in all three images. I also used it to create the left corner of the bookmark, as it was folded over in the original photo. Finally, I used it to refine the edges of the mug, which was affected horribly by noise that was making the image a very poor-quality appearance.

Top Thing Learned

Photoshop is incredible at quickly turning mediocre photos into pretty good ones, but it still requires skill and experience. No computer can optimize an image quite as well as an experienced Photoshop user can, because little details, and an understanding of the context take thought, precision, and, most importantly, time.

Fonts

Quicksand (Sans-serif): Logo “About”
Robot Slab (Serif. Light, Regular, Bold): Logo “Talk”, body copy, parts of article highlights
Roboto  (Sans-serif. Thin, Light, Regular, Medium, Black): Article title, description, author, headers, page number, issue number, date, parts of article highlights.

Unedited Photos

DSC00077
DSC00068
DSC00064

pathway-logotype_white
Pathway Logo White

Brochure

Screenshot 2017-03-18 at 11.21.21 PM.png

 

Description

Tiny Toaster is a company that sells the book children’s books, card games, board games and other products, such as t-shirts, fridge magnets, and cards, meant to inspire creativity and facilitate connections between children and their parents, siblings, and friends.

This brochure is designed after the face of the company, Timmy the Tiny Toaster, and opens up displaying a countertop with him as his kitchen appliance friends playing and enjoying themselves. The three categories of products; books, games, and stuff; are displayed with descriptions of their purpose and content.

It is intended to show off the colorful characters, graphics, and design of Tiny Toaster’s products as well as provide information about them, primarily to persuade them to visit the website and make a purchase.

Message

Tiny Toaster is meant to inspire imagination through lively, colorful characters and games that spark creativity. This is the type of play children need to grow their minds, not the mind-numbing mobile games and television that is plaguing children and teens all over the world.

Tiny Toaster is also dedicated to teaching children life-lessons in its children’s books, such as perspectives on self-worth and bravery.

Audience

The target audience includes mothers and fathers aged 28 to 78, as well as their children aged 4-14. The fun design is meant to attract their attention and get them to look at the fun graphics and want to learn more about them. This is primarily because they will be likely to either have children or grandchildren of those ages, the target audience of the products themselves. The children’s books by the company target young children between about 4 and 8, while the card and board games target older children between about 8 and 14.

Process

While we were instructed to use Adobe InDesign, I had no idea how to even get started creating this toaster-shaped brochure, full of graphics, and a graphic itself. I created the general shapes of the layout in Google Drawings, using my already existing scalable vector graphic of Timmy the Tiny Toaster.

I imported it into Adobe Illustrator and refined the dimensions using the grid-alignment tools. Once the layout was in place, I imported my logo as well as many elements I used in my website mockup and other projects and resized and positioned them to my liking.

The counter-top scene was taken directly from my Website Mockup. I used a clipping mask to crop the image and, through much trial and error, rounded the corners to fit the shape of the brochure.

I added textboxes and content describing the products and purposes behind them. I unfortunately failed to be consistent in my font size and weight, a result of using Illustrator instead of InDesign with it’s Paragraph Styles feature. I also simply added spaces instead of using word wrapping tools, as I did not know how to use them in Illustrator like we had learned to do in InDesign.

Top Thing Learned

There’s a reason this project was supposed to use  InDesign: paragraph styles. My body copy, both in weight and font was inconsistent, and I failed to notice until I had already printed my brochure and it was too late to change it.

Paragraph Styles help maintain consistency with very little effort. I’m familiar with paragraph styles and use them often in Google Docs and here on WordPress. In the future, I will make an extra effort to learn how to use InDesign to make use of it’s strengths.

Fonts

Main, Logo, Body: Quicksand (Sans-serif)
Headers: Quicksand Bold (Sans-serif)

I originally planned and tried to use Robot-slab for headers like I did in my website mockup, but regardless of what I tried, the blocky appearance led me to believe Quicksand would still be the best for my headers. The massive difference in size, weight, color, and background color seemed to offer plenty of contrast.

Original Images

mens-plain-white-crew-neck-short-sleeve-t-shirt-p5830-17975_zoomblank-1886008_960_720

briefcase.pngfire.pngsettings (1).pngsword.pngbook-open-variantdice-multipletshirt-crew

Blue Inc (White T-shirt)
Pixabay (Colored T-Shirt)
Material Design Icons (Book, Briefcase, Fire, and Gear by Google. Sword and T-Shirt by Austin Andrews, Dice by Michael Richins)

Web Page Mockup

tinytoastermockup

Description

Tiny Toaster is a company that sells the book children’s books, card games, board games and other products, such as t-shirts, fridge magnets, and cards, meant to inspire creativity and facilitate connections between children and their parents, siblings, and friends.

Message

Tiny Toaster is meant to inspire imagination through lively, colorful characters and games that spark creativity. This is the type of play children need to grow their minds, not the mind-numbing mobile games and television that is plaguing children and teens all over the world.

Audience

The target audience Tiny Toaster’s website is mothers and fathers aged 28 to 78. This is primarily because they will be likely to either have children or grandchildren aged between 4 and 14, the target audience of the products themselves. The children’s books by the company target young children between about 4 and 8, while the card and board games target older children between about 8 and 14.

Process

Sketches

The first step was to create sketches of the wireframes. I used a standard wide-ruled notebook and a #2 pencil that was probably too dull, but did the job. I knew I wanted three categories of products, so I looked to Amazon and Walmart’s websites for inspiration. My first sketch included a section for a blog, which I scrapped. My second sketch turned the categories into three columns, and my final sketch used three rows, repeated in their design.

10a-sketch-calebwillden-3 10a-sketch-calebwillden-2 10a-sketch-calebwillden-1

Wireframe

I settled on a version of my third sketch. I used Adobe Illustrator with the 960.gs template to organize my layout. I used nothing but the rectangle, text, and pen tool. I decided to add more products than in my sketch and removed the “Show All” button in order for the products to properly line up with the grid. I decided it would be fun to have the footer be a counter-top, so I added sections for my lively kitchen appliances.

finaltinytoasterwireframe

Mockup Draft

I added my logo, removed the X’s, filled the boxes with color, changed the font, and added a few icons. I imported the counter-top illustration with the toaster, blender, oven, and stove from where I originally created them in Google Drawings with a few adjustments to color and size.

mockup-calebwillden

Final Mockup

Product Icons and Banner Image

This was the most time-consuming project yet, primarily because I needed to create numerous product icons and images myself.

In my final design, I used Google Drawings to create all of the product icons, exporting them as Portable Network Graphics (.png) and adjusting their size to fit. I used a clipping mask to help ensure they matched the boxes without distorting the images.

The banner image is a spin-off of the counter-top at the bottom of the page, but with many imported elements to make the website look alive and exciting. I used the pen and rectangle tools to create a few more items in the banner image, such as the dice and game pieces.

Rounded Rectangles and Drop Shadows

I used the rounded rectangle tool to create highlights on the Home button as well as the Books, Games, and Stuff section labels with a white fill at 20% opacity. I then added drop shadows to these buttons as well as the product icons and sections for a slight feeling of depth to match the Business Card and Letterhead, partly inspired by Google’s Material Design art style.

About Text

I replaced the filler text with actual text and added headers and a call-to-action button reading “Shop Now”. I adjusted the toaster, blender, and oven’s eyes to look towards the button in order to direct the attention of the user.

Finishing Touches

I removed the fill on the navigation bar for a cleaner and more cohesive look. I made various minor spacing and sizing adjustments.

gridtinytoastermockup

Top Thing Learned

Proximity is key. In my peer-critique group, every draft mockup, including my own, had an issue with padding around text. We all reminded each other the importance of enough space on all four sides of text to make it more comfortable to read.

Fonts

Main, Logo, Body: Quicksand (Sans-serif)
Headers: Roboto Slab (Slab Serif) [Also used for subheading in “Battle Quest: Frontiers”]

Original Images

mens-plain-white-crew-neck-short-sleeve-t-shirt-p5830-17975_zoomblank-1886008_960_720

1488699192_square-facebook.png 1488699195_square-twitter.png 1488699274_5.png

cart.pngflash.pngbriefcase.pngfire.pngsettings (1).pngsword.png

Blue Inc (White T-shirt)
Pixabay (Colored T-Shirt)
Icon Finder (Facebook, Twitter, Instagram Icons by Zlatko Najdenovski)
Material Design Icons (Cart, Flash, Briefcase, Fire, and Gear by Google. Sword by Austin Andrews)

Business Identity

tinytoaster3logos

Description

Timmy the Tiny Toaster is a children’s book I wrote and illustrated and plan to publish. Tiny Toaster would be the company or brand that would sell the book, as well as card, board games and other products, such as t-shirts, fridge magnets, and holiday cards.

Process

Symbol Logo: I am a fan of Google’s iconic “material design” guidelines, including its philosophy, colors, and iconography. I mimicked the style for a simple, flat, but still mostly recognizable shape and used their Roboto Slab to match the serif-like features of the toaster symbol.

I used Adobe Illustrator’s rectangle tools, adjusting the fill to white and corner radius as I saw fit.

Illustration Logo: This portrays a fun and likable cartoon toaster named “Tiny the Tiny Toaster”, the main character in my book by the same name. I created this rendition of him about a year ago using Google Drawings. I created all of his elements using the rounded rectangle, circle, and arc shapes. I adjusted the size, corner radius, fill color, and stroke color until I saw fit. I used a grid to help precisely proportion his elements and align them on his body. A script font was used on the title page of the original version of the book, so I followed suit.

I imported him into Adobe Illustrator as a .svg file. The toast was created using Adobe Illustrator. I turned on the grid and drew rectangles, adjusted the corner radii, and used the pathfinder tool merge the outer shape of the toast. The effect is subtle, but there are three shades of brown, so a simple stroke couldn’t be used. The inner shape took the most time, requiring much trial and error before it looked visually pleasing.

Text Logo: This logo uses the the kid-friendly Quicksand font that I used in my book. I used the circle and pen tools to create the eyes, mouth, and plug.

Final Design:

The final design can be seen on the Business Card and Letterhead. I decided to combine the illustration and text logos. My critique group recommended I remove the plug on the end of the text to help prevent the notion that Tiny Toaster sells toasters, then added “.com” to direct viewers to the website, one of their primary method of sales.

business-card-01business-card-02
letterhead

Business Card and Letterhead: I love simplicity, so I presented no more than the logo, the basic products of “Books, Games, and Stuff”, as well as the necessary contact information. I used the company’s blue color with a slightly lighter tiny to compliment it. The slight tinting and shading was created using 20% opacity rectangles using white and indigo fills respectively. This, the drop shadows, and the Quicksand font match the style in the book as well mock-ups of a card game the company would sell:

untitled-drawing

Message

My logo is intended to portray the idea of fun and imagination, both with Timmy the Tiny Toaster, the smiling logo, and the bright background color. While the symbol logo is crisp and professional, very few children would be interested in or recognize it. The illustration, combined with the text, however, can be iconic. Children or parents whose children have read  Timmy the Tiny Toaster would easily recognize him, possibly increasing interest in products with Tiny Toaster’s branding.

Audience

The target audience for my company logo is mothers and fathers aged 28 to 78. This is primarily because they will be likely to either have children or grandchildren aged between 4 and 14, the target audience of the products themselves. The children’s books by the company target young children between about 4 and 8, while the card and board games target older children between about 8 and 14.

Top Thing Learned

The most significant thing that I learned through this process was that learning to use Adobe illustrator is difficult and takes time and practice. I must be patient with myself and can’t expect to master it as quickly as I can usually other programs due to its immense complexity and wide variety of tools and features. This means I must continue to use it, rather than always default to Google Drawings, my familiar medium.

Fonts

Symbol Logo: Roboto Slab (Slab Serif)
Illustration Logo: Parisienne (Script)
Text Logo / Body Copy: Quicksand (Sans-Serif)