Just a college student trying to make it through Web Design

Archive for the ‘Badges’ Category

Minimalist Design

There is an old saying that goes, “less is more.” This saying can be applied to a variety of concepts; however, this phrase exemplifies the art of minimalist design. In modern society, it is hard not to notice in-your-face commercials and advertisements. While these designs certainly capture the attention of the viewer, meaning may be lost. As a designer, it is important to pay special attention to the definition of minimalism, which is reducing a design to the most essential elements (Chapman 2010). With minimalist techniques, one can get to the core of the content and message.

Good minimalist design depends on a few, yet extremely crucial stylistic principles. Since minimalist designs involve very little elements, it is necessary to make sure that everything is aligned and graphics look close to “pixel perfect” (Karol K, 2012). Subsequently, typography is fundamental to minimalism.  Typefaces must be both legible and make a design statement at the same time. Minimalist designers must also remember the importance of white space. Elements must be dispersed evenly throughout a design. White space, or as it is sometimes called, negative space, is a friend to both the designer and participant.

The "Connect Four" computer background

The “Connect Four” computer background

The first design in this minimalism exercise is a computer background called, “Connect Four.” Depicting the popular child’s strategic game of the same name, the design features minimal design elements and no text. With a minimalist design, every detail must have significance. In this computer background, each color represents and aspect of the game. The yellow represents the grid players use to put the red and black game pieces in. This design also indicates a message of success. Four red dots are successfully connected in a row, depicting this is a winning game. Much of the inspiration for this design came from the backgrounds featured on simpledesktops.com. Like many of the designs shown on this website,  this particular design is modeled after a shape, idea, or thing. Additionally, this design also exhibits the importance of the usage of white space. Even though nothing on the background is the color white, the alignment of the squares allows for the group of like elements.

 

 

 

 

 

Minimalist Movie Poster for Valentine's Day

Minimalist Movie Poster for Valentine’s Day

The second design is a minimalist movie poster for the film Valentine’s Day. This movie was released in 2010 and starred dozens of big-name actors. The original movie poster chose to focus on the stars of the film. However, highlighting so many different faces was distracting. The new movie poster depicts a design relying heavily on the use of negative space and alignment.  Besides the title which is centered, the rest of the text on the poster is left-aligned.  According to Pallen (2012), proper alignment helps users to break down content and digest information. Most minimalist techniques recommend a simple color scheme. The new Valentine’s Day poster only uses a variation of three red colors in addition to black. Special attention was paid to typography in this design. The serif font Garamond was used for all of the text except the title. The font used for the movie title was Monotype Corsiva, a script typeface. A different, fancier font was chosen for the title to demonstrate that the title was the most important message to take away.

Minimalist design is quickly become the standard in the creation of websites to movie posters. Designs that follow minimalist techniques are clean, concise, and simply beautiful. My keeping the fundamental techniques of minimalism in mind, one can work to create their own minimalist designs.

Advertisements

HTML5 Video

In order to complete my badge in the Programming category, I chose to tackle HTML5 Video. Although I had my struggles, my experience with HTML5 Video was really interesting and fun. I have been waiting to try some coding with HTML5, and I was glad I could practice through video. I thought Steve Heffernan’s Lynda tutorial was very helpful in providing a context of the importance of HTML5 and video. Although Flash is dominate right now, video in HTML5 will supposedly become the norm in 2015. This is because the video is able to play HTML5 directly from the browser and not via a plug-in like Flash. Additionally, I was really intrigued by this badge because I personally like to edit video.

Finding a topic to shoot my video based on the class themes was relatively simple. I chose to focus on our class discussion on Millennials, a topic that has become especially close to my heart. I may be biased, but I think Millennials are at a very special place in society where both the benefits and challenges of the Internet are abundant. Even though settling on a topic was simple, the actual shooting and coding of my video did not go as smoothly as I hoped. Due to time restraints, I was unable to check out one of the digital cameras and tripods available in the Communication department. While the iPhone has the ability to film good quality footage, I completely forgot to record lengthwise until it was too late. I also couldn’t keep my hand steady, which is something I had to work around in editing. However, despite the filming flaws, I think the respondents had some insightful things to say.

