Design Process

By Madison Johns          #ToddLovesProcess

[maddysdesignprocess]

Blog Entry - Rationale

Explain your rationale for colour decisions, font choices, images and how all of these contribute to effectively conveying the brand message of your corporation.

I knew from the start that I wanted to continue with the Timothy’s colours. I had decided early on what colours I wanted to be dominant in the app. I chose the off-white because it feels breathable and simple. I kept the blue and red as spot colours for text and to separate content so the app isn’t overcome with their dark values. 

For fonts, at first I decided to use Market Deco and Helvetica, as I had used in the website design. However, once I had them on the page I thought the app then looked boring and ugly. I decided to look for a fun, display coffeehouse font and found one on dafont.com. I then found another font for the body text that went well with the display font I chose and went with them. The new choices fit the app better and appears fun. 

As for images, I always had an idea of what images I wanted to show. I decided to use big, clear photos of coffee products (frappuccinos, regular coffee, iced coffee) that would be accompanied by text descriptions. I took the background out of all my photos so they go nicely into the layouts without having to introduce a frame.

[maddysdesignprocess]

Blog Entry - Process

Describe your process for designing the App for your corporation.

I started this project by downloading competitor apps - specifically, Starbucks and Second Cup. I went through them both and found that the purpose and layouts for both apps are similar, that helped me decide what the purpose of my app would be and gave me a general idea of what I wanted my app to look like. I wrote down these ideas and general layouts for the app and brought them into Illustrator.

In Illustrator, I generated wireframes for main pages based on my research and notes. During the wireframe process I was picturing my app as it went along, and came up with decisions and ideas in my mind for the mockup stage.

Next, I started doing mockups over the wireframes I made. I had already decided what i wanted to do with the colours, what kind of text I wanted and how I wanted the layouts to look. I wanted the app to be dominantly the colour white because it feels welcoming, breathable and simple. I used the Timothy’s blue and red as spot colours for text and to separate content. For text, I at first decided to use Market Deco (Timothy’s logo text) and Helvetica for headings and body text but once I put them on the page they looked weird to me, I scrapped them both and decided to look for a display font that feels very coffeehouse. I found a font on dafont.com for headings and another in my fontbook for body text and put them on the page - they looked awesome together so I kept them. For layouts, I knew I wanted big clear images of products without backgrounds so they fit nicely into the page without having to introduce a frame. I kept lists and forms pretty generic and they work well.

Finally, since I had generated quite a bit of mockup pages, I was able to pick and choose what I wanted for the final. After I assembled my final, I realized the slim body text I chose is a bit too slim, so I made the text look bolder. Aside from that, I didn’t make any other changes to the final. I’m very pleased with the final and they printed out awesome too!

[maddysdesignprocess]

Here is the final Timothy’s App design. Since I did a lot of mockup pages for the app, I was able to just go in and pick out which ones I liked most and used them for the final. The only changes I made from the mockup was making the text slightly bolder, because at the small scale I have the pages at, the text kinda faded out and looked super slim and tiny. I’m very pleased with the design and I hope you are too!

[maddysdesignprocess]

Next, I added colour, images and text over the wireframes and made all these mockup pages. I knew from the start I wanted the app to be dominantly white coloured, because it feels welcoming, breathable and not so serious. I also decided to use the Timothy’s blue and red as spot colours in this case, and to divide content. I tried a few different backgrounds with the start of the app to see what worked, and I liked the flat white background. I continued with that style throughout the other pages. In regards to text, I started using Market Deco (Timothy’s logo text) as headers at first, but it looked too serious and I didn’t really like it. I started looking through dafont.com for some fun coffeehouse fonts and found one I liked, and decided to use it as headings for products and promotions. I also started using Helvetica as body text and again didn’t like the look, so I found another font for the app’s body text that went nicely with the new heading font. Everything that came after those decisions came easily because I had ideas of what I wanted content, lists and product promotions to look like. I just went with it. I did continue to look at competitor app’s for inspiration for things such as forms and navigation. 

After I finished the pages, I went on to try icons for the app. I started with my original logo with different browns as backgrounds, but I thought they looked ugly and plain. I then decided to try adding some colour, and ended up with the blue-red gradient icon that I chose to use. Ultimately I thought that the Timothy’s O is still recognizable as just that, so making a few minor changes for the sake of the app icon was okay.

