Author Archives: kfalcone93

Minimalist Design: From Frozen to The Walking Dead

“Minimalism is achieved by reducing a design to only the most essential elements.” -Cameron Chapman

Today, minimalism is one of the most popular design principles used in the web design world. It is grasped by super-companies like Apple, creating a highly recognizable, simple branding. The minimalist designs used to design this desktop wallpaper and movie poster utilized many key principles of the design aspect. The key principle used was “less is more.” In both the desktop wallpaper and the movie cover, only the most essential elements were included while all extraneous design was removed.

Minimalist movie poster for Disney's Frozen.

Minimalist movie poster for Disney’s Frozen.

As for the movie poster, a 300 x 400 pixel canvas was used to imitate an actual movie poster, according to IMDb. Olaf was specifically used because he is easily recognizable and often the audience’s favorite character. Originally the movie poster had included all of Olaf’s coal buttons, his shading, and his eyes. After “subtracting until it breaks” as Cameron Chapman suggests in his article Principles of Minimalist Web Design, these elements were considered extraneous and were removed. Additionally, when designing this movie poster, the actual logo was included because it provided easy identification with the movie. It would have been preferred to have a two-dimensional logo without the different coloring within the words to match with the rest of the poster’s two-dimensional nature. The 2D approach was used to emulate identifiable traits of Olaf without over-complicating the design elements. Originally, the quote “From the creators of ‘Tangled’ and ‘Wreck It Ralph'” was included at the top to make it look more like a movie poster. It was removed because it looked like it should have been Olaf’s eyes and it detracted from the minimalism of the design. When designing minimalistically, it is also suggested by numerous authors that color is also limited. In this movie poster, shading was used immensely for the teeth, mouth, and carrot. This way, the design emulated Olaf’s face while only utilizing a handful of colors. In addition, white space was obviously utilized, doubling as the snow of his body. The pen tool came in handy while designing this poster but creating the carrot nose proved to be a challenging task. Even now, it is still very difficult to merely freehand these shapes.

Desktop wallpaper using The Walking Dead theme.

Desktop wallpaper using The Walking Dead theme.

As for the desktop wallpaper, a 2560 x 1600 pixel canvas was utilized as suggested by Graphic River. The Walking Dead was used because not only is it an extremely popular show, it is fun to create eerie designs with. This design is based on the three questions asked by Rick’s group. How many walkers have you killed? How many people have you killed? Why did you do it? He asks these questions to any possible new people in the group in an interrogation-like fashion before they are trusted or permitted to join. The goal of this poster was to create an eerie feel, with obvious references to the AMC show. First, a black background was chosen to give the eeriness. Then, the Photoshop light source tool was used to create an interrogation lamp where the actual lamp was taken from online. The rickety old chair was placed at the center of the lighting to emulate an interrogation room. Then, the three questions were transformed around the “room” showing how these questions surround the group’s premise of allowing newcomers in. “Why’d you do it?” was included at the very bottom in a much larger font to emphasize the fact that this is the most important question asked and that it ultimately tells the newcomers’ intentions. A chalky-looking font, called Angry Chalk, was used to again make it eerie and realistic in the apocalypse time. A ton of negative space was used to draw the focus to the center where the chair sits.

Overall, it was very difficult to choose what were important aspects for the themes and what weren’t. It was also very difficult to choose what aspect of the show or movie to accentuate. For instance, it would have been neat to include something with Rick’s sheriff hat but it didn’t seem to fit. As for the Frozen design, it was difficult to choose between Elsa’s hair and Olaf’s face. It was a much more challenging experience than originally expected and subtracting design elements is not as easy as it looks!

Wearable Technology: Smartwatches

White Paper on Smart Watches

Kelsey Falcone

1413 Main Ave.

San Antonio, TX 78247

Phone: (210)333-4444

Email: kfalcone@trinity.edu

Introduction