Here is a screenshot of my video about Millennial students.

Here is a screenshot of my video about Millennial students.

In regards  to coding my video for HTML5, I ran into a few problems. Although I really liked Heffernan’s tutorial, I was a bit confused by the Head First chapters. It was beneficial to walk through each step with the Lynda tutorial. However, I still encountered some “doh” moments throughout the coding process. For example, I could not understand why my videos would not play. I checked and double checked to make sure my code was right. When I was about to give up, Emily pointed out to me that it was because I had added an extra “video/” in my video file name. For some strange reason, I thought that it was necessary to add the word “video/” in the file, probably because both the chapters and tutorials named their files this way. Thankfully, once I got past this road block, everything else was pretty smooth sailing.

Screenshot of my HTML5 Video code.

Screenshot of my HTML5 Video code.

The end result of my HTML5 coding experience.

The end result of my HTML5 coding experience.

Since I just finished my Domain Hosting badge, I would love to see how I can incorporate video on my personal web page with HTML5. Hopefully, I can get my hands on a tripod as well!

In the meantime, check out my video here.

Domain Hosting

That's right, visit my page at laurasandling2013.com.

That’s right, visit my page at laurasandling2013.com.

Before I did the research on domain hosting, I had very little knowledge of how to obtain the coveted .com for one’s website. However, I quickly realized that everyone should understand domain hosting, even if one does not have any intention to create a website right away. In the never-ending quest to become an empowered web user, it is important to learn about the crucial aspects of the Internet. When it comes to learning about and understanding the crucial aspects, domain hosting is at the top of the list. The time may come when one wants to build an Internet presence.

Although I always knew that one cannot simply create their website and call it, “idocoolthings.com” or any other .com name for that matter, I was extremely fuzzy on the finer details. I suppose I was aware of the concept of the domain provider, but I was oblivious to how important the provider is. The research portions of this badge and reading online articles was extremely helpful to my understanding. I really enjoyed the “9 Steps To A Happy Relationship With Your Hosting Provider” article, it was straight to the point and interesting.

Based on my internship boss’s rants, I knew that while very popular, GoDaddy has a few issues. He would always complain about bad customer support, so I knew right away I wanted to avoid this provider. At times I can be technological deficient and need some extra helping walking through things. While reading reviews for various hosting providers, good customer service was my biggest concern. I wanted to look for a provider that had online chat for their customer support. I also wanted a provider that would allow easy upgrades, in case I need to increase my bandwith or disk space.

The search was very daunting! I looked largely at reviews and price plans of each service. Although the“9 Steps” article basically said to take reviews with a grain of salt, I had a hard time choosing one. There was no service that was perfect and many of the reviews freaked me out. However, I finally decided to purchase my hosting through iPage. It seemed to have mostly positive reviews and I got access to a special coupon that was unbeatable in which I was able to buy my first 12 months of hosting for $1 a month. The total with the domain name and added security was less than $40.

So far, I am pleased with iPage. The control panel is very straight forward and is definitely for the beginning designer. This could be a problem if I want to get more advanced; but for now, it suits my purposes well. They also have video tutorials that are helpful. Last but not least, iPage’s online chat is awesome. Yes, I did have problems the very first day. Thankfully, Mr. Jagadish K responded to my chat superfast and helped me get HTML on to my site (apparently, you have to name the file index.html).

I am very excited about laurasandling2013.com! Although I drafted up a quick code, I might switch to a WordPress interface because I will probably use the site more as a blog chronicling my experiences with Teach For America. But for now, I will continue to build on my HTML pages. It is more fun now that I am comfortable with coding HTML and CSS!

Industry Analysis: Forecasting

Introduction

Whether one likes the idea of Augmented Reality or not, there is no question that this technology is becoming a big topic in the media world. However, this new type of reality is not limited to Google Glass or other high-tech devices. It is helpful and necessary for journalists and other writers to understand how Augmented Reality will undoubtedly change the publishing field. The following white paper will review possible scenarios of Augmented Reality for journalists and how to best use the technology to their utmost advantage.