[maddysdesignprocess]

Next, I generated wireframes in Illustrator from my sketches. Throughout this process I kept referring to competitor apps for inspiration and ended up with all these wireframes. These are the main pages in the app, and some of the layouts will be repeated throughout the app.

[maddysdesignprocess]

I started the App Design project by writing down what I wanted the purpose of the app to be. I decided that this app will be used to order and pay for your Timothy’s drinks, as well as collect points and keep up-to-date with promotions and new products. I then looked into competitor’s apps and found that the app layouts are similar, just with different designs, colours, etc. I then did a few sketches of wireframes and potential layouts for pages in the app. I stuck to getting main ideas down, and brought them into Illustrator.

[maddysdesignprocess]

Blog Entry - Rationale

Explain your rationale for colour decisions, font choices, images and how all these contribute to effectively conveying the brand message of your corporation.

I knew from the start what colours and fonts I wanted to use. I wanted to stick with the choices I had previously made for the other assignments because they worked well and will flow with what I’ve made so far. I used the blue, red, brown and creme colours of Timothy’s and continued with using Helvetica and Market Deco for text and headings. in regards to images, I always had an idea of what images I wanted to use to promote Timothy’s products (big, clear stock photos of coffee/being made and coffee beans).

[maddysdesignprocess]

Blog Entry - Process

Describe your process for designing the Annual Report for your corporation.

I started by making notes of what information is required for this project and wrote down some quick ideas of what I wanted it to look like (simple vector illustrations, clean).

Next, I went through the Second Cup annual reports of previous years and made thumbnail sketches of how they arranged and organized content, what kind of images they used and how they used them and what kind of infographics they used. I did about 24 thumbnails of ideas for spreads, covers, infographics and layouts in general.

Next, I decided to start the project off easy by generating some covers first. I did 3 covers in an evening and wasn’t very pleased with any of them, so I gave up and went to bed to try again after some sleep. The next day, I made the cover spread I used for this project in about a half hour. It was quick, easy and I was pleased with the result.

Then, I started to think of ways I could incorporate the cover into the inside spreads, and decided to use the box grid idea to place photos on the page for “business at a glance”. I did that on the first spread and later on the third page. Then I did the president and ceo letter, and kept the design simple for that page with a single photo in the corner of the letter.

For financials, I re-made the financial highlights chart from one of the Second Cup Annual Reports and used the same information for the infographics - but I made them look better. I got my infographic inspiration from google.

After consultation I made some changes, and now it looks awesome! I’m so happy with the way the design turned out.

[maddysdesignprocess]

This is the final 8 page annual report. After consultation I made a few changes - I started by shortening the letter from the president and ceo from 2 pages to 1, which made room for more “business at a glance” photos. Next, I found more photos to be used for “business at a glance” and put some in the spaces next to the ceo letter. Then I rearranged the photos on the first spread and moved the mission statement to the second page to give it more room. I also got rid of the table of contents since it was unnecessary. Next, I fixed the line graph under the financial highlights and made the sum jumps more smaller so the graph has some dynamism. Last, I zoomed in on the map on the back page to show the cluster of Timothy’s locations and added text to remind the viewer of the locations in Edmonton and Winnipeg. Voila! I think it looks awesome.

[maddysdesignprocess]

Here is the first draft of the annual layout. I wanted to bring in the blocks from the cover into the inside spreads somehow, so I brought into the first spread and used the blocks to hold photos of products/coffee related content. I also used the blocks to hold text, such as the mission statement and table of contents. For the second spread (Letter from the President and CEO) I kept the background the creme colour with a photo - simple and formal, as should a page that has the President and CEO’s letter on it should be. For the last spread (Financials) I decided to use a chart to organize the financial information, then use a couple graphs to give visuals for that information. I got the financial information from the Second Cup Annual Report, and graph inspiration from the Google.

[maddysdesignprocess]

I decided to start this project off simple and generated some covers as a start. My first cover was typographic and very minimalist, and I liked it, but wanted to explore further. My next cover incorporated the Timothy’s “O” to add something nice to look at, and remained minimalist. My third cover is a stock photo with some transparency boxes and text (it won’t upload right now, will try again later). I liked it as well, but I didn’t feel like it was mine. At this point I was tired of looking at a computer screen so I came back the next day, and generated the last cover. I got the idea when I was searching the internet and found a pop art poster promoting coffee. I brought the idea of coloured boxes into my design and added simple illustrations, some text and the logo. Once I finished it, I knew this is the cover I’m going to use because it felt like my own, and it looks awesome compared to the other ones (in my opinion). 

