Designing for Desktop and Mobile Use

Web design is one of the most critical factors for the success of a website. The design of a site is their primary factor for judging a company’s credibility, which also influences conversions, bounce rate, and more. Websites need to evolve continuously to stay current with users and search engines. To meet the users’ needs, you must have a responsive design so that users can view the site, whether on a desktop or mobile phone.

As smartphone use grows with more than half of the world’s internet traffic coming from devices, the requirement for mobile-friendly sites grows. Responsive design uses adaptable layouts, so a website layout will adjust but remain relatively the same on desktop, mobile, and tablet devices. Your content and your design adapt themselves to a user’s device automatically.

   

Keeping the user in mind and how they will experience the site will assist with the overall design effort. Here are the best practices to follow, according to Ed Johnson in the essay “Mobile Design Crash Course”:

• Grids – Users expect consistency in the site experience. Using grids will help with the UI design. You should align the layout with adequate space between each element.
• Column structure – This will help organize the layout across the screen.
• Responsive design – It is essential to think about where the content will break on devices. Designing with these breaks in mind will aid you in creating the best user experience.

Design teams will often design using a column grid, creating a prototype to test, and when finalized, passing it onto the development team to replicate the design.

Assignment

This week I used the fictitious company I had designed the logo and ad for previously to visualize both a website and a mobile layout. I wanted to maintain the nautical theme and colors and provide a clean design with simple navigation for the user. The company’s mission is to provide sustainable materials and natural products for their customers. They manufacture their dog beds and supply locally produced food and treats with a focus on customer interaction.

The top navigation consists of home, shopping, events, and about us, with the logo clearly visible in the top left corner. The welcome copy contains a short description of the company. I positioned it next to the image of the adorable puppy used in the ad. Next, there is a description of the dog beds explaining why you will love them. This section also contains buttons to connect to Facebook, Instagram, and sign up for our monthly newsletter. On the right, there is information on recycling old sails and the customized yacht insignia that each bed contains.

The shopping page would have new items, popular items, and anything on sale. The events page would show store events, adoption events, local community events that help area animals, and sales promotions that are coming that month. The about us page would give a history of who they are and why they do what they do.

Mobile

For the mobile design, I kept with the same look and feel minimizing the logo image at the top left. The menu is located clearly in the top right corner as a hamburger dropdown. Underneath Welcome, I have also added navigation with a short description to engage the user. The bottom has the social links as well as an opportunity to sign up for the newsletter.

If the user were to scroll down, they would see additional information on the recycling of retired sails as well as more details of the custom beds.

 

Resources:

Landa, R. (2019). Graphic design solutions. Boston, MA: Cengage.

Content Design Strategy

This week I worked on creating the prioritization matrix, core page matrix, sitemap, and
wireframes sketches based on the RFP for Shenandoah Valley.

Content design takes into consideration much more than just the content and the layout. Today, content design examines behaviors: the impact of the content and the response of the user. The content becomes a dynamic source continuously changing.

To establish how the content can support the business goals, define a strategy that will help achieve these goals. Meghan Casey outlines essential steps in building a content design strategy below:

Prioritization is how you determine your site’s content and its relative importance to your users and your business. Common artifacts include topic maps and prioritization matrices.

Organization refers to the framework for grouping, labeling, and relating content so that users can easily find what matters to them. Common artifacts used to document organization are sitemaps and taxonomies.

The presentation refers to the ways in which pieces of content, such as a page headline, product overview, body text, or related resource, are assembled to form what a user sees on a page. There are usually several repeatable views (like a landing page, product page, or blog post) and perhaps some unique ones on every website. Common artifacts to document views include content models and wireframes.

The Content model identifies your core pages by matching the business objectives and user tasks.

View draft

 

 

Resources:

Casey, M. (2015). The Content Strategy Toolkit. 
     Peachpit, a division of Pearson Education.

Bringing it together

Some of the best ads are very simple, using visual elements to get across their message.