What is Augmented Reality?

In recent years, there has been a lot of discussion concerning Augmented Reality.  Considered an emerging technology, Augmented Reality (AR) allows for the real time blending of the real world with digital information which is processed by a computer.[1] It is important not to confuse AR with virtual reality, which is a digital experience that mimics various real-world situations.[2] In other words, AR is a view of reality that is digitally enhanced by computer generated graphics through a camera lens.[3] According to one definition, Augmented Reality can refer to any application that 1) combines the real world and the digital world 2) is both interactive as well as in real time, 3) and is 3D or three dimensional.[4]

The History of AR

While there are too many technologies that have developed AR as it is known today to cover in just a brief section, it is necessary to know a few of the main advances. Although AR may seem futuristic and has only been available for consumers for a relatively short time, the concept has been a tool that scientists have used for many years. In fact, some argue that the idea of AR was first introduced in 1901 in writer L. Frank Baum’s short story, The Master Key, where the main character wore special spectacles that relieved another person’s character.[5] Over the next several decades, AR slowly developed from sheer idea to Morton Heilig’s Sensorama, a machine that generated artificial environments for the user’s senses in 1957.[6]

However, the term “Augmented Reality” was officially coined in 1990 by Boeing researcher Thomas P. Caudell, who used the phrase to describe a head-mounted digital display that helped teach workers how to assemble electrical wires in aircrafts.[7] Later, in 1992, the first functioning AR system was created for the United States Air Force called virtual fixtures, which allowed users to see cues which helped guide tasks.[8] Now, the focus of AR implementation is on devices which provide easy consumer accessibility such as through apps for mobile and tablet apps for Android and Apple.

The Future of AR and Journalism

However, the question still remains to how journalists fit into the AR equation. As with the popularity of the Internet, the journalism will have to change and accommodate to the world of AR. There are, however, several instances in which AR can aid the field.

Over the last couple of years, Augmented Reality has been applied to pictures and posters. Now, AR is being applied to print media to provide a richer story environment.[9] AR introduces the concept of the “living magazine,” where users can see additional text, data, pictures, and video that is not seen directly on the printed magazine itself.[10] With the aid of a smartphone, webcam, or tablet, AR takes the print reading experience to a whole new level. mixed media approach is also relevant from a journalists’ standpoint.

One example of an AR app that journalists and publications have used is Aurasma.

One example of an AR app that journalists and publications have used is Aurasma.

AR can provide updated content to the reader, long after the newspaper or magazine is published. Users are accessing this augmented content through AR apps like Aurasma and Junaio on their smartphones and tablets to read news media such as New York Times, Financial Times, and USA Today.[11]  Using AR in this format even has the ability to revitalize the publication industry by encouraging users to still purchase the print product with the promise of updated content.[12]

In addition to possibly revitalizing the print industry, AR can allow journalists to have a more user-centered approach to storytelling. This includes encouraging consumers to become citizen journalists where they can report and interact with journalists based on their own unique experience through augmented reality.[13]

 

google glass

Google’s AR glasses, called Goggle Glass are set to become big in the upcoming years. Journalists can use these glasses to their advantage through live reporting and interacting with users.

AR offers geo-tagging and global positioning technology, which gives users the ability to access specific content from the Internet based on their exact location.[14] While there are many concerns about privacy issues with AR due to possible data, location and facial recognition abilities, journalists can utilize this to its advantage.[15] By knowing specific whereabouts of an individual person, event, or place, reporting can become a more engaging process.[16] For example, examine a scenario with one emerging technology, the AR glasses by Google Glass. With Google Glass, a journalist could report live and record breaking news from any location while a user could use his or her goggles to scan a variety of journalistic sources to gather the best information about the situation.[17]

Advertising has always been and will continue to be a big issue in the journalism field. However, the landscape of advertising can change drastically with AR. Journalists and specific publications can use AR to make advertising fun and engaging to a niche group of targeted users, making the ads more helpful and less disruptive.[18] Additionally, AR in print advertising has the capacity to strengthen reader loyalty by keeping up with both current trends and user needs.[19]