Wearable technology is becoming widespread and almost universal. As much of America pushes toward healthier and more sustainable lifestyles, smart watches that track steps, heart rate, sleep, exercise, and much more are developing quickly. Even President Obama is buying into this technology which tracks his sleep, heart rate, and even location.[1] The rapidly expanding market, now including the average American, may allow for aggregate data being collected by millions to be used in evaluating the American diet, exercise regimens, and overall health. This data may even be used by officials to make informed decisions on where to place public parks, how to address cardiac health, and even recognizing contaminated public waterways.[2] Needless to say, this technology is endless and proves to be an excellent, yet competitive, market to break into.

Background

As aforementioned, this technology is extremely widespread already and is only growing. Smart watches have been the next best thing since 1984, when the Seiko Pulsar was released.[3] The first watch was primitive and ambitious, mainly due to connectivity problems being that Bluetooth and wireless connectivity were a decade away. The 1990 Seiko Receptor introduced a wireless connection to the rest of the world as it doubled as a pager.[4] The 1998 Seiko Reputer was more of a computer than a watch, sporting a 16-bit processor and 128 kb of RAM.[5] Seiko provided the world’s first look into wearable technology, and it wasn’t until the early twenty-first century before other big players, such as Sony and Microsoft, entered into the market. Once these large, super-companies entered the market, the technology advanced rapidly, rocketing forward into next decade advancements. The development of smartphones have allowed immense growth in the smartwatch field, encouraging watch-phone pairing and an easy way to record and track data.

Current Market

smartwatch

Market sharing for smartwatch industry 2013, led by Samsung.

The current market includes people from all over, from all economic backgrounds. Smart watches are blurring with fitness bands, becoming one in the same and incorporating similar audiences. In a full wearables report by Business Insiders Intelligence, global wearables are expected to grow at a compound annual rate of 35% over the next five years, reaching 148 million units shipped annually in 2019.[6] It’s estimated that smartwatch shipments will rise by a compound annual rate of 41% over the next five years. Smartwatches will account for 59% of total wearable device shipments this year, and that share will expand to just over 70% of shipments by 2019.[7] Forty companies launched smartwatches in 2013, with the top 10 companies making up 82% of the market share.[8] This being said, the US and China combined make up just over 50% of smartwatch manufacturing.

The average smartwatch sold in 2013 cost $225 USD and 90% of these are companion devices, meaning they need the user’s smartwatch to connect to the internet.[9] Bluetooth Low Energy (BLE) has made the race, making other protocols like ANT, NFC, WiFi, or ZigBee obsolete.[10] Going forward, it is expected that Apple and Samsung will dominate the market, with Google also making large contributions.[11]

Big Contributors

The top five smartwatches that dominated the market in 2013 were led by the Samsung Galaxy Gear, with it dominating just over 33% of the total market share. The other players include the Nike Fuelband, Garmin Forerunner, Fitbit Force, and the Sony SmartWatch.[12] The 2014 list can be found in the graph below.

chartoftheday_3290_Samsung_Leads_The_Smartwatch_Market_n

Smartwatch market 2014. Led by Samsung, Pebble, and Fitbit.

While these represent sales, many smartwatch enthusiasts have their own lists of the top five best smartwatches. The top five best smartwatches of 2015, according to Tech Radar magazine, from number five to number one, include the Asus Zenwatch, Moto 360, Sony Smartwatch 3, LG G Watch R, and of course, the Apple Watch.[13] Tom’s Guide, on the other hand, rates them by usage, also giving the best smartwatch overall to the Apple Watch. The best smartwatch for the money is the Pebble, the best Android wear watch was the LG G Watch R, the best design went to the Moto 360, and the best smartwatch with voice was awarded to Samsung Gear 2.[14] Warable released its own list of bests of 2015 but all of these watches average $278 USD, a price well over the average American’s budget. Because of this, fitness trackers are dominating the market, making up 50% of overall smartwatch sales in 2014.[15] Overall, it appears that most believe that the Apple Watch will be the most dominate player currently on the market. This being said, there are obviously many more aspects that buyers take into consideration before purchasing their smartwatch. Fitness bands, such as the Fitbit, Nike Fuelband, and the Jawbone might make a more dominant stance in the years to come.

Conclusion

