Category Archives: design

RWD2014 || Year of the Mobile

Responsive web design is extremely critical in today’s world; it is necessary for survival among the fittest. No doubt mobile browsing has blown up and continues to grow exponentially. There are times where no matter how good a company’s web site looks on the monitor, if it is not “mobile friendly” and the user gets a poor experience, well, the site might as well be deemed no good at all. On a personal level, I can relate to the importance of mobile browsing. For example, after giving someone my business card usually one of the first things they do is pull out there iPhone, and look at my portfolio. If my personal site was not built with a responsiveness to adapt to different media devices and viewports such as the iPhone; and the viewer looking at my work does not have a good experience, this could jeopardize the integrity of my work and in turn, possibly be loosing future customers and contacts. I would like to quote Andy Clarke, web designer, author and founder of Stuff and Nonesense. Andy says, “Anything that’s fixed and unresponsive isn’t web design anymore, it’s something else. if you don’t embrace the inherent fluidity of the web, you are not a web designer, you’re something else. Web design is responsive design. Responsive Web Design is web design, done right”…

Instagram is King

People remember 20% of what they read and 80% of what they see. Research shows that Instagram engagement is 58 times higher per follower than Facebook. Therefore, if your brand is looking for more social engagement, you should not underestimate Instagram’s marketing potential.
Insta_graph
A couple ways to optimize Instagram is first by implementing the basics. Whether you already have an account or are just setting one up, you may run into the problem of your company name already being taken. This is where it is important that you are implementing your company logo as your profile picture for all social media across the board. Consistency in social media will help people quickly recognize your content wherever they may be. Your Instagram bio should express your company’s personality in a brief description of what your company does. It would also be beneficial for you to include a link to your website so people can find you on the Internet.

The best part of Instagram is posting attractive photos, so I encourage you to get creative with promoting your product. Do not post basic product shots with an interesting filter. That is not likely to draw attention for ‘likes’ or more ‘followers.’ Your posts should look “branded” in the sense that they are consistent with the online voice you are building behind your company. It does not always have to be about selling something. I encourage you to share behind-the-scenes photos—maybe a company event or a typical day in the office— both are interesting and make you more accessible to your audience. Don’t forget, video is fair game too for this; more behind-the-scenes action, showing reactions to your product or funny promotions, all help bring your brand to life on Instagram.
insta

Brand Rejuvenation

A brand makeover has to potential to completely rejuvenate a dying brand. If you are attempting a makeover, make it noticeable. The reason you are rebranding is to be noticed, so commit to the change in your brand. Any companies’ makeover should include a visual component to help the businesses re-establish the lines of communication with customers. Whether that’s new packaging or a redesigned logo, these tools have the potential to engage audiences to rediscover the brand.

In making your first steps at rebranding, the first thing to do is have your team go back and identify your existing audience, and then identify your new audience. If there is no difference between your current and desired audience then find where the miscommunication lies—failing to focus on a clear, identifiable audience leaves the brand at risk of trying to do too much and often backfires into reaching no one.

The benefits of brand rejuvenation entail the potential opportunity to communicate the shift in business model, as well as allowing you to transform your brand into new markets and audiences. Rebranding allows you to update the company’s mission and vision, which will ultimately re-engage employees as well. The ultimate goal in rebranding is to strengthen your brand’s messaging and allow it to evolve. When rebranding it is important to stay true to the brand’s mission as it should support your core message while connecting with your established audience in a new and authentic way.

Q&A with a UI/UX Designer

For this weeks blog I decided to interview a friend of mine and professional graphic/web designer. 

 Ryan Canfield is UI/UX designer & front end developer at Synapse Studios specializing in web-based javascript applications.


What do you think is one the most important thing as a web designer?   Thinking past static design & layout to consider the web at all screen sizes.

What about the creative process?   We use a repeatable, successful pattern. It starts with sketching, wire framing, mock ups, rapid prototyping and then development .

 How important is the creative process to you?   Very! Synapse didn’t have designers a few years back, it was developers doing front end. Having designers makes a huge difference in the usability of web applications.  Being classically trained as a graphic designer helps me daily in web design. I use the principles of design, like color theory, rhythm, balance etc. these fundamentals are paramount!

What is your outlook on simplicity?   Simplicity depends on necessity. That is one thing designers forget with the web design and graphic design in general. They feel like they need to fill all the space like it is some “hole to fill” esp. junior designers. Question the necessity of everything you include in the design and then question whether is it presented in the best way possible.