This week I have taken the fictional logo that I created and developed a half-page ad announcing their opening. Using an image that I had taken on the beach of an adorable puppy looking at someone talking, my headline is, “Did you hear?” The body copy announces that Canine Bay has opened and a few words stating what the store is. The main image of the puppy is on the right; the logo is in the lower-left corner, followed by the tagline and address.

The audience is dog owners in a coastal town looking for beach and boat accessories for their furry friends. The image is adorable and eye-catching. The message is short — lets the reader know they are open.

“A well-thought-out idea sets the framework for you create” (Landon)

Ad design should contain an image, headline, body copy, tagline, and sign-off. The headline should attract the target audience, the body copy delivers small amounts of information, and the tagline is a catchphrase used across campaigns. For this campaign, they are announcing the opening and driving traffic into the store. The sign-off is the logo and additional social media icons.

People quickly scan what they read. They have emails, magazines, social media, and billboards in their face daily. A person doesn’t have time to read everything, so you need to grab their attention. You do this with a compelling headline. David Ogilvy said, “On average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar.” So, make that eighty cents count — pull in your audience.

When creating a print ad, use a limited copy for the reader to quickly scan. Avoid telling the viewers everything about the product or service. Use the ad to drive traffic to other places such as a website or storefront. Focus on one point for the campaign that you believe will best sell the benefits of the product or service to your audience.

 

 

 

 

 

 

References:

August 2, 2017 by Mentis,George. (2 August 2017.) 11 Simple Tips to Creating An Effective Ad. Retrieved from Target Public: https://targetpublic.com/11-simple-tips-creating-effective-ad/

Landa, R. (2019). Graphic design solutions. Boston, MA: Cengage.

 

Standing Out in the Crowd

A logo is the visual representation of the product or service. It should give meaning to what it represents, utilizing colors and visual design. A logo will tell a story and portray what the service or product is. It should not be a personal preference but instead directed towards the intended audience. Once you’ve completed the market research on what your target demographics are, then you are ready to begin designing your logo.

Despite styles changing, the principles of logo design do not change. Many iconic logos are simply icons without the product’s name, yet we precisely know who they are. Keep in mind as you start brainstorming that your logo will appear in many mediums and platforms. If you include a lot of detail, this could get lost, depending on how it’s displayed. It is best to start your first drafts in black and white before getting into the colors.

This week I have chosen a fictional company that sells accessories for dogs in a coastal town. Many of the clients will be boaters and love the ocean. The store will sell items for dogs that are passengers on boats and frequently visit beaches. Items sold will include dog life vests and waterproof beds made out of retired sails. To get started, I sketched boats and dogs before coming to one idea I wanted to carry through in Illustrator. I started in black and white, outlining the edge of a sailboat. Then I took an image of a dog, created a silhouette of the dog, placed the dog on the bow of the boat. Using the name of the store, I created a curved set of letters, positioned them at the waterline, so they appear to support the vessel. The font I chose was simple and easy to read. I wanted to keep with the theme of simplicity.

Next, I created a color palette to be applied consistently across the logo, store branding, and website. The psychology of color can trigger different emotions in people, which marketers use while designing their campaigns. Cooler colors like blues and greens tend to be a calming and comforting presence. These are colors often found in nature, and for this exercise, the ocean.

Using the color palette, I picked two colors that represent the ocean. I kept the design and color palette simple so that this could be used at any size or on any platform without diminishing the layout. The elements speak to the audience, which is dog-friendly, attracted to the ocean, and most will own or use a boat frequently during the boating season. The store’s design of waterproof dog beds using retired sales I branded with this logo showing a sailboat as well as a dog.

“The logo is the precursor to making that perfect first impression on the customer.”

Every part of the logo design has meaning. Some may be subtle like the NBC logo with the peacock head in the middle, and some can have a deeper meaning, such as the Starbucks logo. The Starbucks logo relates to Greek sirens, which are said to have lured sailors to their fate at sea in a moment of weakness. I don’t know about you, but Starbucks is one of my weaknesses, so this rings true for me.