Overall, the smartwatch market has taken off and expanded out of a niche audience to include the average American. Although many of these watches are still extraordinarily expensive, averaging over $250 USD, the competitive market and plethora of choices are driving the price down. The fitness trackers are breaking into the smartwatch market and they are starting to merge together as shown by the Microsoft Band. This technology has advanced immensely, starting from a 128 kb device to current 512 Mb devices.[16] It would be an excellent market to break into, especially if the smartwatch produced combines fitness with other smartwatch capabilities and doesn’t cost an overly absurd amount.

For the full report, see the following link.

White Paper on Smart Watches

[1] Written Ariana Eunjung Cha. “Amid the Flood of Wearable Devices, a Movement to Quantify Lifestyles Is Evolving into Big Business.” Washington Post. The Washington Post, n.d. Web. 11 May 2015.

[2] Ariana Eunjung Cha, n.d.

[3] “Before Apple Watch: The Timely History of the Smartwatch.” TechRadar. N.p., n.d. Web. 11 May 2015.

[4] “Before Apple Watch: The Timely History of the Smartwatch,” n.d.

[5] “Before Apple Watch: The Timely History of the Smartwatch,” n.d.

[6] Danova, Tony. “THE WEARABLES REPORT: Growth Trends, Consumer Attitudes, and Why Smartwatches Will Dominate.” Business Insider. Business Insider, Inc, 20 Apr. 2015. Web. 11 May 2015.

[7] Danova, Tony, 2015.

[8] “Overview of the Smartwatch Industry – Smartwatch Group.” Smartwatch Group RSS 092. Smartwatch Group, n.d. Web. 11 May 2015.

[9] “Overview of the Smartwatch Industry – Smartwatch Group.” n.d.

[10] “Overview of the Smartwatch Industry – Smartwatch Group.” n.d.

[11] “Smartwatches Market Analysis And Segment Forecasts To 2020.” Global. N.p., n.d. Web. 11 May 2015.

[12] “Top 10 Smartwatch Companies 2013 (Sales) – Smartwatch Group.”Smartwatch Group RSS 092. N.p., n.d. Web. 11 May 2015.

[13] “Best Smartwatch 2015: What’s the Best Wearable Tech for You?”TechRadar. N.p., n.d. Web. 11 May 2015.

[14] “Best Smartwatches 2015 – Best Smartwatches 2014 – Tom’s Guide.” Tom’s Guide. N.p., 30 Apr. 2015. Web. 11 May 2015.

[15] “Best Smartwatch 2015: Apple, Pebble, Samsung, Sony, LG and More.”Wareable. N.p., n.d. Web. 11 May 2015.

[16] “2014 Smartwatch Comparison Guide.” 2014 Smartwatch Comparison Guide. N.p., n.d. Web. 11 May 2015.

Designing a Logo: A delicate balance between appearance and applicability

The following is a hypothetical memo written to the same client in which the wireframes were created for.

TO: Ben Lytle Photography

FROM: Kelsey Falcone, Logo Designer

SUBJECT: Logo Design and Rationale for Ben Lytle Photography

Designing a logo plays with a delicate balance between appearance and applicability. It is beyond useful, and even critical, in the business of photography. Although your pictures will sign the clients, the logo is critical in attracting them to you in the first place. Here, we briefly explain the rationale behind the logo creation and its applicability to you and your business. We have included 4 different logos for you to choose from, each of which we think fits your ultimate goal.

In this logo, we have combined the suggestions of several experts in order to create the logos that best fit you and your company. Research suggests that a good logo is simple, memorable, timeless, versatile, and appropriate. I will discuss the rationale of these logo options keeping the context of these five suggestions in mind.

DESIGNING THE LOGOS

All logos used simplistic, beautiful fonts. We made sure that these fonts accentuate your artistic style while not coming across overly feminine. The fonts used were “Early Bird” and “A Day Without Sun.” Only two fonts were used because adding more would create unnecessary clutter, a problem commonly found in the logo-design world. Additionally, all of these logos utilize white space and a minimalistic, black-and-white design. The black and white will make your logo timeless as it doesn’t fall into the trendy color trap many photography logos do. Another important aspect of these logos is the fact that each are able to be scaled, allowing you resize your logo based on your needs (watermarks, website, business cards, etc.) without it becoming pixelated.

