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