Although a future for AR and journalism looks promising, more research and development needs to take place. While AR apps on mobile devices will continue to grow in popularity, other AR technology such as Google Glass needs to be analyzed further in relation to journalists and publishing.  Even though there is a long way to go, AR could possibly aid in a sort of journalism revolution.


[1] AR-media: Inglobe Technologies. (n.d.) Augmented reality and the future of

printing and publishing. Retrieved from http://www.inglobetechnologies.com/docs/whitepapers/AR_printing_whitepaper_en.pdf.

[2] Sawers, P. (2011, Jul. 3). Augmented reality: the past, present and future. Retrieved from http://thenextweb.com/insider/2011/07/03/augmented-reality-the-past-present-and-future/.

[3] Perdue, T. (2013). Applications of Augmented Reality: Augmented Reality is Evolving as Computing Power Increases. Retrieved from http://newtech.about.com/od/softwaredevelopment/a/Applications-Of-Augmented-Reality.htm.

[4] Ibid.

[5] Peddie, J. (2013, Jan. 15). Augmented reality showing us stuff that’s not there. Retrieved from http://jonpeddie.com/back-pages/comments/augmented-reality/.

[6] Sung, D. (2011, Mar. 11). The history of augmented reality. Retrieved from http://www.pocket-lint.com/news/108888-the-history-of-augmented-reality.

[7] Sawers, P. (2011, Jul. 3). Augmented reality: the past, present and future. The Next Web. Retrieved from http://thenextweb.com/insider/2011/07/03/augmented-reality-the-past-present-and-future/.

[8] Sung, D. (2011, Mar. 11). The history of augmented reality. Pocket-lint.com. Retrieved from http://www.pocket-lint.com/news/108888-the-history-of-augmented-reality.

[9] Bajarin, T. (2012, Dec. 10). Augmented reality is revolutionizing the publishing industry (finally!). PCmag.com Retrieved from http://www.pcmag.com/article2/0,2817,2412990,00.asp.

[10] Bunz, M. (2010, Jan. 7). How journalists can use augmented reality. The Guardian. Retrieved from http://www.guardian.co.uk/media/pda/2010/jan/06/journalism-augmented-reality.

[11] Pavlik, J. and Bridges, F. (2013). The emergence of augmented reality (AR) as a storytelling medium in journalism. Journalism & Communication Monographs, 15, 4-59. doi: 10.1177/1522637912470819

[12] Online journalism blog. (2010). Augmenting reality through journalism. Retrieved from http://onlinejournalismblog.com/2010/02/03/augmenting-reality-through-journalism/

[13] Pavlik, J. and Bridges, F. (2013). The emergence of augmented reality (AR) as a storytelling medium in journalism. Journalism & Communication Monographs, 15, 4-59. doi: 10.1177/1522637912470819

[14] McAthy, R. (2012). Augmented reality: opportunities for news outlets. Journalism.co.uk. Retrieved from http://www.journalism.co.uk/news/augmented-reality-opportunities-for-news-outlets/s2/a551526/

[15] Havens, J. (2013, Feb. 8). The impending social consequences of augmented reality. Mashable. Retrieved from http://mashable.com/2013/02/08/augmented-reality-future/.

[16] Pavlik, J. and Bridges, F. (2013). The emergence of augmented reality (AR) as a storytelling medium in journalism. Journalism & Communication Monographs, 15, 4-59. doi: 10.1177/1522637912470819

[17] Ibid.

[18] Online journalism blog. (2010). Augmenting reality through journalism. Retrieved from http://onlinejournalismblog.com/2010/02/03/augmenting-reality-through-journalism/

[19] Pavlik, J. and Bridges, F. (2013). The emergence of augmented reality (AR) as a storytelling medium in journalism. Journalism & Communication Monographs, 15, 4-59. doi: 10.1177/1522637912470819

Pen Tool Badge