Option 1

Logo Option 1

Logo Option 1

Logo option 1, shown on the right, is beautiful in style and very simplistic. Additionally, it is extraordinarily versatile. Versatility is key to logos in photography because many times, they may also double as watermarks. The camera makes it easily recognizable and allows the audience to quickly understand the purpose of your business at first glance. This is our favorite logo because it is the most memorable and represents your artistic talent. Our least favorite aspect about this logo is the fact that the “Ben Lytle” is less noticeable than “photography” but we think that the difference in

Option 2

Logo Option 2

Logo Option 2

Logo option 2 meshes simplicity with an aspect of uniqueness. The offset, stackable nature of this design gives a beautiful layering effect without cluttering it. The loopy-ness of the Early Bird font gives a beautiful space for the photography to fit into. The underline accentuates the artistic nature of your business. Our favorite part of this design is the uniqueness and accentuation of your name. The least favorite aspect of this design is to size of “photography.”

Option 3

Logo Option 3

Logo Option 3

In logo option 3, simplicity is key. It gives opportunity for a  beautiful watermark for you photos while also giving an option to make effective business cards utilizing white space to show your artistic side. The fonts were switched, this time with “Ben Lytle” in big, blocky letters. This draws the audience’s attention to your name right away, while the photography intertwines within its letters. We think the simplicity of this logo is both a plus and a minus. It provides beauty and versatility for all your needs but the simplicity may also take away from the recognizable design.

Option 4

Logo Option 4

Logo Option 4

Finally, option 4 is the exact same as option 3 with the use of the decorative addition seen in option 2. We love that this addition makes this logo design unique and easily recognizable while still maintaining the simplicity and versatility seen in option 3. We find this option especially beautiful and applicable to your business, but it may have a slightly feminine undertone. This being said, we think it also presents an artistic side to your business represented in an easily recognizable logo.

Overall, we think all of these logos would fit great with the goals of your business and with the photography business as a whole. Please choose your favorite logo and we can discuss any suggestions you may have when we meet for lunch on May 15 at 12:30p. I look forward to hearing your thoughts!

HostGator and My Portfolio

After completing this site, I realized just how complex and confusing this area can be. Ultimately, I went with HostGator because, according to TopTenReviews, this service gave the most for the least money. It provides unlimited bandwidth and storage and comes with Spam Assassin, insuring that junk mail won’t take over my mailboxes. As a side-by-side comparison, HostGator ranked number 6 but was the cheapest, at $3.96/month for several domain names. According to TopTenReviews, the hosting site was also supposed to be easy to understand and navigate through, no matter your experience. Because of this, the price, and the unlimited bandwidth with a 99.9% uptime guarantee, I started a 12-month membership to begin learning how to use the site.

I spent about 2 or 3 hours with the site, checking out the control panel and how to connect to Filezilla. Unfortunately, I had an extraordinarily difficult time linking my domain to Filezilla. Because of this, I gave up on connecting to an FTP software and attempted to use the control panel, called c-panel in HostGator, to upload my files. This turned out to be even more confusing as the c-panel has limited tutorials or instructions and is convoluted with redundant buttons and links. Also, it gives threats about deleting certain things and messing up the whole site when in reality, it’s not true. I found it very poorly designed and the usability of it was a nightmare. For instance, accessing the c-panel required multiple clicks from the login page. SO…I turned back to attempting connection with FTP software! Interestingly, I had to use a different username and password to connect to Filezilla and reach the public.html folder.

Additionally, I was able to set up multiple emails. I set up a info@kelseyfalcone.com, kelsey@kelseyfalcone.com, and spam@kelseyfalcone.com. I forwarded all of them to my current Trinity University email address. This was actually the simplest part of setting up the site as it only took some simple navigation through the c-panel.

Screenshot of the home page.

Screenshot of the home page.

