My Adventure with Domain Hosting

When I started on this badge, I was extremely excited because I had a feeling that it would be the easiest badge out of them all. But as it turned out, this badge proved to be somewhat of a challenge.

When researching hosting services, I focused on finding a service with good reviews and live, 24/7 online support. In addition, I wanted to find a service with daily backups, but I could only find monthly backups for the majority of sites. The three sites that I looked at were justHost, Dreamhost and Arvixe.

This is a screenshot of the homepage of my site.
This is a screenshot of the homepage of my site.

In the badge presentations, a few people mentioned that they had used Arvixe because of the PC mag rating and the coupon. When looking into services, I kept Arvixe in mind. At first,  I focused on justHost because Top Ten Reviews listed it as the best, but when I looked at PC mag, I found that it was simply mediocre. In the end, I decided against justHost because all of the comments on PC mag’s review were negative. justHost seemed like a scan. For Dreamhost, it was pretty much the same. So, I looked into Arvixe and it seemed to be the best bang for my buck.

After buying my domain name, I waited about an hour for Arvixe to email me and that was the first problem that began when I tried to configure my site. The real problems began with the control panel. The control panel was strange and looked like something from the early 2000s. Everything was a hot mess! Even the tutorial was useless. I understood how to upload files, but it did not explain how to make sure that your pages appeared. This was the frustrating part of the badge, but after procrastinating for about an hour, I decided to email the class mailing list and this is when I was able to figure out how Arvixe worked. It was just like with the class web server, except index.html had to be the name of the base file.

After a few hours of work and frustration, this badge DID turn out to be the easiest one! But only after I asked for help. Thanks guys! Here is the link to my “official” portfolio (I’ll fix it later).

Advertisements

Pen Tool: That time Tony Bennett and I hung out

After the badge presentations, I decided to try out the pen tool badge; I took everyone’s advice in stride, especially the advice about how you can use the second knob to create a curve. This particular advice was extremely useful for every aspect of the badge. It allowed me to adjust curves quickly and easily, while also creating a perfect silhouette. I found the entire badge to be straightforward and simple; the only problem that I encountered was the monotony of the task. Although using the pen tool was simple, having to create every little point and adjust every corner was repetitive and boring. But in the end, it was worth it because the results were better than I expected.

First off, I took the image of a ballerina and used the pen tool to outline the silhouette. For this step of the badge, I found that the article, “Become a master of the pen tool in under 30 minutes,” written by Simon Hubbert to be the most useful. His step by step list helped me to understand the basics of the pen tool and to practice these skills in a structured environment. Below, you can see the before image of the ballerina.

Before image of the ballerina
The picture of the ballerina before I used the pen tool

With the help of Hubebrt’s penguin-tutorial, I felt completely ready to outline the ballerina. The process of outlining the ballerina’s silhouette mirrored that of outlining the penguin. After using the pen tool to outline the silhouette, I created a clipping mask out of an image of a Spanish town, in order to fill in the silhouette.

This is the after-shot.
This is the after-shot.

For the last step of the badge, I chose a picture of Lady Gaga and Tony Bennett from one of their performances this year. I admire Lady Gaga and I found “becoming” her to be my favorite part of the badge.

Here is the beautiful Lady Gaga with Tony Bennett.
Here is the beautiful Lady Gaga with Tony Bennett.

After cutting out Gaga’s face, I found a picture of myself that would work and used the pen tool to cut out my own face, and pasted it in. The only problem that I had with this part was changing the color of my cut-out face to match Gaga’s neck. I couldn’t figure it out; and after trying for almost an hour, I decided to give up. So, here it is. A picture of me and Tony Bennett hanging out.

I am Gaga. Gaga is I.
I am Gaga. Gaga is I.

Reflecting on this experience, I absolutely loved turning myself into Gaga and feel extremely comfortable using the pen tool! Lastly, I learned best with the written tutorials that had steps. Video tutorials are nice because they provide a visual example for future creations. But I think that the written tutorials give the clearest instruction and advice.

Cartography: Making Technology

For the Cartography badge, I decided to map out the development and spread of the GoPro, the hottest camera on the market.

These are the cameras that GoPro offers.
These are the cameras that GoPro offers.

This White Paper is for National Geographic’s marketing team, which wants more information on the action camera, GoPro, in order to see if they can incorporate the camera into a social media campaign for the magazine.

Here is the article that I mention in my White Paper.
Here is the article that I mention in my White Paper.

In the White Paper, I suggest that National Geographic journalists can wear the GoPro, while in the field to capture real time video that can later be uploaded to the site as quick videos. With the GoPro, I believe that National Geographic can attract new readers to its articles.

Attached to this post, you can find my White Paper: white-paper-cartography

Logo for The Gypsy’s Travel

TO: SYLVIA ERICKSON, MARKETING COORDINATOR for THE GYPSY’S TRAVELS

FROM: CATHERINE CLARK, LEAD DESIGNER at SIMPLY LOGOS DESIGN