[maddysdesignprocess]

Here are my initial sketches. I started by reading the project brief and making notes of what content we needed to include in our annual reports. Then I wrote down some quick ideas - what style I wanted, what kind of text and colours. I had a few ideas off the top of my head but I went through the Second Cup annual reports from previous years and got a lot of inspiration from them. I noted layout designs and the placement of photos, then looked into their infographics. I pumped out a lot more ideas once I finished the Second Cup annual reports, and brought these ideas into Illustrator.

[maddysdesignprocess]

Blog Entry - Rationale

Explain your rationale for colour decisions, font choice, images and how all of these contribute to effectively conveying the brand message of your corporation.

I kept with the traditional Timothy’s colours from the beginning, and used these colours to block in and organize content on the webpages. In regards to font, I decided to stick with Market Deco - the font I used to create the logo - for headings and used Helvetica for the body. As for images, I wanted to use big clear photos of Timothy’s beverages to give the viewer a nice visual when they come to a new webpage. I kept images that I made in Illustrator very simple, clean graphics to reflect the new identity. All these elements contributed to effectively giving the Timothy’s website a new refreshed look.

[maddysdesignprocess]

Blog Entry - Objectives

Clearly identify the ways in which your solutions and process meet the following objectives:

Research and source the corporation’s current website design(s).

Use the information currently published on these materials to create your own graphics.

Design a new homepage and three internal pages for the corporation that incorporate the new identity you’ve created and embrace the new brand standards that you continue to establish. Start with the information that is currently used on the corporation’s website and make decisions about the relevance of the information and it’s structure (navigation) in their new brand approach.

As mentioned in another entry, I started this project by looking through the timothys.ca website for inspiration, then by looking at the website of its competitor coffeshops - mostly Starbucks. I kept elements of the existing Timothy’s website (”best sellers”, navigation, footer) while embracing Starbucks’ influence and made the website look up-to-date. I also re-illustrated photos for coffee blends and K-Cup packs so their icons matched the newer look of the website, and took inspiration from the existing illustrations.

[maddysdesignprocess]

Blog Entry - Process

Describe your process for designing the home page for your corporation.

I started by going onto timothys.ca and looking through their website to see what they have going on right now. I noticed that their website is simple - with a creme textured background all the way down with tabs to indicate headings, as well as a simple navigation bar. I then analyzed the way they organized content and took what I needed for my webpages. To get some contemporary inspiration, I then looked over the Starbucks website to see what they do to make a website look “new”. What I noticed is that the website stretched from edge-to-edge, with big clear images of their products and simple text, with blocks of colour to organize and separate content. Their navigation bar was also simple. I took what I observed from the Starbucks website and brought it into Illustrator, where I generated a homepage with a simple navigation, big clear photos of product, and blocks of dark blue, red and creme to organize body content. I added text, some new illustrations of products (since the ones they use now looked weird in my design) and a couple more photos, voila! I did try a couple different layouts for content but ultimately decided to stick with the horizontal edge-to-edge look.

[maddysdesignprocess]

Here’s a couple layouts I was considering but did not pursue. I also explored the shapes of the social media logos, but decided to keep them all square because the instagram logo is always a square.

[maddysdesignprocess]

Here is the second and most recent draft of my website design for Timothy’s. Some changes include the illustrations of the types of coffee under the “best sellers” section on the home page, as well as changing the images under the Keurig advertisement. The old illustrations that Timothy current uses on their website didn’t fit well with the newer design of Timothy’s, so I recreated designs to better fit the new look. I kept them simple and to the point.

As for the design of the other 3 pages, I derived inspiration from both Timothy’s and Starbucks’ websites to organize content. I decided to keep big clear images of beverages or coffee at the top of each page to warmly welcome viewers to the new pages, as well as adding colour and interest to the pages.

Also new: for the nav bar, I made the text for the page being viewed the colour red to indicate that it’s the current page. Then I added the webpage bar at the top.

Any feedback would be awesome

*this is the final