Your logo should incorporate the fundamental psychology of colors, shapes, and fonts. Once you have gone through the necessary steps to bring your logo to life, you will meet the brand goals and have visual excitement for your target audience.

 

 

Resources:

Ooley, Amber. (2018 August 30) Logo Design 101: Understanding the Elements and Principles. Retrieved from LogoMaker: https://www.logomaker.com/blog/2018/08/30/logo-design-101-understanding-the-elements-and-principles/

Paish, Chris. (2018) Top 10 of the world’s most famous logos and what you can learn from them. Retrieved from 99 Designs: https://99designs.com/blog/logo-branding/famous-logos/

Darling, Kayla. (n.d.) 40 Creative and Memorable Logo Designs to Inspire You. Retrieved from visme: https://visme.co/blog/logo-samples/

Honey I Shrunk Lexi

This week I used Photoshop to have a little fun making a movie poster. I used images that I have taken, which include my daughter Lexi, fields of flowers, and butterflies from the exhibit at the Bronx Zoo. I mimicked the bottom of the poster off of a recent movie poster to give it an authentic feel.

I created a perception of depth, enlarging the butterfly in the foreground in comparison to the much smaller image of Lexi. I used a picture of her when she was younger and laughing because she would be in heaven if she were able to hang out with butterflies while we found a way to bring her back to full size. (kidding) The second butterfly is in the background to give the appearance of different sizes among the three dominant objects.

I used an image of grass placed in front of Lexi to emphasize her reduced height. Next, I played with shadows and the shading of the images to make them all appear to be part of the same scene. I used my name as the top headline mimicking other posters with the star actor’s name at the top.

This project was a lot of fun! Coincidently once I completed this, I saw there is a new “Honey I Shrunk the Kids” movie coming out! I hope you enjoyed this fictional movie poster.

Fake Media – Our Reality

Within minutes of a national tragedy, your social media will overflow with stories about what has happened. News outlets are quick to report, but is it always the truth? False statements tend to sound more shocking and therefore catch your attention. These false statements can feed into conspiracy theories that take over the searches when trying to find the truth.

“It took the truth about six times as long as falsehood to reach 1,500 people.” 

The truth is, we click on what grabs our attention. The stories, whether false or true, are passed around on social media through shares and posts. Now imagine those shares are a video of a leader doing the unthinkable. The amount of traffic to the video will increase because it is surprising. But it’s been doctored from the original. What are you to believe?

The technology that we have available today provides a user the tools to take a few hours of recorded audio and alter it to have the person say something completely different. With a few hundred images of a person, technology allows you to synthesize a video of that person’s face on another body with expressions and movements. Researchers at the University of Washington used artificial intelligence to create Obama moving his mouth when he speaks. Their technique allowed them to put any words into their synthetic Barack Obama’s mouth. Although this technology is impressive, the fact that it is so realistic is terrifying.

According to Hany Farid, “We are rapidly heading toward a dystopian digital future in which self-organizing online communities will be able to create and disseminate their world of pseudo-facts and pseudo-reality.” We are already starting to see this happen within social media with the spread of fake news. For example, a false image of Parkland shooting survivor Emma Gonzalez ripping up the constitution was shared even after proving it was fake. The original photo was of her ripping up a shooting target. This image is still being shared and adds to the fire of conspiracy theories that the students are “paid actors.”

Another example of fake news appeared in the mass shooting at Sandy Hook Elementary School. Posts on social media used images of Carlee Soto, sister of the slain teacher Vicki Soto, crying when she first learned of her sister’s passing. The conspiracy theory was that Carlee Soto was a “crisis actor,” whose picture appears in other mass shootings. Although the theory is discredited, the image can still be viewed on social media today.

With the volatile political, environmental, and social climate we live in today, it’s hard to know what is the truth. Both political parties blame the other party for fake news; several conspiracy theories thrive off of spreading the shocking vs. fact. We are left trying to find the truth on our own.