DATE: APRIL 30, 2015

SUBJECT: NEW COMPANY LOGO

Through market research and analysis, The Gypsy’s Travels came to the conclusion that the current logo is not effective in establishing brand identity on the internet. To correct this problem, you have requested a new logo design, which is now finished and will be further explained below.

Overall Process:

Beginning with background research on the company, the process focused on the company identity. As a travel blog and website that emphasizes fun, relaxation and adventure, The Gypsy’s Travels needs a logo that reflects the simplicity of its website, the movement at its core, and the personalized assistance given to clients. Above all, the logo had to be simple. As David Airey, a graphic designer, states, “you want to leave your client with just one thing” (Airey 36). Furthermore, your logo must “cross language barriers” and be immediately readable (Airey 13). For these reasons, the new logo design centers on your company’s name.

More Specifics: Color 

The new logo for The Gypsy's Travels.
The new logo for The Gypsy’s Travels.

Continuing the discussion over the logo, this memo will now focus on the new logo’s color. When designing this aspect, it was important to focus on simplicity, but also practicality. As Nigel French explains, your logo will be faxed, mailed, printed, and photocopied because of this, it is best to create a logo that translates in black and white as well as color. For this reason, the new logo has been designed in simple black ink. In addition, this color choice fits best with the existing, minimalist website design. There is room for color tweaks for different events or holidays. For now, the choice of black is simple, chic and sturdy. Just like a good suitcase, it can go with you anywhere.

Images: Arrow

In between the company’s name, there is an arrow that points to the right, i.e. forward. When one thinks of travel and adventure, many images come to mind. Planes, suitcases, palm trees, compasses, and hot air balloons are just some. But according to Airey, a logo does not necessarily have to “reveal what the company does” (Airey 25). It only has to emphasis the company’s identity. Moving forward and quickly, an arrow takes a set path, but it is always moving towards some destination. The Gypsy’s Travels works to help its clients find their own direct path to their own destination. Furthermore, the arrow on a compass always points north, the right path. Your company does the same: it leads people to the right place.

Font: The Gypsy’s Travels

This logo uses the typeface “Jellyka Saint-Andrew’s Queen.” Although the name is slightly strange, this type creates a diary feeling. Looking at the company’s name, one imagines they are looking at a letter, a postcard, or a travel journal. The handwritten script provides a personal feeling. In other words, one could easily imagine a person connected to this writing. As a company, The Gypsy’s Travels helps people find their perfect destination to relax at, or their next adventure to write home about, while also presenting company, travel blogs. Blogs are like a diary, but also, your company wants to be that personalized resource for its clients. Through The Gypsy’s Travels, they will find their next diary entry.

Thank you for choosing Simply Logos Design! It has been a pleasure working with you. If you have any further questions or concerns, please feel free to contact us.

Catherine Clark

Simply Logo Designs

Minimalist Design with Criminal Minds & Three Sisters

This project is made up of two completed, minimalist designs. The first is a poster for the television show, “Criminal Minds,” while the second is a computer desktop background based off of Chekhov’s Three Sisters. Both of these designs incorporate minimalist principles, in order to emphasize the most important aspects of the show and of the play. These minimalist principles include a focus on main elements, the use of typography, a balance of white space, the use of a simple palette and the alignment of elements.

First off, minimalist designs focus on the main elements of the webpage, the movie, the show, etc. The design subtracts everything that is not important, or that is extra, and leaves solely the pieces that have a clear purpose to the object. For instance in the “Criminal Minds” poster, the most important elements of the show were pulled in emphasized. In this case, the show’s title, and the fact that the characters analyze criminals’ behavior and thought processes in order to stop killers. To reflect these elements, the poster has a blood red background with a silhouetted man in the center –he can be anyone just like the team never knows who the real “unsub” is –but inside his head lies the show’s title and below lies a quote from one of the episodes that completely grasps the internal struggle of the characters, who constantly battle between the trouble around them and the good that they do to conquer it. Below, one can find a picture of the poster.

This image shows the "Criminal Minds" poster.
This image shows the “Criminal Minds” poster.

In addition, the Three Sisters inspired desktop background also focuses on the main elements of its inspiration: ever-moving time and the desire for Moscow. The second aspect of minimalism is typography, which acts a powerful draw to the eye and balances out the white space of the design.  The typography of both pieces emphasize and reiterate the feeling of both the play and the show. In the “Criminal Minds” poster, the typography used for the title is called “Prison Walls.” Its rough edges and harsh lines create an intense feeling of anger, hate and fear. This feeling is center in the show, whose characters try to understand these inner thoughts of criminals. With the desktop background, the font, “Notera,” used to write the quote –“To Moscow. To Moscow. To Moscow.” –is fluid, handwritten, light and feminine. In this way, the font matches what could very well be the handwriting of the sisters and appears to be taken from a diary (See below).

Pay special attention to the quote below the clock.
Pay special attention to the quote below the clock.