What about the the placement of things like “call to actions?”   You want to make sure your main call to action is available and accessible almost anywhere.  If you’re delivering information you want it at the end of that information. It should be the most prominent path for a user to take.

What do you think about traditional web placement i.e. headers etc. and switching the placement of them up, in non traditional ways?   It really depends on the users of the site or app. Sites that have the same user base are better candidates than sites that have mostly unique visitors. Additionally, younger, more techie users are going to figure out the placement of things and are less likely to get frustrated. With users that struggle you probably want a more conservative layout. You have to determine purpose of the site and the target audience. A marketing site is going to be selling products/services, reference website will be delivering information etc.

Any input for junior web designer?   Mobile first approach, responsive design and write clean code!   

 

The Psychology of Color

The psychology of color is one of the most interesting and controversial aspects of marketing. There has always been debate on the importance of color in marketing and its effect on persuasion. According to a study titled, The Impact of Color in Marketing, Satyendra Singh describes that the typical person makes up their mind within 90 seconds of their initial interaction with either people or products. She also claims that about 62-90 percent of the assessment is based on colors alone.

It is believed that the most effective colors for advertising are those that stimulate the viewer’s senses. Warm colors, such as red and yellow, are known to make people feel comfortable, and encourage them to linger—a reason why many restaurants primarily use warm color schemes. Nearly all logos, advertisements, and menus of fast food chains feature reds, oranges, and yellows. This is because warm colors are some of the best colors for advertising food, as they are known to increase the appetite, which may translate to higher revenue.

Cool colors on the other hand, like blues and greens, are very calming colors often associated with knowledge and understanding—why many businesses tend to use a cool color pallet. Darker shades of blue are known to indicate dependability and integrity making it a good color for business ads and logos; you will often notice financial companies incorporating dark blue. Shades of light blue seem to be very effective for advertising over-the-counter medicines and other health products. It is believed that light blue has a calming effect on people and it is most often associated with health and healing.

One last color pallet to point out is black and white. People often underestimate the power of the simplicity behind a black and white color scheme. According to research, these are two of the best colors for advertising because they create a strong contrast when paired together. Black and white often indicate opposites—white associated with purity and freedom, while black is interpreted as elegant, powerful, and/or evil. However, when used together, black and white can give off a highly professional feel for the brand.
color-emotion

world wide web banner

A web sites web banner is by far one of the most important area of a site. It is what people see first,  this is where the viewer makes initial visual contact and gets an overall feel and vibe of the site, and ultimately decides if they want to continue on or not. I can not tell you how many web sites I have left due to the  fact they had a weak header. Even though it is the content that matters in todays world people judge books by there covers, and the web banner is the cover. I like this piece of information I found online, it is from a graphic designer and multiple business owner named Dawn Papandrea-Khan. She states, “usually when we visit a website or blog, we can get a feel for what the site represents in only a few seconds. This is the reason why it is even more important to focus on making the right first impression through a custom header graphic.”

As a designer, there are a few key aspects and bits of information I think the header should contain. The company, the product etc. Which brings me to my next point I found in an online blog talking about this exact topic. This is from boostability.com the importance of a header. 

1. Who are you? (You would be amazed how many websites make their visitors dig around to find out the name of the company!)

2. What do you do? (Again, the number of visitors who are forced to assume your site sells a product rather than just talks about it is ridiculous. Be clear!)

3. Why should I buy from you, not the other guy?

The web is littered with garbage, visual noise and a bunch of sites that house web banners that all look the same. It is up to me as the designer to produce clean, visually interesting web banners that represents the sites overall demeanor and entice people to stay on the site and explore further. It is also up to me to find new and exciting ways to display the content  so we can separate ourselves from the crowd.   Also, I feel like in design I have to take risks. I have to try new and “edgy” things and think outside the normal design box that I often get tunnel visioned in. I would also like to explore maybe trying a banner with out the traditional rectangle box, maybe another shape  or placement? That is something definitely for the sketchbook and some thought.

The Contact Form

The goal of a landing page is to collect information from site visitors with the hope that they will be converted into a customer. From a business standpoint, we would like as much information as possible from these potentials. However, the average site visitor wants to spend as little time as possible filling out the contact form to get access to the offer they’re trying to receive.

In an article from HubSpot’s Social Media Scientist, Dan Zarella, looks at which types of form fields lower or increase customer conversation rate. From his studies we are able to analyze the best approach to a successful contact form.

convorates_1

In Zarella’s studies, he found that as the number of form fields increases, conversation rates of customers slightly decrease.

