We're Happier Together! NYC Devshop has joined the HappyFunCorp family! Learn more!

Devshop

Devshop Blog

21 results returned for "Design"

Tuesday, Jan 24th, 2017

Lizzie Healy

Lizzie
It's Hip to Write Script

There are countless design programs available for designers (and non-designers) to learn, each with unique tricks and tips. In my early stages of learning Adobe Photoshop, I spent roughly five hours watching and attempting to create coffee beans. I then Googled "PNG Coffee Beans" and clicked copy and paste. It got the job done.

Creatives express their design chops in many ways, and while they may excel at drawing or calligraphy, they may struggle with adapting to the scores of options available with design programs. You could take the time to watch one of the many video tutorials online walking you through each step, or you could learn a few easy hacks to get you through those beginning stages. Because sometimes you just need to put pen to paper, we're walking you through how to convert your hand drawn sketches, letters, and images into an SVG.

What the heck is an SVG you ask? An SVG stands for Scalable Vector Graphics. Gibberish, I know. Google provides equally gibberish answers. In my own plain language definition, it is an image that does not have a background, enabling you to place it as a layer on top of other images without the lovely white square background. This is helpful for things like logos and icons because they can be placed on a lot of different images without interrupting the design.

So here it is:

Step 1: Sketch It

Draw your design by hand, with pen and paper. It helps to use fat markers like Sharpies to create a starker contrast. Try to use white paper and a black pen because converting an image that uses black vs. white will be much more successful. It also helps to tend towards thicker lines instead of thinner, as the converter will pick these up more easily.

Step 2: Snap It

Take a picture of your sketched image. Avoid shadows on the paper, again think CONTRAST.

Step 3: Upload It

Upload the image to an SVG converter. There are a lot of sites that do this, but we used http://image.online-convert.com/convert-to-svg (because it came up first when we Googled it).

Step 4: Convert It

If you are using a converter that gives you the option to choose color, select grey or monochrome. Click "Convert File".

Step 5: Open It

Save the file and open it in a design program like Adobe Photoshop. It's actually that simple.

Wednesday, Nov 16th, 2016

Lizzie Healy

Lizzie
5 Design Disasters & How To Avoid Them

Designers do not get enough credit for their work. It takes research, restraint, and ultimately a good eye. Any average person may look at a website and think, "Hey, I can do that!" Setting to work building your website from a source bursting with templates and options, you end up falling prey to the many pitfalls of poor web design. You don't need to use every plugin option. Trendy isn't always the best answer. And simple elements may get overlooked without planning. Below, we take a closer look at the problems that many DIY web designers encounter and how you can fix them.

Too Many Bells & Whistles
The Problem: You want your users to know what your site offers, what they can find there, create value, direct where to go next, build SEO into your content, reinforce your Adwords, and tell a story about your brand. You want to have it all! Well, you can't. Not on your homepage at least.
The Solution: Less really is more when it comes to your homepage. Slow your roll, and just include the intuitive elements that will lead visitors to the next, more informative sections. Don't get me wrong, its important to do all of these things on your website. But for the homepage, you only have a few lines of text and a simple graphic to do so. Throw the kitchen sink at the visitor and they won't know where to look, rendering all that "useful information" useless.

Not Enough Bells & Whistles
The Problem: In your scramble to spin up a website, you forgot to include some key elements to make your users experience better. No search bar, no call to actions, and an unorganized content layout create a poor experience for visitors.
The Solution: A search bar should be easily found on your web pages. It saves visitors time and simplifies navigation. Keep your pages simple enough to quickly scan, with a clear hierarchy to guide your eyes through the page. Using call to action buttons to direct visitors to the next sections are invaluable. Planning this before starting to design is a key to success.

