Online Brochure Homepage

The online brochure homepage was interesting. Why am I saying that? Because I never designed a web page mock up before in Photoshop nor did I know I could transform the Nicaraga brochure into a virtual representation of it. Top picture is the final version and the one below that was a rough copy. I posted both so you could see the full transformation.

My partner (Jacqueline Popoloski) and I used some of the pictures from the brochure with the addition of a map, and added colorful gradients in the background to make it enticing to the viewer but not too distracting. We kept font consistent and made the size appropriate according to its importance and place. The pictures were each indivually stroked to stand out. The top titles and bottom bar of links to click were given a gray font and a "|" divider. We looked at a plethora of other websites to come to a consensus of what titles to use on top and bottom while thinking of it in relationship to the brochure. Anyways, I think it's a decent website homepage that isn't cluttered or ugly that properly represents our brochure.

Quark bind in/blow Card (Color + Bar side)

I had the option of doing the Bar side in Quark or Adobe Indesign, I picked Quark for a change and I thought Quark had better manipulation with shapes than Indesign. In the end it was fine but I think Indesign would be easily because Quark had a terrible grid system which made placing and alignment of bar codes etc. difficult. Also the shape manipulation was the exact same if not worse than Indesign plus Quark crashed on me a total of two times which Indesign hasn't yet with me.

So after making the right size box 6 in by 4 in, I used text content tool to make boxes for text. And picture content tool to add in images like the recycling one > file import, click picture than re-size by playing with the box. Again measurements and general good judgment was a must. And as always trying to nail the fonts and their sizes were a trial and error process. Most of the font was Arial, and Cambria.

To stroke boxes, I clicked the box > frame > changed the point of the width of the box. That came in handy for making the bar codes. At first I had no clue how to do a bar with that thickness. I found the line tool and made lines with the correct measurement/placement but they still weren't thick enough. So eventually I clicked them > frame > changed width to 2 pt for the vertical bars on the top and 4 pts for the horizontal thicker bars. For the little bars on the bottom I got creative and used "|" on the keyboard, so 12 pt font for the bigger lines and 8 pt for the smaller line and than I just copied and pasted it to make the correct pattern and it looked perfect.

The bar side of the bind-in card was definitely simple compared to the other side of the card, but it still took careful precision and playing around, especially with Quark a program I'm even less familiar with than In Design. In the end, it looks very similar to the actual card, but I still believe Adobe Indesign is a better program. Sorry Quark but if your going to crash on me you will remain on my bad list!

The color side of the Bind-In Card in Quark followed the exact same steps as InDesign. It was easier and faster because I wrote down all the fonts I used and measurements. So, it mainly was inserting the data back in and adapting my skills towards a different program which is similar to the Adobe one. Please read the rationale for the Indesign one, the main characteristics that were different was the use of the picture and text content tools. However, I still do believe Indesign is a better program because it did not crash on me, while Quark did at least once on both sides of the bind in card. Quark also looks more simpler as shown by the small tool bar compared to Indesign but instead it's more of a pain. There is no easy access font bar in quark and the line tool does not automatically straighten the lines, stroking a picture is also harder (under frame instead of stroke). All in all, Indesign was easier and had more tools that were more user-friendly.

Indesign Bind-in card

So, the Bind-in Card (non bar side) made In-Design was fun, and I learned a lot (even impressed myself) but it was definitely time consuming.

I spent hours and hours. How come? Well for starters, figuring out the fonts and their size was a complete trial and error process which took time due to the plethora to choose from. Exact measurements were a must. I needed to use a ruler to measure every dimension of the actual bind in card and than I needed to insert the data or use the ruler tool to match the exact measurement. I also didn't know Adobe In Design that well so finding the right tool, and short cuts, and/or ways to do certain procedures was a learning process (now I feel very familiar with the program).

The procedure: Made new document > no border > Selected area with rectangle frame tool and inserted corresponding measurements to make the right size. To fill the box with color I would select area > fill tool (x) > pick color. To insert an image/picture I Would go to rectangle frame tool > place > image. I would use the text box tool to make text boxes and than I was able to write inside of them in my selected location. And I used the line tool to make the black line go down the bind in card. Font: Orangecoast - strayhorn mt std 25 pt, sub font below Orangecoast: copperplate light. I would use the free transform tool to tweak the size, spacing and dimensions of the font by scaling the x or y %. "If you love orange" Abadimt condensed light. To make the check mark boxes I used Linotype warning Pi - letter 'Y'. Used Granjon Lt STD for the $ sign. The rest of the fonts were Inaimathi and Helevetica with Arial for the "Please print and smaller fonts." For the lines I did _____ repeating on the keyboard and for the red box I made a text box > stroke > red.

Overall, I'm very proud, at first I looked at the bind-in card and I felt extremely overwhelmed. I had no clue how to use In-design before let alone replicate the card. But in the end it's almost exactly the same looking - an achievement for me.

Nicaragua Brochure

The brochure took a while in Adobe Indesign but the great part about it is that we are actually going to use it. So my partner (Jacqueline Popoloski) and I went to Nicaragua a summer ago through Friends for Students for 60,000, for seven days. It was a life changing adventure. So why make the brochure on it? Because we are planning another trip with the organization to go back. The brochure will help us convince our friends and/or parents for them to go.

The Brochure speaks to people we are trying to recruit by answering their main questions based on information we acquired or learned from our previous trip there. So it's not generic material from any non government organization (NGO) to get people to go, instead it's based on an experience from a reliable source - a friend. A typical trip itinerary was provided with most of the events mentioned being what we did on our previous trip. A few paragraphs on the organization and reasons why you should volunteer that my partner and I quickly brainstormed together. The other page is basically contact information, so they know how to ask additional questions to the main planner of the organization and reasons why to donate. Donations/grants are the main way we raise money to build homes/provide aid to those in need in Nicaragua. All the information is neatly listed with bullets instead of being cramped, over whelming and cluttered.

And to top it all off, pictures and a color scheme/layout was made that was aesthetically pleasing only enhancing the seriousness and the interest of the brochure. We used a brown gradient and green top for the title with black font to make a South American -Nicaraguan feel. The title content used a futura std light and the content was just a futura font. The pictures used were taken from our previous trip and were stroked to make them stand out. They were inserted using placing and precise measurements to make them aligned perfectly. For the picture on the bottom of Friends of Students for 60,000 we used text wrap to make the font go around the picture with enough space. And for contact information under the first picture we inserted the Nicaraguan flag > made it vertical > change the opacity, so the font was legible.

Furthermore, Setting up the panels required use of the rectangle frame tool and perfect measurements. It mainly was a trial and error process of placing and sizing with the text boxes and insertion of the pictures. A separate box was made for the titles and than a text box individually for each. Again, a lot of trial and error with picking the fonts, sizing them, bullets, kerning and spacing, free transform tool, text wrap and even stroking and placing the pictures. We are definitely proud of including all the information we deemed necessary while making it look eye rewarding. It will help us a lot with future recruitment of the Nicaragua trip which we and the organization are grateful for. If given more time, we would give it to the people interested in the trip and get their critiques and than tweak the brochure accordingly.

Embedded Video using Webng (Soundslides)