covorates_2

This graph represents as the number of single line text fields increase, there is a small decrease in conversation rate.

convorate_3

This next graph shows that multiple text areas have a noticeably shrinking effect on conversation rate.

convorate_4

Lastly, this graph proves that multiple drop down fields, can lower your companies conversation rate.

We can infer from Zarella’s study that the fewer form fields implemented on your landing page will bring you greater conversation feedback. In fact, conversation rate improves by almost half when the number of form fields are reduced from four fields to three- that is a 50% increase!

A few small details that will keep your contact form most efficient is by reducing all friction. The more friction you can eliminate from the user experience, the more your conversation rate will increase. One way to do this is by creating trust on your page. Reconsider the information you are requesting in your form fields; if you do not need it right away, get it from the user later. Another thing you might want to consider is providing the user with help text. By utilizing help text, you are telling the customer exactly how to fill out the form by eliminating any extra thinking on their end. Last but not least, don’t be afraid to design your contact form; it should be memorable to the customer, as well as clean, simple and efficient.

Sketchy Situations


To me, one of the most important parts of the creative process is sketching. Usually coming right after the initial brainstorming, it is essential for to me to start getting ideas out of my head and onto the paper. This part of the creative process is critical, and is often overlooked or not even used at all. For me, to really explore layout possibilities and new areas it begins with sketching.

Sketching can vary from project to project. For a logo design I might start 45 minutes of straight sketching, with out erasing not making it look pretty just getting ideas out of my head asketching web banner layoutnd onto paper. From there I would pick maybe 3-5 of those and focus on those, then narrow those down making visual decisions, repeating this process.

 It helps me to understand and study the space before I go into the computer. It helps to find new positions, things that are static and centered are predictable and often visually uninteresting, (there are times when static positioning is effective, situation dictates.) Basically when I sketch, I am not going into the design “blindfolded” or rolling with the punches that technology throws at me. I need a foundation, and that is sketching, you can’t build a house with out a foundation!

 

Effective Design: The Grid System

Design_meme

Web design is much more than how a site might look in the eye of the viewer. An effective website is primarily focused on form and function. As a designer, it is important to not get caught up in the look of the site, but to go back to the skeleton and focus on the layout of the content you are working with. It does not matter how talented you are in Photoshop and Illustrator, if your content is randomly scattered along the page, the appearance is messy, unorganized, and difficult to navigate, resulting in sub-optimal Google Analytics.

This is where a grid system is very effective. A grid system is used to arrange content into a clean, organized structure by implementing horizontal and vertical lines. By arranging content in consistent way like this, the presentation is much more readable, making it easy for the viewer to absorb.

A few things to keep in mind when designing your page layout is the “F” pattern design. Eye tracking studies have identified that when people enter a website, they quickly scan the page in an “F” shape pattern; left to right, and top to bottom. This is evident that your design must have an effective flow line. A flow line typically enters the page from the top left-hand corner, carrying the eye horizontally across the page. This is the base of your structure for you to impose starting and stopping points when aligning your text and images.

Your grid should organize your graphic elements in relation to the page, as well as each other. Whether you decide to implement a three-column, four-column, or six-column grid—commit to it. Consistency is the most important thing as it will only help you later when applying your content to the page.

You Are The Company You Keep

stock_happyclientblurb

Working in a successful company is more than being good at what you do. Competition for work is high these days and to be the most successful you must aim at keeping your clients happy. It is a matter of both attracting and retaining clients.

In doing so, you must truly work at your networking skills. Remember to always be open and available to your clients. If they call you to ask a question, don’t just brush them off quickly but take the time to explain the answer. Your time is valuable, but so is keeping your client base happy. Do not charge them for your advice and if you do not know the answer to a question, find someone who does. Referrals are your best friend. They not only please your client, but it builds up your own credibility. By referring a client to someone else in your network it makes the client believe that you really know the industry.

On the other end of success you now just have to be good at what you do. Ask them plenty of questions and listen to the answers. Most people are not used to working with designers and often do not know what they want. Always provide updates for the client, even if they do not ask. The clients like to see what is going on, so show them examples and get their feedback.

My last tip of advice would simply be to be nice and remember to love their brand as much as they do. They need to see someone believe in what their doing and reassure them that they are making the right moves. People like to work with pleasant people; I believe that good energy is everything in the workplace and positive vibes go a long way with the projected ups and downs of a project. Therefore, if you aim to be energetic and polite in your work, you should always get the repeated business you deserve.