Endless Scrolling
The Problem: You designed a stunning website...on desktop. You completely forgot that that paragraph of text will extend to the length of two IPhones when viewed on mobile. Who is going to read all that?
The Solution: To create an effective responsive design, or web design that has been optimized for mobile, ensure that the horizontal grids created on your web page can collapse into vertical lists when a user is operating on a mobile device. Grouping or reorganizing content can help prevent the endless scroll that results from poor designs.

Hiding Contact Info
The Problem: Failing to put a phone number, address, email, or contact information in several, easy to find locations. You put all that time and energy into trying to direct users to your website, and then once they got there, you never included how they can actually reach your business!
The Solution: Your business should be everybody's business. Providing multiple ways that users can contact you caters to their specific preferences. Make sure that this information is on every page.

Being Antisocial
The Problem: Forgetting to link your social network sites. This is a HUGE bugaboo for me. I once received an email blast from a company with no Instagram link at the bottom. Curious as to why such an established company didn't have an Instagram page, I went searching for it. It was glorious. And I almost missed out on seeing it because of an oversight! (Yes, I did email them back and tell them it was missing. Marketing looking out for marketing).
The Solution: Many people, like myself, go searching for more than just the basic information listed on a website. We want the story and the background that makes a brand what it is. Forgetting to link your social media is a major fail.

Thursday, Nov 10th, 2016

Lizzie Healy

Lizzie
Mo'bile Mo' Problems

When creating a website, every aspect is carefully thought through to determine what will yield the most success. Every button, color, and action is analyzed and carefully chosen, but the most irreplaceable element of a website is it's responsiveness. A responsive web design allows a site's layout to change to accommodate the screen it's being viewed on, and without it, your carefully chosen design elements will be useless. The importance of this cannot be understated, as customers are increasingly reaching business websites from mobile and tablet devices in addition to their computers. See for yourself how users are viewing your website with some statistics about mobile in Devshop's Mo'bile Mo' Problems infographic.

Tuesday, Oct 4th, 2016

Jesse Mauro

Jm
Bullet Proof Emails

The evolution of web and mobile app development has progressed quickly in the last couple of years, let alone the last decade. With new technologies being released what seems like monthly, it's hard to comprehend that an important aspect of a company's marketing strategy involves web practices that have been frowned upon for 15 years. Unlike prehistoric web browsers who stayed several years past their welcome (Rest in Pieces, Internet Explorer), eventually their time was up, leaving the door open for their shiny, newer model offspring. Unfortunately, this has not been the case for email clients. Microsoft Outlook 2013 is incapable of reading even the most basic of CSS capabilities. In other words: CSS, a language created in 1996, is virtually useless in an email client created 3 years ago. Having recently completed an email revamp for Tumblr's marketing and transactional campaigns, I've picked up on a few tricks along the way.

Importance

What's the importance of proper email development? The answer varies, but let's start with the simplest: there is none. This is the simplest answer, but not the best. Sure, you can code your emails in the trendiest CSS3 techniques. You can design your templates with rounded corners, and faded backgrounds, and only worry about the new school customers and clients who've adapted to recent mail options. The best answer to the question of email importance is: it should matter. For starters, sending out email templates that don't work on all devices and platforms makes your company look unprofessional. If you're a small company, no different from your actual product or website, a poorly designed/developed email may sway a user to pick your competitor over you. If you're a large company, it can give the impression that you don't care about your users experience or don't care to make an effort now that they are clients. However it may be perceived, there's no reason to risk misunderstandings for this simple reason: developing email templates that work for the past doesn't compromise those of the present.

Design

Let's start with the design. Since the late 2000s (regrettable) skeuomorphic trend faded, and simplistic "flat" design took over, email designs should fall inline with the lack of development capabilities. Keep your templates simple: avoid multiple columns with rows of images and backgrounds, if possible. If you're promoting news articles or a blog, show a few quick samples with a "Call to Action" back to your site for the full experience. Reading in a restricted email window is not agreeable anyways. The information that you want your users to see should be front and center, with clear actionable requests. Watch your image to text ratio. Too many images will often be flagged as spam by your user's email client. Another tip: The font-face attribute only works in Apple Mail 6.5 and ipad/iphone iOS 7 so forget about the fancy typefaces used in your brand guide. And I know what you're going to say, "but i've seen emails from companies wi"...they're images. If your image to text ratio is low, sure, go for it. Otherwise, choose a computer safe Font-Family that resembles your brand. Less is more.