While I am quick to dislike HostGator because of the immense usability problems, I really liked how they allow you to connect to certain Google Apps and WordPress. Another interesting feature they provide is website templates. I went ahead and downloaded a website template for a personal page, edited the HTML and images for the pages, and posted a quick placeholder page that looks nice! I used a portfolio placeholder and was able to edit my homepage and the contact page.

Overall, my experience was a lot more rocky than I would have liked. I would have never realized how confusing and time-consuming setting up a webpage could be! Luckily, I know a little bit (or a lot-a-bit) about web design after taking a Web Design course at Trinity and will be able to design my own page once I get more time. Visit my personal site here!

HTML5 Geolocation: Convenient or Creepy?

screenshot 2

Screenshot of my hypothetical website. It shows the latitude, longitude, and distance from “the nearest CDC.”

The geolocation experiments turned out really interesting. The website I created is a parody of The Walking Dead, and the Center for Disease Control is playing the Big Brother, watching the survivors’ every move. The geolocation worked well with this site, as the site’s premise was centered around invasive web technology. While originally I found the displayed latitude and longitude really intriguing, the app only kept getting more in depth with more capabilities. To know that I was the one who created something like that, although I do not fully understand each line of code, is exciting! I also found it interesting and creepy how the app can calculate how far the user is from a certain address. If the site creator was able to look into the local storage and get the information about the user’s location, I can imagine this technology being used for both good and harm.

Eventually, after much strife with my HTML, CSS, and JavaScript codes, I was able to display the map with and without pins.

Screenshot of site including the map. A pin is dropped at location at the time. Once the user clicks on the pin, the latitude and longitude of their location is displayed in a white text-box as shown.

Screenshot of site including the map. A pin is dropped at location at the time. Once the user clicks on the pin, the latitude and longitude of their location is displayed in a white text-box as shown.

I was originally struggling to get the map to appear, as the text inside the map div would flash and disappear upon loading. After a lot of debugging and staring at the computer screen, it turned out to be a CSS problem, not a JavaScript problem. I had to merely add a height and width to the map div in CSS in order to get the map to appear properly. Once I figured that out, I had problems getting the pins to appear just to figure out I was missing a bracket.

I found the current coordinates to be a lot more applicable to the “Big Brother” site because it seems to track the user and the user’s location without their willingness. In other words, it loaded as soon as the page loaded. Once I figured out how to add in the tracking movements with the “watch me” and “clear watch” buttons, it became a lot more of the user’s choice to be tracked. Even though this is a lot less creepy, to emphasize the privacy problems with the web today, it made the argument a lot weaker. This being said, I found it really interesting walking around, having my location change after I push “watch me.” To

An example of a geolocation map showing coordinates, distance from the CDC in Washington, DC, and accuracy. This map is a tracking map, updating as the device is moved based on the users' decisions to be tracked.

An example of a geolocation map showing coordinates, distance from the CDC in Washington, DC, and accuracy. This map is a tracking map, updating as the device is moved based on the users’ decisions to be tracked.

Another cool option I found within the geolocation app was being able to change the map type. Although the first few screenshots show a roadmap, I eventually changed it to a hybrid map, showing the actual pictures of the users’ surroundings. Additionally, I was able to change the coordinates given in the Freeman 2011 chapter to a Washington, DC CDC location. This was particularly fun because in The Walking Dead, the characters are originally on a mission to arrive in Washington, DC where they hope there is refuge.

Overall, this badge was challenging and rewarding. For something that really made me nervous at first, I am really starting to enjoy the different applications of JavaScript. It is making me feel like I know more than the basic applications of the language, and that’s a great feeling! I wish I was able to understand each step of the code a little better and how to manage decimal places. Additionally, it would be nice to be able to change kilometers to miles!

iPhone screenshot showing the map and information display from a mobile device. Formatting is universal and not merely limited to computers.

iPhone screenshot showing the map and information display from a mobile device. Formatting is universal and not merely limited to computers.

The Zombie Apocalypse: Web Edition

Overall, this site was challenging and allowed me to learn a ton of new things. I was able to learn about HTML forms, using locally stored variables in JavaScript, and different methods in editing pictures in Photoshop.