White space is the third principle of minimalism and the most well-known. Both of these designs use a large amount of white space to create a vast space within the design, while emphasizing the other aspects of the design and making them clearer. At the same time, the simple palette and very few colors used in both of the designs reflect minimalist principles and provide a clear path through the elements of the design.

Lastly, alignment is a key element to minimalism because it “organises and arranges [the] design” (Pallen). By using alignment, the elements of the design line up and uses only the relevant white space, allowing for the user to absorb the most important information and elements of the design. For the “Criminal Minds” poster, the red background contrasts sharply against the image of the silhouetted man the text below. On the other hand, the Three Sisters desktop background only uses a cream color and black. Simple, fresh, yet worn, these colors emphasize the clock in the center, while also uniting the design as a whole.

Minisite 3: Saul Goodman & JavaScript

For this minisite, I focused on one of my favorite tv shows, “Better Call Saul.” You can find my site through this link.  I found that this site took about as long as my previous sites; except this time, the HTML and CSS was easier to code, while the JavaScript posed most of the problems.  Like always, I had some problems with positioning in CSS. Certain elements did not want to stay in certain parts of the page, and I could not get the background image for my Analysis page to scoot over. To fix these problems, I edited my CSS until it was set the way I wanted it and I adjusted the width of the body for the Analysis page.

When it came to the JavaScript, I had some problems with linking productOne on my Legal Consultation page –or shopping page –to the user’s home-state.  I couldn’t figure out how to link it to my drop down menu. First, I thought I would have to repeat the option and list code that I used on my Registration page. But then after researching some code, I realized that I would just need to use localStorage like for everything else. Here I ran into another problem. In my original HTML for the Registration page, I had coded a value for every option in the drop down menu. For the state, New Mexico, the value was “mexico.” So after writing that the localStorage.browserUserState == “Mexico,” my code was not working. I emailed Dr. Delwiche and of course, he reminded me that Mexico was not a state. But another problem was in that code. I was calling up the function –broserUserState –rather than the actually stored variable –storedUserState. Once I fixed this, my code worked! And the rest of my site fell into place, which you can see below.

The page that gave me all the problems
The page that gave me all the problems

I had a lot of fun with this minisite, even though JavaScript gave me problems; after doing some research and debugging, I solved all of them and finished my site quickly, happily.

HTML5: Geolocation (AKA The struggle is way too real)

For my first badge, I chose to do the HTML5: Geolocation. Two things to know about this badge: 1) it involves Javascript and 2) it takes a lot of time, if you have no idea what you’re doing. After emailing Dr. Delwiche for the accompanied reading, I began my journey.

First, I watched the lynda.com Weinman video. In this video, Weinman explains how the code works, by having you type some of your own into his pre-existing worksheets. Although the video comes with worksheets for you to download, these worksheets are more like hand-outs. Weinman does not teach you how to create the code yourself. Instead, you have to read “Making your HTML Location Aware: Geolocation” by Freeman and  Robson. While I read this chapter, I was able to get a better understand of how the code works and how to create it. I followed right along and typed out my own code. But of course, I had some trouble along the way.

For this badge, I imagined that the company DGI Incorp. was tracking users’ locations. Then using the chapter, I coded three pages. The first page was simply one that shows your location. When I first typed this code, it did not work. I retyped it and still nothing. So, I emailed Dr. Delwiche, who encouraged me to look again. Upon reading my code for the fifteenth time, I realized that instead of “longitude” I had put “lonvitude.” I fixed my spelling and uploaded the newest edition. My code worked! After my celebration, I continued on my coding journey. This time I had to calculate the distance between my house and the user’s location. The finished product can be seen below:

This page shows the user's location and her distance from my house. Fancy!
This page shows the user’s location and her distance from my house. Fancy!

I ran into some problems again with this step, but that was only because I did not read the instructions fully. Excited, I rushed on to the 6th step, which asked you to use Google API to create a map. This step proved to be the most complicated and frustrating. I continued to follow the chapter from Freeman and typed up the necessary code, but when I tested my javascript in Google Chrome, nothing happened. No map. Only the distance from last time. Below is my code:

So much code...
So much code…

Let’s just say, I was a little worn out by this point. I emailed Dr. Delwiche, again. Following his suggestion, I ran multiple trouble-shooting tests. I read over my code, I used the javascript debugger for windows, and I changed a line from “OurCoords” to just “coords.” But after all that, my map never appeared. Finally, Dr. Delwiche suggested that I adjust the CSS for my map. First, I changed the border of my map to have a width of 500px, but that didn’t work. So then, I changed it to have a height and width of 400px. Also following Dr. Delwiche’s advice, I opened up my file locally through IE (Apparently, chrome won’t let you open up a location tracker locally). And it worked!

My map finally appearing in Chrome!
My map finally appearing in Chrome!

I quickly uploaded my files and tested them on the server through Chrome…my map appeared! I cried tears of happiness. After three days, my badge was finished.