Development

Once you have your beautiful, simple email design, it's time to build. A few notes:

1. The most reliable way to assure your email structure will work across all platforms is to use tables. Tables nested inside of tables to be exact. Believe me, I know how bad that sounds. But it's the only way. The good news is, other than making your skin crawl, using tables will still render as expected in newer browsers/clients. Here's an example of a template with a header, footer, and two column body:


<!-- *Note* I'm applying fail safe attributes both as table attributes and inline css styling -->
<table align="center" cellpadding="0" cellspacing="0" width="600" style="width:600px;margin:auto:padding:0;">
<tr>
<td>
<!-- header -->
<p style="font-family:Arial,sans-serif;font-size:18px;color:#000000;font-weight:bold">Header</p>
</td>
</tr>
<tr>
<td>
<!-- *Note* since we want a two column body we need to add a nested table -->
<table align="center" cellpadding="0" cellspacing="0" width="100%" style="width:100%;margin:0:padding:0;">
<tr>
<td>
<!-- left column content -->
</td>
<td>
<!--right column content -->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- footer -->
<p style="font-family:Arial,sans-serif;font-size:18px;color:#000000;font-weight:bold">footer</p>
</td>
</tr>
</table>

2. Previous versions of Microsoft Outlook (remember the aforementioned 2013 version?) will not allow the use of padding, height, width and other basic CSS properties on any p, a, div or img tags. This is a huge issue, but there is a work around. Things like padding, height, and border-radius, (the last being for the email clients that will accept this) can be applied to the table cell itself. If you wanted to style a link to look like a button, you could do the following:


<!-- *Note* some email clients won't except the three digit hex shortcut: #000. To be on the safe side write all 6 numbers -->
<td bgColor="#00000" style="padding:20px;-webkit-border-radius:3px;-moz-border-radius:3px:border-radius:3px;">
<!-- *Note* since padding and height applied to links will only work on certain email clients you can use break tags to create the same effect -->
<a href="my-link.com" target="_blank">
</br>
Click Here
<br/><br/>
</a>
</td>

3. There are a number of email clients that won't read CSS defined in the <head> section of your template. Do you know what that means? Yep, to be on the safe side you need to use inline styling and inline styling only. Demonstration:


<p style="font-size:14;color:#000;text-align:center;">how much do you love this?</p>

Closing The Gap

There's no reason your email can't look the way you intended it to across all platforms and devices. You can use online services like Litmus or Email on Acid to view renderings of your email templates across any email client of your choosing. While the results are not 100% accurate, they're usually very close with some small discrepancies. Upload your HTML, and the results will output as static images in the shell of their respective email client. Using these tools and tips, you can send out perfectly crafted marketing or promotional emails with no viewing issues. Happy coding.

Tuesday, Sep 27th, 2016

Andrea Torres

Andrea
In The Mood to Design

Getting in the mood to begin a creative process can be hard. You have a million ideas running through your head, and you need to narrow them down to create something concrete. Staying focused is key, especially when you are in the early stages of a web design project.

The process of researching and collecting design references is an important part of a collaborative creative process.

To get myself out of my head and into the heart of the design, I start with some form of a moodboard or style tile.

A moodboard is a collection of like minded design examples, organized to showcase a set goal or task. It creates the tone of the project, guides the team throughout the process, and supports those who are just joining in or working with a brand they are unfamiliar with.