In HTML forms, I learned about the “placeholder” attribute that goes into the <input> element. This allowed me to put “Search DeadMD…” in my search bar until the user clicks the space and begins typing. In JavaScript, I struggled a lot at first with the syntax and, honestly, made some really silly mistakes. I relied heavily on the built-in debugger in Chrome to catch my mistakes. I also learned about HTML5 Geolocation using JavaScript which just enhanced the creepy-factor of the web and its capabilities. Another interesting find I came across was how many different ways there are to store and access locally stored variables. For instance, I chose to put most of my JavaScript code in my registration.js page while many people used the JavaScript for their store for most code. This being said, the sites ended up working almost the same.

Although I had a very difficult time getting my map to show up, the problem was just needing to add a height and width to the map div in CSS. Like I said, I relied heavily on the debugger in Chrome for syntax errors but always felt really accomplished when I actually fixed the problem on my own! Anyway, I actually enjoyed this and now I feel like I could actually make a real webpage for a client. When I had my sister fill out the registration page, she even asked if it was the real CDC website!!! You can see my pages below or by visiting the site here!

blog_search  blog_registration

blog_thanks

blog_store

blog_records

The Crucial Integration of Wireframes

Prior to taking a course in web design, the term “wireframes” was foreign and unheard of. A seemingly common step skipped by many companies, wireframes are, in fact, a crucial step to designing a user-friendly, client-friendly web-page. Often, clients suggest completely skipping this stage and getting on with the designing the actual site. From my experience with designing both wireframes and webpages, this is a really bad ideas. Some of the most important uses for wireframes are highlighted in Nick Haas’ article, 7 Reasons Why Wireframing Is Important In Web Design. The reasons I found to be most essential are emphasizing usability before aesthetics, clarifying website features, and making updating the site a breeze. While Ben Lytle Photography, the basis of my wireframes, is not a real site, I can imagine a photographer client would focus on aesthetics before usability because that is their natural desire. Additionally, on a photography website, web features such as a cover flow used on my gallery mockup page may be difficult to implement first time. After putting in all that difficulty designing the cover flow, it would be a shame to have the client dislike it and ask to have it changed. It was also interesting using Balsamiq because this wireframing site tends to cartoon-ize every element, further allowing the separation between design and function.

The home page meant as the introduction page for users. Characterized by a large image slideshow and an introduction to the photographer.

The home page meant as the introduction page for users. Characterized by a large image slideshow and an introduction to the photographer.

Wedding gallery page design representative of all gallery pages. It is characterized by a unique cover flow design so users can easily flip through examples in each gallery.

Wedding gallery page design representative of all gallery pages. It is characterized by a unique cover flow design so users can easily flip through examples in each gallery.

Blog home page highlighting the importance of being able to see the primary navigation at all times.  By allowing the user to scroll through the blogs horizontally, they won't get caught up in eternal scrolling.

Blog home page highlighting the importance of being able to see the primary navigation at all times. By allowing the user to scroll through the blogs horizontally, they won’t get caught up in eternal scrolling.

Contact page designed for usability.  It is left aligned for crispness and ease.

Contact page designed for usability. It is left aligned for crispness and ease.

While I have designed wireframes for a recipe site, which focuses on concrete usability, this was a new experience designing wireframes for a site supposed to emphasize creativity and uniqueness. From my experience and my analysis of other photography sites, a simple design with several unique aspects and lots of example photographs characterizes them well.

The strategic rationale is shown below:

Strategic Rationale

Pen Tool Madness

Photoshop has always been somewhat of a mystery to me. Any photo editing I had done in the past seemed to consist of drawing a red mustache on a picture of my sister in Paint or coloring in a bunch of lines in Kid Pix. Although college has taught me that the Magnetic Lasso Tool is an easy (at the expense of quality) solution to many photo editing problems, I have always been taught to steer clear of the pen tool.