Being only familiar with how to use the mere basic functions of Photoshop, I heard very little about the pen tool. However, whenever I did hear about the tool, nine times out of ten was usually about how frustrating it is. By completing this Empowered User badge, I now see that those complaining people are correct. The pen tool is very frustrating! Like Felice, Hubbert, and Patterson stressed in their tutorials, this tool takes practice. This Photoshop tool is not just something you can master in a  few hours, but a practice you need to give a considerable amount of time.

However, despite my frustrations with the pen tool, this badge help me see the value of the skill. Although my silhouette and magazine cover are a bit rough around the edges, I could see the potential of creating exact replicas of images even as a beginner. I found myself getting absorbed in deciding which anchor points to put where and trying to practice with different images. The pen tool is definitely a important and one should continue to utilize as much as possible.

W.Vball vs. Long Beach St.- TC

Original picture of volleyball player

For the human silhouette in motion, I used an image of Bojana Todorovic, a UCLA volleyball player, just about to hit the ball. Having played the sport for many years, I know volleyball is a sport where the players are constantly in motion. I chose a jumping play to further emphasize the athleticism of the sport. While creating my silhouette, I encountered a couple of problems. Even though Patterson’s silhouette tutorial helped a lot, I had trouble creating a single shape. For some reason, my pen tool kept wanting to create another shape instead of adding another anchor point. Thankfully, I found that clicking on a smaller distance between anchor points helps.

Silhouette of volleyball player

Silhouette of volleyball player with purple coloring.

Me on the cover of "Seventeen" magazine.

Me on the cover of “Seventeen” magazine.

When it came to finding a good photograph of myself, I was amazed of how much better my pen skills had become. However, I had some trouble using the pen tool on some of the elements on the magazine. For example, I tried using the pen tool on the letters of Seventeen,but it was difficult to get a clean trace because the title was in front of the original cover girl, Rihanna’s hair. However, I think the end result looks pretty decent, especially since I am new to the pen tool.

The pen tool is a valuable skill to have in your Photoshop arsenal. Although I still need more practice, I am glad I now have to foundation to continue to learn how to use the tool to its fullest potential.

 

Typography Badge

It is a common misconception to believe that design is all about the drawings, pictures, and photographs. However, the key to good design is typography. In fact, the key to great design is typography. With haphazard font-usage or complete disregard for type, the entire vision for a web page, print ad, or anything else can be instantly lost. As long as the designer remembers a few crucial design rules, his or her final creation will be even better. In the following two examples, one for the web and one for print, one can see several elements of critical typography design.

There are many examples of terrible web typography out there. Whether it is because some designers are in a hurry to get the information needed up on the Internet or for some other reason, bad typography is hard to find.

The example used here is from the testimonial page of the Penny Juice website, a company that provides natural juice to daycares and schools. According to Laura Franz’s video tutorial on typography on Lynda.com, good typography should always promote reading. No one wants to try to read when they have to compete with all caps and neon-colored backgrounds. Additionally, the navigation bar to the rest of the pages on the website was at the very bottom. If a user got distracted, or more likely frustrated, he or she could likely move on to another website because the links are not easily visible.

(more…)

Wireframe Wizard Badge

Here is the first mockup for the TigerTV website wireframe.

Here is the first mockup for the TigerTV website wireframe.

In a nutshell, creating a wireframe is not only a great option to begin designing the layout of a website, but it should be the crucial first step in the design of any web page. Before completing this badge, I knew nothing about wireframes. Now, I will sketch or digitally create a wireframe as the layout and map for the finalized page. The beauty of the wireframe is that it allows the website designer and developer to focus only on layout, without the distractions of color choice or content. For my wireframe badge, I used the Balsamiq Mockups trial software. After reading about other wireframe software, I decided to go with Balsamiq because it looks hand-drawn but is completely digital. The user can use the icons and pictures already attached with the software or they can import their own images.

I created wireframe mockups for three pages for Trinity’s TigerTV website which include the 1) Trinity Forums, 2) Weekly Shows, and 3) Manager Bio pages. In addition to visualizing the look of the web page, it was also nice to not have to worry about specific content. Take a look at the strategic document here.

Overall, try creating a wireframe. Don’t worry if you don’t have the latest wireframe software… all you need is a pen, paper, and some imagination.

Tag Cloud