A moodboard paints the vision you may see for the project, while bridging the gap to what goals the client wants to achieve for their audience. It's often difficult to see the wireframes or blueprints of a website without getting overwhelmed by additional details. Using a moodboard helps client and designer move forward with the design stages because they both have a visual understanding and can see the story of how this creative process came to be.

Personally, when I begin gathering inspiration for a project, I look for some of the following elements that relate to the product or design I'm creating:
1. Typography
2. Iconography
3. Color
4. Imagery
5. Patterns/textures

Once you have gathered all your elements, your next step should be to get organized. This is especially necessary if you are presenting to your clients. This will ensure you nailed all your key points and must haves for your users. It can also support you in speeding through your workflow.

The benefit of moodboarding is that the ideas are free flowing. Don't be afraid to take a risk. At this point, it's not the final design, so if you and the client don't see eye to eye they can be altered easily. This saves you time and money on your designs.

As the client begins to have an understanding of the theme, and the concept gets approved, your moodboard now becomes the foundation to your brand guide and projects goals. This process helps avoid confusion and surprises as you move through the design process. This way, everyone is a little less moody!

There are a wide variety of tools one can use to create moodboards if you want to move away from InDesign, Illustrator or Photoshop.

Gomoodbaord: http://www.gomoodboard.com/
Moodstream: http://moodstream.gettyimages.com
Musespeak: http://www.musepeak.com
Moodshare: http://www.moodshare.co
Olioboard: http://olioboard.com
Invision: https://www.invisionapp.com/
Niice:https://niice.co/
Canva: https://www.canva.com

Tuesday, Sep 13th, 2016

Paul D'Angelo

Paul
Ready, Fire, Aim

We've all been there before. You need something asap, and resources are scarce. You've been cobbling together a production ready site with the help of a rotating cast of freelancers and friends, and just need this final piece to get you fully operational. You are so close you can taste it. The final pieces are so obvious to you, you begin looking for help with little more than a 2 sentence overview explaining how you just need a quick fix and that a 2 week should be more than enough time.

You narrow down your search to three potential partners, and explain to them how easy this project will be, briefly outlining the simple quick fixes. When pressed for greater detail, you brush them off, emphasizing the urgency needed and how explaining now will simply slow things down. After a few exchanges over price, you settle on a team you like, and get started.

During kickoff, your team digs a little deeper in to your existing code. During the process, they identify a few issues that you had not anticipated, including some API's that you thought would be simple to integrate with, but in fact are not. You assure them that everything else will be a breeze, and agree on a few areas to begin working immediately. A few days later, those immediate areas also need extra clarification, and you still haven't figured out how to proceed with the previous API issue. As you head into the second and "last week" of the sprint, you find yourself scratching your head wondering how at the halfway point, you suddenly have more questions than answers.

This kind of misplaced urgency happens far too often, and virtually everyone loses in the process. While urgency is a key component in most scenarios, if misplaced it can be a counterproductive force that can cause delays or much worse. With a little patience, more in depth discussions prior to beginning the engagement would've allowed for a greater understanding of what was needed, with potential hold ups being identified earlier and mitigated. How do you protect yourself against such dastardly urges??

Slow down
Whether you are starting a new venture, adding a new feature, or simply behind the 8-ball for a deadline, be sure to give yourself adequate time to think through the problem thoroughly. The moments where you feel there is too much to do to stop and think are usually the times that it is most important to do just that. When in doubt, ask yourself what would Ghandi do? "I have so much to accomplish today that I must meditate for two hours instead of one."

Have a plan
You have spent the past 6 months working day and night bringing your idea to life, and you have a deep, intimate knowledge of every facet of your dream. Guess what? Joey Javascript that you just hired most likely is not a mind reader, and it's going to take time to get him familiar with the code, let alone immerse himself in how the platform is going to serve your mission. The clearer the picture you can paint for the team for both the immediate needs and how it relates to the big picture, the more efficiently they will be able to deliver.