This being said, my experience over the past few days has not been so horrible after all. With the exception of a rough start making a penguin with Simon Hubbert’s web-based tutorial “Become a master of the pen tool in under 30 minutes“, I surprisingly caught on pretty quickly. While making my own penguin by tracing the lines of his, I could not, for the life of me, get my lines in the proper place. After I messed up one anchor point, I ended up deleting the whole path and having to start over. Planet Photoshop’s tutorial, “Your Pen Tool” seemed to skip over how to fix these details. For instance, it wasn’t until I worked through Felice Regina’s pen tutorial did I understand that after you delete a point, you have to go back and click on your last point to continue the same path. While creating the penguin, I made the mistake of not clicking back on the previous point and by the time I finished with my path, there were actually multiple. This was a problem because Photoshop was then unable to fill the path and I had to start over, again. Additionally, it took a while to realize how to efficiently use the top direction line. I actually finished my entire penguin drawing without altering the top direction line.

One thing that exponentially helped my accuracy and overall look of my pen tool paths is using a mouse instead of just my laptop. This allowed for a steadier hand and more precise anchor point setting. Another thing that allowed for a smoother path was less anchor points. Ian Yates’ comprehensive guide supports this point and also adds that positioning anchor points where paths begin to curve, as opposed to in the middle of the curve, also create a smoother line. Overall, experimenting and playing with the pen tool on my own proved to be the most helpful. While I found the tutorials extremely informational, applying the information myself allowed for the most growth. I have always learned best in a hands-on setting. The videos in Felice Regina’s pen tutorial were helpful but I found toggling from Photoshop to the tutorial more of a hassle. Personally, I enjoy the step by step pictures in Ian Yates’ comprehensive guide. This guide even told me where to release and hold the anchor! While I do prefer videos over a written laundry-list of steps, the step by step pictures seemed to be the most useful for my learning style.

To continue my exploration of the pen tool, I decided to create a silhouette of Mia Hamm, an American soccer player. I actually conquered this the very first time using the shape pen tool.

before

The original picture of Mia Hamm, an American soccer player. This picture was taken from Sportige’s blog.

I found the default black background extremely boring and decided to make the silhouette an American flag. This allowed me to familiarize myself with the clipping mask! While the pen tool is really helpful, the clipping mask seems to have extremely applicable uses! I then drew my own stars surrounding the silhouette and used the color picker to match the flag’s colors to the colors of the stars. I decided to put them on a gray background to make the silhouette and stars stand out!

after

The finished product of the Mia Hamm silhouette with an American flag clipping mask.

My last adventure with the pen tool took me a little bit longer. I successfully extracted myself from a skydiving picture but then I ran into a problem. I found a Time magazine cover with Beyonce I thought would be perfect to substitute in a cool picture. When I duplicated my layer onto the Time cover, I realized I would have to get rid of Beyonce and fill in the parts she covered.

IMG_5221

Original personal photograph taken in 2012. Both skydivers were used in the finished product.

before2

TIME Magazine cover from May 2014. This particular version was taken from an article on Daily Mail. Beyonce was extracted and the magazine background was used for the finished product.

I used the pen tool again to extract her and delete her from the cover but she left a gaping hole that I am still not sure how to best cover it. To solve this problem, I used the paint bucket tool to make the entire background of the magazine cover a solid grey instead of the original fading gray. I also was missing part of the M and E in the magazine title. To solve this problem, I found a transparent “TIME” image on Google and created a new layer to cover the existing cover’s title (this is why the title is red in the after image but yellow in the before image). Finally, I filled in any strange coloring with the paint brush.

after2

The finished product depicting the background of TIME magazine’s May 2014 cover and a personal photograph. The skydivers overlay the rest of the magazine to allow them to stand out.

Overall, I am relatively pleased with the way my finished images turned out and I am extremely pleased with the knowledge I gained after this! The pen tool is no longer a scary, unusable monster but is now one of the tools I am most familiar with. Additionally, I like the accuracy is gives in contrast to the magnetic lasso tool! I will leave this posting with a few questions: 1) How would I extract Beyonce and get the same gradient background found in the original image? 2) When extracting an image to delete it, is it acceptable to use the lasso tool? and 3) When would you use the bottom direction line?

The Language That’s Not A Language