Many news media are failing to check the accuracy and credibility of its sources thoroughly. It’s almost as though we are reading the headlines of the Inquirer at the grocery store check-out when skimming through our social media feeds. With the recent investigations by Congress and the FBI into investigating evidence that Russian spread false reports to change the election, will there be laws created to protect us going forward?

Fake news is a daily word when reading top reports, remember to try to read credible sources; verify and cross-check multiple sources to find your truth.

 

 

Resources:

Mezzofiore, Gianluca. (2018, March 26). No, Emma Gonzalez did not tear up a photo of the Constitution. Retrieved from cnn.com: https://www.cnn.com/2018/03/26/us/emma-gonzalez-photo-doctored-trnd/index.html

Snow, Shane. (2012, August 1). Contently’s Code of Ethics for Journalism and Content Marketing. Retrieved from contently.com: https://contently.com/2012/08/01/ethics/

Hodkinson, Matt. (n.d.). Content Marketing is Dead … and Controversy Gets Clicks. Retrieved from influenceagents.com: https://www.influenceagents.com/brain-juice/content-marketing-is-dead-and-controversy-gets-clicks

Farid, Hany. (2018, September 25). The dystopian digital future of fake media. Retrieved from qz.com: https://qz.com/1383619/the-dystopian-digital-future-of-fake-media/

YouTube. (2017, July 19). Fake Obama created using AI video tool – BBC News. Retrieved from youtube.com: https://www.youtube.com/watch?v=AmUC4m6w1wo#action=share

Fox, Maggie. (2018, March 8). Fake News: Lies spread faster on social media than truth does. Retrieved from nbcnews.com: https://www.nbcnews.com/health/health-news/fake-news-lies-spread-faster-social-media-truth-does-n854896

Osberg, Molly. (2018, February 26). The ‘Crisis Actor’ Conspiracy Theory Is a New Twist on an Old American Delusion. Retrieved from splinternews.com: https://splinternews.com/the-crisis-actor-conspiracy-theory-is-a-new-twist-on-an-1823325917

 

 

 

How I See Color

Color is all around us. I love color, and you can see what colors I am drawn to by looking through my home and the clothes I buy. We all have specific color palettes that appeal to us and impact how we feel. There are a lot of emotional and psychological impacts on us when viewing different colors in nature, our surroundings, and in design. For example, a turquoise color may make you feel calm as this is a color found in nature that brings the feeling of peace.

Milton Glaser is a prominent twentieth century American graphic designer. I was fortunate enough to view his original work at MoMA and was intrigued by his use of color to impact the design. He is famously known for designing the most recognized logo, I ♥ NY. Some of his other notable works include the bullet logo for DC Comics and the Bob Dylan poster. Additionally, he founded Milton Glaser, Inc., which is still producing incredible art.

 

 

This week using Glaser as inspiration, I created a silhouette from an image of my son in Photoshop. I took this image into Illustrator, and after making it a vector artwork using the image trace tool, I created colorful shapes to make the hair on the image. My son is full of energy and always laughing. If I were to put a color to his personality, it would be bright and loud with the feeling of constant movement. To deliver the bold brightness I was looking for, I decided to use cool colors. I grouped the objects of the hair and created two additional layers, which I colored differently.

“Color is a power which directly influences the soul.”

― Wassily Kandinsky

The first Illustration is using primary colors RYB of red, yellow, and blue. It also incorporates the three secondary shades of green, orange, and purple. The use of these colors is complementary, meaning they oppose each other on the color wheel like red and green.

For the second Illustration, I used deeper colors of turquoise to show a quieter version of his personality. By choosing a bright hue of turquoise and adjusting the intensity to find similar complementing tones, I was able to stay within the same color family.

And finally, in the third Illustration, I brought back the primary and secondary colors but also incorporated the blues green tones of the second version. I wanted to capture all his moods in the span of an afternoon — with the highs, lows, and taking on the world attitude he has every day.

In Color Psychology in Marketing,