Listen to your team
If the oncoming team doesn't have any questions at all, that should immediately set off all the alarms. Anticipate having to spend extra time clarifying issues and do not dismiss any questions or answer them half heartedly. Any Development team worth their code will give their best effort to deliver in a timely and accurate manner, and any questions are to that end. If you are frustrated that the answers seem so obvious and suspect the team is dragging their feet, please remind yourself of the previous revelation that most are not in fact mind readers.

Know when to compromise
You've been working tirelessly to get things just right, so there's no way you were going to give up now right? You can just impose your will on your team to get them to dig a little deeper, and get it to the finish line. While that sounds inspirational, it can also be dangerous. Not only can it create friction between you and your team, delaying launch just to ensure things are "perfect" can cost you valuable time. The sooner you get your product in front of people, the sooner you start collecting real data.

And know when to stand your ground...
Yes I know I literally just told you to compromise, but sometimes you do need to keep pushing for those final details and features. Nobody said this was going to be easy! How do you decide what's what? Ask yourself, is making this feature, functionality, screen etc being x% more perfecter going to lead to a x% greater chance of success of the product? If yes, then adjust your timelines accordingly, and make sure it's right. If not, and your current situation is "good enough", then get your product going as soon as possible, and can continue to refine as you go, armed with additional real user data to help guide you.

Urgency is a tricky thing. While it can narrow our focus and help us achieve great things during intense deadlines, it can also consume us and cause us to completely blow it. You could say that Urgency is to panic, as pressure is to stress, but that's a discussion for another time. For now, just remember to periodically slow things down, especially when you need them to move the fastest.

Wednesday, Sep 7th, 2016

Tiffany Hsu

Tiffany
The 5 Steps of Design Thinking

Design Thinking has spread quickly in the past five to ten years; from being a core philosophy for design firms, to a problem-solving methodology for a range of personal and business practices. The goals of Design Thinking are to understand your core user, identify an actionable problem, and arrive at a solution through open brainstorming and iterative prototyping.

Before starting the exercise, be prepared to utilize your team and your time effectively:

  • Acknowledge the different types of contributors on your team. At different points during the process, you can call on the strengths of each type. The following two are often applicable:

    • Openers: Those who tend to create and contribute ideas with ease. They naturally want to explore a breadth of options.

    • Finishers: Those who tend to trim options. They look for practical constraints that would prioritize some options over others.


  • Designate periods of time for each exercise. Less is more - you'll find the work that needs to be done will always fill up the amount of time allotted. Once time is up, move onto the next exercise.


  1. Empathize

    If you are solving a problem for someone other than yourself, take steps to understand your product's potential users. Namely, their needs, thoughts, feelings, motivations, and values. Most importantly, pay attention. If you are solving a problem for yourself, this is where you jot down all relevant issues you are experiencing with your current process.


    • Observe the users in an environment related to the product you are creating or problem you are solving.

    • Interview the users, or ideally, engage in comfortable conversation with them. Come prepared with questions, but allow the conversation to flow naturally.

    • Ask them to walk you through the activity you'd like to improve. Feel free to ask more questions to gain deeper insight.

  2. Define the right challenge

    Here, you can synthesize the information you've gathered, and define a problem statement that is both meaningful and actionable. The more focused you make your problem statement, the more effective your ideas and solutions will be.

    Start off by gathering your observations and breaking them down into bite-sized notes, such as Post-Its. Then, group your notes based on relevancy, and review them until you are able to:


    • Identify your core user

    • Define a need or limited set of needs you aim to fulfill

    • Express insights from all the information you have gathered


    You can then combine the above to craft a P.O.V. (point-of-view) that frames the problem, is focused and targeted, provides guidelines for evaluating ideas, and allows your team to work autonomously and simultaneously.
  3. Ideate

    Typically, we tend to jump from identifying problems to trying to realize the best solution. Instead, this step allows you to open the floodgates and generate as many ideas as possible. It's important that only one person speaks at a time, that everyone stays on topic, and that you keep a good pulse on the energy of the group.


    • Based on your problem statement, create a list of "How Might We" question topics that will guide your ideating process

    • Capture all ideas, and utilize techniques such as sketching and mind-mapping when applicable

    • Withhold judgment on all ideas, and build on each other's contributions

  4. Prototype

    Prototyping allows you to build iteratively, gathering feedback on quick, low-res models. Being able to build an interactive prototype as quickly as possible allows you to test, gather feedback, and make small changes without becoming attached to any one model. You can also create multiple prototypes in parallel.

  5. Test

    Prototyping and testing are interwoven steps which you and your team will jump between. Sometimes, the results and feedback gathered from these steps will lead you back to earlier steps. You and your team will develop a testing process that is suitable for your needs, however the following commonly apply:


    • Let the user handle the prototype without any guidance

    • Observe how your user interacts with it, and capture any response they might have

    • Allow them to test and compare multiple prototypes to better inform your final decision

  6. If you would like to understand Design Thinking in detail, check out the Stanford D. School's comprehensive coverage here