While completing jQuery on Code Academy, I found myself feeling extremely confused being thrown into a whole new language with no background. Come to find out, according to Sheo Narayan, jQuery is not its own language after all. In his article, What is jQuery?, he says it is nothing but well-written JavaScript code. jQuery is merely a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.” While this had me sufficiently confused, I jumped head first into the language that’s not really a language.

After completing jQuery, I noticed many similarities, as well as many differences, between it and CSS/HTML. One thing that was recurring across jQuery, HTML, and CSS was the continuous use of and interaction between different elements. jQuery, HTML, and CSS can all be used in one webpage with seamless connection if done correctly. jQuery is more of a cooperative code that allows users to interact with the CSS stylesheets and the HTML content. Another similarity is the requirement of linking the script document to the HTML, just as the CSS stylesheet has to be linked. Additionally, I found many similarities between styles in jQuery and CSS as both can be made interactive. For instance, jQuery is able to interact with the user’s mouse hovering and clicking on an HTML element just as CSS does using classes and IDs. jQuery is more advanced, able to go beyond that and also interact when a user double clicks, enters content in a text bar, or even uses arrows. Another important thing across all three was the necessity to use proper bracketing to start and close different elements, arguments, and functions. All three codes do not function properly without the correct use of bracketing. This being said, each uses different ways to separate commands. For instance, HTML uses </>, CSS uses {}, and jQuery uses $() with a combination of parentheses and brackets. It was very apparent that jQuery, like CSS, cannot be used on its own. For it to be used most effectively, it would need to be used with several languages, not merely HTML.

Because it is a cooperative “language”, it is likely that jQuery is used in conjunction with many different languages in the real world in order to accomplish true interactive design. Code Academy provided very basic-looking web pages after proper jQuery code was written. Although I have not yet been introduced to JavaScript, there was a noticeable difference between Code Academy’s CSS tutorials and realistic application of CSS in the real world. Therefore, I can infer that the application of jQuery is most likely much different in the real world. From surfing sites such as jQueryUI.com, Smashing Magazine, and others, it appears that jQuery is used very similarly to Code Academy’s representation but with more sophistication. Craig Buckler of SitePoint supports that jQuery is in fact used on more than half of all websites worldwide. The most obvious use is to make websites entirely interactive and fun to use. For instance, sites such as Smultron use many jQuery functions to make images change when hovered over, make navigation menus pop, and even make the background interactive. Some sites utilize jQuery to make HTML elements appear and disappear based on the user’s interaction with the content. It seems as though jQuery is mainly used to make websites stand out from others, providing elements of surprise and excitement instead of the plain CSS/HTML structure.

Although my experience with coding is limited to two languages and one “language”, I have found the process intriguing and truly rewarding. The possibilities of web design are truly endless with the multiple combinations of languages that can be utilized. As technology continues to develop, it seems as though it will become more and more difficult to create universal web pages across all interfaces. How does jQuery work on mobile devices? If it does work on these devices, do different devices require entirely new script documents? While I would love to know and master all languages to maximize my creativity on the web, the differences in characters used, even across these three codes, are incredible. For instance, why use a dollar sign? Why can’t we use one standard, agreed-upon syntax for coding? While it makes sense to separate style from content, it would be helpful to have a more standardized use of characters so that jQuery doesn’t require $(document).ready(function() { to start a new code while CSS requires seemingly nothing. The drastic differences between codes, even when they appear to have similar functions, makes it difficult to remember which syntax goes with which code. It is also interesting that, as I understand, jQuery is a small portion of JavaScript and jQuery also has it’s own subgroup called jQueryUI with more advanced functions than basic jQuery.

All in all, this was a stressful, yet rewarding experience. I wish that I would have known what exactly I was writing and why and I believe that learning JavaScript before tackling jQuery may have helped that. I found that attempting to look up what functions and arguments meant led me to sites that continually referenced JavaScript in some shape or form, which seemed to make it even more confusing. This being said, I find it really neat that I have a basic understanding of the commands and overall uses of jQuery. Hopefully, knowing this language (that’s not really its own language) will help me learn JavaScript in the near future!