Lindsay Kolowich says, “Humans are visual creatures.” This statement is evident in the way we react to color in marketing and our surroundings. When I showed the design I had made to my son, he lit up and yelled, “I look like a ROCK STAR!” For me, I saw his personality, and for him, he saw something much larger than I imagined. He saw rainbows and electricity that yelled superstar, where I saw him in colors as my bundle of chaos and love that starts and ends my days.

Now take a look at the colors around you and see what emotions they evoke within you.

 

Resources:

Baker, Justin. (4 December 2007.) The Ultimate UX Guide to Color Design. Retrieved from Muzli: https://medium.muz.li/the-ultimate-ux-guide-to-color-design-4d0a18a706ed

Kolowich, Lindsay. (3 November 2017.) Color Psychology in Marketing [Infographic]. Retrieved from Hubspot: https://blog.hubspot.com/marketing/psychology-of-color

Landa, R. (2019). Graphic design solutions. Boston, MA: Cengage.

 

 

Content Strategy Report – The Motor Neurone Disease Association

Presenting a Content Strategy report to key stakeholders within an organization is important to emphasize how the content is telling the story of the organization and how it is meeting its goals. The report will analyze the current content, how it can be improved, establish key business goals as well as the KPIs to achieve those business goals.

This week I produced a Content Strategy Report for The Motor Neurone Disease Association. The conclusion I came to was that MDNA has a robust website in place that can continue to grow and engage users. This growth will help the organization meet its business goals by focusing on the Core Strategy Statement and the Messaging Framework. If they continue to update and refresh content frequently, they will entice users to return often to review new research and events.

Business goals:

Business Goal #1: Increase funds and generate income through donations to help support those affected by MND and their caregivers.
Business Goal #2: Build effective partnerships to help increase awareness and increase donations.
Business Goal #3: Proactively share knowledge and information to members to learn what is available to them for support of MND.

Core Strategy Statement:

To increase the number of people who donate and engage with the organization, we will provide research, stats, engaging content to inspire people to volunteer and be involved with those affected by MND.

By becoming an expert in MND through research and funding, MNDA will continue to engage with the community, the patients, and those affected by the disease. It is essential to highlight on the site’s home page outreach programs that promote a strong call to action and provide stats to back the research obtained through MNDA funding.

Review report

Kindness Matters

Life today is hectic and demands our total attention. Not every day is full of happiness; we all have our struggles big or small. We tend to become consumed in our everyday routines and forget to see others around us. Kindness can be an interaction with an animal, saying hello to a stranger or simply picking up the trash that fell from someone’s pocket. Kindness is simple yet powerful. One act of kindness every day not only helps others; it will help you feel better as well.

“Be nice to each other. It’s really all that matters.”

– Dawn Hochsprung, principal of Sandy Hook Elementary

A kind word, a smile, opening a door or helping someone carry a heavy item can all be acts of kindness. The incredible thing is — kindness is contagious. Try it! If you smile at someone, they will smile back and carry it forward by smiling at someone else. Your one act of kindness can snowball into several acts of kindness around you.

Typography design

This week I have taken the word “Kindness,” and with the assistance of Illustrator, I have used design to show what kindness means to me. I displayed feelings within the work by using color and design elements. KIND is empathy, as this is the root of KINDNESS. I placed a heart above the “I” to represent love and the “period” after KINDNESS to emphasize — it’s that simple. Kindness, period. You require nothing else except your simple act of kindness every day.

According to Landa, “type should always be an active contributor and can, in fact, express the entire message.” This statement summarizes my work this week in typography design. I am using type as the basis for my design to invoke the feeling of happiness, love, and the meaning of kindness in one image. I kept in mind readability when choosing colors and emphasis when selecting the heavy block letters in “KIND” using the font Myriad Pro. For the “ness” I used a script font called Serenity
from dafont, which brought softness to the design. The heart I drew within Illustrator to give a handwriting touch to it. The typefaces were chosen for contrast and differentiation while limiting the design to two fonts.