Thursday, Aug 18th, 2016

Lizzie Healy

Lizzie
Best Practices for Collaboration Between Designers and Developers

The design process it absolutely critical to building an application that is both beautiful and functional. These designs serve as a guide for developers, a brand and face for a company, and ensure a clean experience for users. With this all important task, its crucial to remember that no designer is an island. Creating the best designs requires another essential element: collaboration. Poor synergy between designers and development can leads to stress and tension for developers, designers, clients, project managers, and the rest of your team.


Throughout the course of a project, miscommunications between these two parties can occur often. Developers bouncing between projects can mix up where they picked up and left off. Designers can overlook minor styling elements like error messages. Disorganized site maps can lead to confusion, and designers and developers can run into problems when they don't see eye to eye. But many of these issues can be eliminated by simply implementing better practices for communication. Following these simple guidelines can help to ease many of the problems faced throughout the design and development process.

Obsessive Compulsive Design

Organization is absolutely irreplaceable. No matter how amazing designs are, if they are disorganized, they are not useful. Designers- make life easy for your developers by creating the cleanest, most well organized files possible. When labeling layers, include a title, breakdown, and a name that makes sense (to both designers and developers.) Sketch provides the option to annotate your documents, so take advantage of this! Properly labeling requires less clarification later on. Developers- don't be afraid to ask for clarification if you don't understand those labels! There's nothing worse than spending hours coding only to realize you've have been working off of an old mock. No matter what assets are being provided, they need to be on time, detailed, and complete.

Can you hear me now?

Clear communication is the simplest way to ensure that designers and developers are collaborating well. Designers and developers should be encouraged to communicate regularly to gain a better understanding about the status and elements within a project. Benefits go beyond just clear understanding. The extra input leads to more innovative and functional designs for the end user. Every designer has had the experience of staring at a design for a week straight and not noticing a typo, only to be immediately spotted from a fresh set of eyes. Been there, dseigned that.

Meet and Greet

Don't just meet a little, meet a lot. Meet to review the wireframes before designs begin to get made. Meet before a designer presents mock ups to a client to make sure they are realistic for development. From kickoff to presentation, someone from development should join in all design meetings with clients. The extra time spent is essential in preventing miscommunications and misunderstandings that lead to the dreaded response from clients that the finished product doesn't look like the mock ups.

Como Se Dice...Language

Use language that is constructive, descriptive, and detailed. People typically don't see things the same way based on their tastes, preferences, or past experiences. Avoid words like "trendy" or "chic", and instead opt for clearer terminology that describes more literally what you are looking for. Don't leave room for misinterpretation. Designers should have a firm understanding of the lingo used for development as well.

R-E-S-P-E-C-T

