Final Design Project – Creating an iPhone Application.
Introduction
For the last design project of the semester, we were asked to design an application. At first, I was terrified, but as I started sketching some ideas and browsing the various apps I use on a daily basis – I had some inspiration and motivation to begin.
I decided to create an application for the student newspaper at the University of Miami. The Miami Hurricane has yet to have a smart phone or tablet application and I feel this would really benefit students on campus. With the newspaper industry now moving towards the online sector as well, I feel this would really push our student publication to another level.
I made a very easy to use application. It’s basic, but fun and has the ability to personalize articles. You can “star” your favorite articles, “checkmark” the articles you want to bookmark and Tweet or Facebook (or both) the articles you would like to share.
The Home page is constantly being updated with breaking news that is going on during school and after school. It is also very easy to access The Miami Hurricane’s Twitter account and Facebook through the Home page. If you’re trying to look for something on the Hurricane and can’t seem to find it, there is a convenient search bar.
The rest of the application is pretty self-explanatory – for the sections page I created fun icons that when ‘clicked’ (with your finger) will take you to the section of your choice. I have provided a screen shot of what the interaction would look like as well.
The logo was by far the most challenging because of the limited amount of space. However, I was amazed to see what can be done with such little space. I decided to incorporate a newspaper feel by writing some ‘newsy words’ as the backdrop for the icon. Then I came up with the idea to have a Hurricane symbol with the word Miami – perfect for the paper’s name: The Miami Hurricane. I incorporated the UM colors (orange & green) and added some opacity to the words so that they would add the touch I wanted, but not take away from my overall design.
I hope you enjoy.
(:
Screenshots
Application Logo (This link will take you to the PDF version of my logo so you can see it better).
The links below will take you to the PDF version of my screenshots:
Screen Shot One with colored in
References:
Infographic Project.
For this project, we were given an article on the No Child Left Behind Act and asked to create our own infographic. The article was filled with details and statistics that allowed me to delve in deeper and find something that really caught my eye.
From the get go, I knew I wanted to compare and contrast what George Bush did with the NCLB Act while in office as opposed to what Barack Obama has done with the NCLB Act while in office. I reviewed more articles for this information.
I chose this topic because I feel it is very original and relevant. I decided to find two pictures of former President Bush and President Obama where they are facing each other to give a controversial or argumentative effect. I wanted to stand them on books because when I think of schools and the NCLB Act, I think of school books.
To add creativity, I decided to add words on the books that were relevant to the school system and the No Child Left Behind Act. I feel it is eye catching and adds a dynamic effect. Color wise, I feel my colors contrast well. I wanted these tones because they look the “dulled down” version of primary colors so it still gives the school effect, but adds seriousness to the graphic – which I like.
Last, but not least, I chose to make my infographic interactive because I was inspired by a graphic that our professor showed us in class, found in the New York Times. Interactive designs are always eye catching and interesting. This would obviously be an infographic found on the web.
As you click through the icons on my graphic, it pops up with two speech bubbles on each side that give a detail about what each President did according to the icon. I have a checkmark, money symbol, balance scale, interstate icon and graduation cap for my icons. As you click through each icon, it changes from black to red.
For fonts, I decided to go with a typewriter looking font [Veteran Typewriter] and a handwritten looking font [Note This]. I feel it fits my theme well and is eye appealing.
I hope you enjoy.
Sources:
http://www.edweek.org/ew/issues/adequate-yearly-progress/
http://www.edweek.org/media/diplomascount2011_pressrelease.pdf
http://voices.yahoo.com/administrative-policies-no-child-left-behind-347524.html?cat=75
http://www.washingtonpost.com/wp-dyn/content/article/2010/01/26/AR2010012604586.html
http://globalgrind.com/news/barack-obama-sr-classified-anti-american-us-britain-documents-details
http://politicalref.com/Archives/2007/December/12-4-07.html
http://www.vectorstock.com/royalty-free-vector/stack-of-books-vector-499968
http://www.usatoday.com/USCP/PNI/Nation/World/2012-02-10-APUSNoChildLeftBehind_ST_U.htm
http://www.education.com/magazine/article/Obama_Child_Left_Behind/
http://www.wrightslaw.com/news/2002/nclb.sign.htm
http://www.usatoday.com/news/education/2007-01-07-no-child_x.htm
http://www.washingtonpost.com/wp-dyn/content/article/2009/01/08/AR2009010803484.html
Magazine Layout Project.
For this project, our professor assigned us to pick any topic that we were passionate about and design a magazine layout using our own photos and creativity to design the four-page spread.
Many ideas flew through my mind at first, but as I started thinking about what really intrigued me I decided to photograph/write about the Everglades and add a twist. My magazine focuses on the Everglades and the story is about what Miami once was – which was the Everglades. I came up with the title, “Coming back to our roots,” because I thought it fit well.
I took about 336 pictures when I visited the Everglades so at first it was difficult to get down to the nitty gritty and pick a handful of them. I did all the editing in Photoshop before placing them in the layout which was created in InDesign. I was inspired by Time magazine’s layouts so I created my layout on the basis of that inspiration. I decided to use photos that were extremely detailed; encompassing focus, color, layering, reflection and more.
My first two pages are a spread where I used my favorite photograph and expanded it to cover two pages. I also placed the title and lead of my story here. I chose to place the typography on the right hand side so it would lead readers straight in to the rest of the story (when they turn the page) located on pages three and four.
Page three shows a picture of alligator beach and it tells the story of, “Coming back to our roots.” It also has a text box with a random fact, which I thought was a good attention grabber. Page four has two more pictures showing the forest aspect of the Everglades along with a close up of one of the birds the Everglades habitats. I loved that photo because I was able to get an amazing angle and shot right when the bird opened its wings to dry them out from the water. It was truly a ‘picture perfect’ moment. I ended with a little poem-typre blurb I came up with at the end of my layout just to add the finishing touch.
Throughout the layout I used contrast, repetition, alignment and proximity – the four basics of design. I decided to keep my fonts and colors consistent and made sure each place had a purpose, which is where proximity and alignment come into play. I hope you enjoy.
I have come to realize how much I enjoy photography and designing layouts – if not for a future career, just for fun. This project taught me a lot about colors, angles, the use of fonts, design in general, and has been my favorite project of the semester so far.
As stated previously, each one of these photos was photographed and edited by me. I also created the layout and wrote the story. (:
SIDE NOTE: The only website I must credit is http://www.fontsquirrel.com for showing me one of my new favorite fonts: ChunkFive. Baskerville, the other font I used, was already in InDesign.
Website Design Plan.
Introduction.
For this project, I was able to tap into my creative side and design a web layout for a University of Miami club or organization on campus. There are over 100 clubs/organizations to choose from, but I decided to go with the Random Acts of Kindness club because it matched my personality and creativity well. The minute I read up on this organization I immediately thought to myself, “Wow, I can use a scrapbook feel for the layout!” That is exactly what I did.
My previous designs have been very symmetrical so I decided to play around more with fonts, features, textures, color, images and shapes. I have designed five website pages: Home page, About Us page, Photo Gallery page, Contact Us page & another page showing an interactive element the photo gallery would have.
Design.
I wanted to create a very simple and easy to follow layout. Since my idea was initially a scrapbook type design, I decided to incorporate the cork board, thumbtacks, borders, picture placeholders, vibrant colors and tabs for the navigating links. I also used the heart outlines to incorporate the main idea of the club, kindness.
For the home page, I wanted the club logo to stand out because I feel it gives people a very clear sense of what the club is all about – a heart and hands, meaning, kindness and helping others. I also created the ribbon effect in the background of the logo because I wanted to incorporate the scrapbook feel and most scrapbooks do emphasize pictures and titles with ribbon accents. I chose the dramatic and unique place holders to add an effect because I feel they are creative enough to draw people in, but not too distracting… just the right touch I was looking for.
The second page, About us, has the post-its and cork board displaying a little blurb and meeting session information for the club. I wanted the page to be fun and simple, so I felt the post-its thumbtacked diagonally did the trick. I didn’t want to place two thumbtacks on each post-it and center them because I felt that wouldn’t give it the real effect of a cork board. Most people don’t meticulously place post-its in perfect symmetry with the thumbtacks mirroring one another. I decided to add the hearts to this page to re-emphasize the logo – always reminding people that this club is about kindness. The heart outlines also added a ‘scrapbooky’ feel, which is what I wanted as a designer.
The Gallery page [& second gallery page that shows the interaction] also has the cork board design, but I didn’t want to add the thumbtacks because I felt it would be too busy. My idea here was to make the pictures look as sticker thumbnails so when a person hovers over them, each picture fades but the one they are clicked on enlarges with picture place holders [repetition from the home page] and a slight drop shadow. To me, this looks very modern and dynamic. [& goes well with my scrapbook theme.]
The Contact Us page is very cool because it allows the club to receive feedback. Many websites are incorporating this system now and I feel [as a consumer] that it is very effective. People visiting the site can leave their name, email, phone number and a message if they would like to be contacted by a staff member. They also have the opportunity to follow the organization via Facebook, Twitter, Tumblr and Instagram.
Since the About Us page has the information for meetings, I didn’t feel that repeating the information was necessary. I played with the icons because I wanted them to be different. I kept them within my color scheme and incorporated a water color texture effect. I could have easily gotten the social media fonts that many websites use, but I wanted to design them myself using the original icons as inspiration and just reproducing them with different colors and texture.
*** Each page has the University of Miami logo on the bottom right corner so people are aware of what organization the Random Acts of Kindness club is associated and affiliated with. All pages also keep the same color scheme so the contract and theme is constant!
Interactive Elements.
Besides the interactive page that goes with the Photo Gallery, there are other interactive elements to this design. As you navigate using the tab links at the top, the font color changes from teal to white. I showed this with each page design. In the Home page, the viewer will be able to click on the logo which will take them to a video of a message from the President of the Random Acts of Kindness Club. It will also show different reasons why you should join with personal statements from others who have been touched and impacted by the club. The post-its on the About Us page will enlarge and the text will become bold as the viewer hovers over each one. The thumbtacks will also twirl to give the effect of someone putting the message on the cork board as an important reminder of something they can’t forget to do. [know what the club is about and being on time to the meetings.] The Gallery page already shows the interactive elements that would take place when someone hovers over an image, but it would also have a little audio describing what each picture is showing. [an audio photo caption.] I kept the Contact Us page simple, but when you click on the submit button after you leave your message or questions and contact information, it will take you to a page filled with kindness quotes so you can get that final positive impression. The quotes do a good job in tying in the design scrapbook theme and overall essence of the Random Acts of Kindness club.
Resources.
For this project I used the following websites to retrieve some graphics:
– http://www.facebook.com/UMiami-Random-Acts-of-Kindness/232761833430686
Enjoy!
Interactive UM Booklet.
Hello world.
Welcome to my second design – an interactive booklet made for the School of Communication at the University of Miami. This design was created in Adobe InDesign and I decided to create a clean and cohesive design that would appeal to a prospective student planning to attend the U.
As a current School of Communication student, I never received a booklet before making my final decision. I did my own research, went online and conducted my own research and visited campus. Honestly, I would have much rather preferred a visual component incorporating all of the “need to knows” about the program.
For this reason, I highlighted the key points. For my title page, I decided to use the School of Communication (SoC) logo and UM colors.
I also chose to use a gradient feather because I wanted a creative look, but wanted to keep it simple and elegant.
The second page goes on to talk about the school and Journalism program tracks students can choose from. I feel that students should know the basics about our school because it gives a sense of what the SoC is all about in a nutshell. I created a dash stroke over my Princeton font to give my pages a little creativity and fun vibe. This way students get the feeling that the Journalism Program is competitive, but friendly and innovating. On this page, if you click on the first picture it will take you to a YouTube Video that gives a video element to what the school and program is about.This way, prospective students can hear from currentstudents and alumni and take a ‘virtual tour’ of our building! When you hover over and click on the
journalism program tracks, it will take you to a page that shows all the required courses for the specific major. This way, students get a better feel on what they should be preparing for and start planning ahead. Look toward the future.
The third page gets a little more creative and gives a description of the second required courses ALL journalism majors need to take, regardless of the track they decide on. This is important because those are CORE classes – these classes show prospective students what our SoC focuses on as fundamentals any journalist needs – whether it be print, broadcast, magazine or multimedia. Then, you have our student publications to take a look at.Extracurriculars are extremely important and I feel that prospective students should be planning to get involved, not just take classes
and go back to their dorm, apartment or home.
The pictures on the left showing pictures of the main student publications for journalism majors (Yearbook, Newspaper & Magazine) also have an interactive element. When you hover over and click each image, it will pop up, and take you to each of these different publication websites. For each website: The Miami Hurricane, Ibis Yearbook & Distraction; students can print out an application, contact the editors and get a little more info about the organization.
The last page is very simple. I included the UM SoC logo and contact information for the school including P.O. Box, telephone number, fax, etc. This allows prospective students or parents to put a voice behind the interactive booklet, schedule a campus visit and more.
I hope you enjoy (:
Feel free to leave feedback.
SIDE NOTE: A few of this images and some of this text was taken directly from the school of communication and University of Miami website . These websites are: http://www.miami.edu and http://www.com.miami.edu.
Interactive Timeline Design.
Welcome to my Interactive Timeline design! I decided to create my timeline based on the history of the infamous Watergate Scandal; an event that will mark history for centuries to come. The interactive design I created was simple and clean in order to appeal visually to individuals of all ages, while adding an interactive effect that was unique.
I was inspired to create the background of my timeline using a panoramic shot of the Watergate building and incorporating a film strip on the bottom with thumbnails that highlight the main points of this historical event.My design is colorful with dramatic effects to draw attention to the overall layout, while pin-pointing certain key points through graphics.
The interaction of the timeline occurs when the individual hovers over a thumbnail on the film strip. When the mouse is placed over each thumbnail, the graphic will disappear and a title will appear in the black box representing what the photo is about. Next to the text, the thumbnail that was in the film strip will pop-out as a larger image to the left of the text. Once the individual hovers over another thumbnail, the graphic that previously ‘disappeared,’ will reappear on the film strip.
For example, when you hover over the tape graphic with the mouse, the graphic fades and the words “The Tapes” appear followed by a large pop-up image of the graphic with accompanying text describing the event. The same goes for the other screenshot I provided with “Nixon Resigns,” which has the same hover over effect that I explained.
This design allows for interaction in a simple, yet visually appealing manner, which is exactly what I was going for. I wanted a clean, colorful, dynamic design that provided pop out graphics and a brief overview so the reader can understand the historical event while enjoying the design as a whole.
Being my first project in Photoshop, I am very pleased with the overall look of my interactive timeline, color scheme, graphics and effects used throughout the design. Incorporated in this timeline were the basic rules of design: Contrast, Repetition, Alignment and Proximity – with a dash of my own creativity to make this design original and different.
* SIDE NOTE: ALL MY IMAGES WERE EXTRACTED FROM WWW.GOOGLE.COM, WWW.MBOUFFANT.BLOGSPOT.COM, WWW.PLANETEYE.COM, WWW.AUTHENTICHISTORY.COM, & WWW.HISTORYCOMMONS.ORG.
THE EFFECTS WERE MY OWN.
Enjoy!
Photoshop Tutorials.
I have officially started learning how to use the “layering” effect on Photoshop using lynda.com. This website provides excellent tutorials for so many software programs – I’m impressed. I have only done one tutorial so far and I am excited to try it out when we begin testing out the program in design class.
Elizabeth de Armas 