The word kindness brings meaning and provokes thought in the reader. By using a sans serif and script font, I have created an emphasis on KIND while bringing in the script font for “ness” to display a distinction between KIND and KINDness. I chose to keep it on a white canvas because the word is the design, and I did not want to take away from the impact. For this design, the type is the image and the message.

Have fun

Typography, when well crafted, can take an ordinary design and make it extraordinary. The more you play around with typography, the more you will realize the powerful impact that words achieve within your design. It’s fascinating and one of my favorite elements of design. Pay attention to the details in your favorite designs to pick out the typography impact. Have fun exploring the world of typography; you may see things a little differently now.

 

 

Resources:

Landa, R. (2019). Graphic design solutions. Australia: Cengage.

 

Understanding Content Needs

Sunday, February 2, 2020, is Super Bowl. The day of not only football but the release of highly anticipated commercials; these commercials will play an integral role in ad campaigns and emails in the following days. The ads look flawless and smooth, and they have been planning for months with endless revisions to their content, content strategy, and content marketing. You may be wondering why all this planning goes into a few seconds of a commercial. This planning determines the message content that they are trying to push out to their audience; and how the content in their social, print, and email campaigns will reach you in the coming days. The content may, if they have done their work well, influence your decisions on how you interact with their product. It may also not do well after all the planning and work that went into executing. In this case, they will need to revisit their planning, determine where they can adjust the strategy and push the revised content out again.

There is one advertisement that amazes me to this day. I don’t like soda very much, and I particularly do not like Pepsi. But the content in their ads, using just a few words, will trigger the sound of pouring fizzling soda, the sweetness of it on a summer day, that I immediately crave their drink. It could be as simple as hearing “ahhh” or “refreshing.” Yet through my studies and research, I know that these few words are not what worked. It was the overall campaign, the banners, and adverts I have seen on billboards or magazines that triggered my response. They spend countless hours and dollars to create campaigns that speak to their audience, build brand awareness, and increase their profit. They start with a content strategy.

Content strategy

Wikipedia defines content strategy as “… the planning, development, and management of content – written or in other media”. It is the master plan or blueprint that details how content will be used to achieve business goals. The content strategy should answer the following questions:

• Why is the content being published?
• Where is the content being published?
• Who is the audience, and what are we trying to achieve?
• What is the schedule or timeline?
• How should you organize and structure your content?
• How does your audience find and interact with your content?

Answering these questions requires research and thoughtful strategic planning. With the content strategy, you will precisely know what, why, and how your business is planning on using content to accomplish their goals. The same content and content strategy should not be reused year to year; you should revise them to fit the changing needs of your audience. Doing so will ensure you continue to create a successful campaign.

Content marketing

Content marketing is a method used to attract and retain customers by creating and delivering relevant, meaningful content. It’s a combination of sales and organic marketing, all in one. In content marketing, you select specific audiences that you want to influence. Then you create content to guide their behavior toward a conversion result. A few examples of content marketing pieces are:

• Blog posts
• White papers or case studies
• Social media marketing
• SEO

The difference

A good content marketing strategy can only work if there is a strong content strategy as the foundation. Content strategy answers these questions: what are you trying to achieve, how should you organize and structure your content, and where should you publish your content. This foundation helps to align branding, messaging, and all aspects of content marketing to the overall content goals of your company before you begin to market it actively. Just as we need water, food, and sleep to thrive, you need content, content strategy, and content marketing to achieve a successful campaign.

Make sure you have a solid content strategy as your foundation before working through your content marketing strategy. In doing this, your content will have purpose and produce measurable results.

 

 

 

References:

i-scoop. (n.d.). Content marketing: defining a content marketing strategy. Retrieved from i-scoop.eu: https://www.i-scoop.eu/content-marketing/defining-content-marketing-strategy/

Content Marketing Institute. (n.d.). Developing a Content Marketing Strategy. Retrieved from contentmarketinginstitute.com: https://contentmarketinginstitute.com/developing-a-strategy/