It's important that both designers and developers approach the project with respect everyone's opinion. Designers, put yourself in the developer's shoes and think how a developer would and vice versa. Be open minded and consider all ideas, even if they aren't yours. Both designers and developers are experts in their field, but that doesn't necessarily make them the authority with the final say. Sometimes a tie breaker vote from an outside party may be in order, but as long as the situation is handled respectfully a lot of problems can be avoided.

Tuesday, Aug 2nd, 2016

Lizzie Healy

Lizzie
Homepage, Sweet, Homepage

10 seconds. That's all the time you have to make a great first impression when a user visits your website. 10 seconds to let them know who you are, what you're about, how you can make their life better, and why they should keep clicking. It's a tall order for just a few seconds, but is a crucial element to the success of your website and your business. This time is a brief chance for you to connect emotionally with visitors and show them, through a combination of a few critical elements, what you can do for them (without overwhelming them).

Relevant Images

Using images or videos on the homepage of a website is the standard for web design, but as with anything else, the quality of these images is ultimately the most important. When choosing an image or video, make sure that it is high quality and up to date. It's 2016, so don't choose a large image of someone holding a landline phone to represent your company (unless you sell landline phones). Avoid cheesy stock photos. Visitors pick up on it immediately if the images don't feel authentic and genuine. They should instead highlight what you offer, and reflect your businesses branding. This image or video is a terrific opportunity for you to convey what you offer without overwhelming your user with text. Take advantage of it.

Headline

In 6-12 words, your headline should let the visitor know exactly what your website or business has to offer. The headline is probably the trickiest element of your home page, because it needs to clearly and concisely convey why your business is unique, and why visitors can benefit from being there. It's important to remember that this headline should be about your visitor, not about you. They want to know what you can do for them, not the other way around. This is an easy element to change and update. You don't have to be married to it, so don't hesitate to keep working to make it better and more compelling.

Subheadline

The subheadline, which appears just below your headline but above the fold on your homepage, should compel users to dig deeper. In 1-2 sentences, your subheadline should spark the interest of a reader, showing clear value, and showcasing what you do. They don't have to be there, so don't waste their time. Keep the copy for your subheadline lightweight and easy to read, while positioning yourself as an authority on the topic that they can trust. It's a fine line to walk, and will also require a few tweaks before you hit a home(page) run.

Call to Action
Along with the subheadline, your homepage should include a call to action. When a visitor first clicks on to your homepage, it should be immediately clear what action they should take next. Should they find out more? Should they sign up now? Make their journey through your website as simple as possible, providing an obvious route to the next step they should take. This call to action should be clear, leaving no question as to where it would lead. It should also be compelling. Again, they don't have to be there. Make it worth their while.

Contact Information

Drake said it best, "you know when that hotline bling, that can only mean one thing: more qualified business leads generated." Pretty sure that's how the song goes. In order to connect with these qualified business leads, you need to provide easily accessible and up to date contact information on your home page. If you have a brick and mortar business, make sure you not only provide the address, but include a map so that patrons can easily find your business. In addition to being able to easily find your business, providing contact information adds credibility. People want to work with real people, in a real office, who they can really speak to! Don't make it hard for them to find you.

Social Media
Your marketing team spent 2 hours' yesterday lining up a keyboard with a notepad and pencil for the perfect flatlay picture (or wait, was that me?). Don't let those hours of effort go to waste. Get social by promoting your social media pages on your homepage. Use icons, and make sure that your links are all working properly. Just like providing accurate contact information, including social media posts and links helps to build trust with potential customers. It's no longer a value added, its an essential.

Subscribe
Keep it short, keep it simple.

Your website's homepage is your first chance to capture a potential customer and show them how you can make their life better with your product or service. With every element, its important to remember that a little can go a long way. Don't overwhelm your visitors with an overload of information and pictures. Every item that you do choose to include, remember: Branding, Branding, Branding. You have worked hard to carefully craft a voice, don't miss the opportunity to show visitors who you are and what you represent.