Menu Aztek logo Contact Us
3615 Superior Avenue, Suite 4404A
Cleveland, Ohio 44114
216.472.2121

justin

Total posts: 6
Last post: April 24, 2017

Pinterest for Business

By justin on  April 24, 2017

Pinterest is now driving more traffic to sites than Reddit, LinkedIn, Google+ and YouTube combined.

With stats like this, Pinterest is quickly securing itself as a valid place for businesses to increase their visibility online. The latest analytics updates and site verification tools give businesses even more reasons to join the thriving community of pinners.

New Pinterest Tools

A picture is worth a thousand words, right? It may be that 1,000 pictures are worth a strong brand.

Pinterest allows brands and businesses to collect images and ideas in much the same way Facebook collects comments and reactions. The visual pinboard, if used properly, can create a powerful brand story, and isn’t that what good social media does best? So let’s take a look at the new tools:

Buttons and Widgets

Interaction is at the very heart of social tools like Pinterest. So it makes sense that Pinterest is making it easier for users to pin items from your business’ site, and visit and follow your boards. The easy to install ‘Pin’ button connects your site to the growing Pinterest network by allowing one click posting of any image on page. This means your brand images are posted on a site that crossed the 10 million unique US visitors mark faster than any other standalone site in history.

Board Widget

This widget shows your recent pins on a page of you choosing. It is a great way to pull in the social interaction of Pinterest within your site.

Verify

Verify your site on Pinterest and receive a special marker on your profile alerting users that you are legit.

Pinterest Analytics

Want to see who is repining and clicking on your content? The new Pinterest analytics can give your business a strong indication of what content is getting repined and who is doing it.

Should your business be on Pinterest?

If your brand benefits from strong branding and visual presence in marketing, Pinterest may be one of the best showcases online for you to share. While the site is heavy with non-commercial images, a well-placed unobtrusive image (think of branded events, DIY projects, lifestyle product photos or well-designed packaging materials) can still resonate.

***

How might your business use Pinterest to establish branding? Are the new tools and analytics tempting to you? Tell us about it—and check out our social media services.

Images Via Pinterest

Landing Page Best Practices: Form Follows Function

By justin on  April 24, 2017

A good landing page is unique; in fact it has to be. Each landing page should be specifically designed for the function it serves. While there is no magic one-size-fits all formula, there are some best practices that can drastically increase your chances of success.

Here is a list of tips that Aztek uses to make a winning landing page. If you’re looking for even more information on the design process, we have drawn up a simple but helpful diagram.

What is a Landing Page?

A landing page is a page on your site dedicated to delivering on promises made in your content or in an outside ad. The goal is to encourage your user to take another step toward becoming a customer or fulfilling the direct task of the landing page. Landing pages are often an element of Pay-Per-Click advertising.

The most important part of creating a landing page is identifying your goal. Make sure your design and content make that goal as clear as possible for users to understand.

One quick point before getting into the tips: your home page is not a good landing page. Instead, send your visitors to a page where they will be asked to do something specific. The homepage is a great place for users to begin browsing, but generally it’s not the best place to generate action from the user.

Landing Page Tips

    1. Have a clear call to action.

When running an ad campaign, the main goal is to convert prospects into customers. Driving users to a targeted landing page is often a planned step toward this goal. A good landing page should be designed to make a prospective customer take action. Clarity in your messaging and a strong call to action must be part of the plan.

    1. Simplify design.

Simplicity. It is the word of the day for web designers, and it should be a goal for landing pages. Our goal is to remove un-needed distractions and minimize unnecessary information.

    • Keep your font styles, colors, and sizes on your page consistent.
    • Remove excess images and bandwidth-heavy media.
    • Only ask for information you will absolutely need, and reduce form fields if possible. Having 400 questions is one of the quickest ways to lose an interested user’s patience.
    • Remove excess navigation. If you are directing traffic to a page for a targeted reason, stick to that reason.
  • Make it available on all devices.

Make sure your landing page renders properly and is sized correctly for all viewers. Variability in screen size has never been higher. Your users are using mobile phones, and mini tablets, and tablets, and computers. Can your message be seen everywhere it needs to be? If not, responsive design may be an option to increase conversion. The web is changing, but getting your content to users that need it is still the goal.

  • Show brand strength.

Is your brand trustworthy? Is it clear to users that your company is a good choice for them? Show them testimonials from respected customers and include relevant certifications or credentials. Help your customer feel comfortable about providing information or completing the desired function of the landing page.

  • Test, then test some more.

There are many elements of a landing page that can be tested, including the use of an illustration, multiple tabs, number of bullet points, and much more. These elements can all be tested and tweaked to help you achieve the best results.

Do you A/B test to validate your decisions? A/B testing allows you to perform simple comparative campaign studies. You can discover which designs and messaging perform the best. Your testing can be tracked by adding simple code snippets to your landing pages. Including this code ensures you are recording the fundamental performance metrics for each campaign:

  • Conversion rate
  • Bounce/abandonment rate
  • Form completion rate

Landing Page Template

This helpful diagram includes some of the items Aztek focuses on with each landing page.

Download the PDF.

Thanks for taking the time to read through these pointers on landing page design. Want to learn even more about Aztek’s landing page process and website optimization? Contact us today!

Five Essential Web Design Tools

By justin on  April 24, 2017

Aztek Series: Essential Web Tools. In this series of posts we'll share tools we enjoy using to make the Internet a better place. From design to development, to content and marketing — you'll get the inside scoop. 

What's Popular Now?

While every web developer and designer has a list of tools they need to get the job done, there is a constant flow of new services, websites, and code snippets that can help the process. So how do you keep up-to-date? 

At Aztek we have an ever-evolving collection of tools that help us make modern websites and applications that meet customer and client needs, as well as updated web standards. Whether it be project management, inspiration, icons, or automation we are constantly looking for new tools that will help us build the best experience.

Behind The Scenes

In this post you'll learn about some of the current tools I use as a designer and front-end developer at Aztek to enhance the creation process. First, here's a quick snapshot of where my day-to-day work takes place... 

Image of Justin's workspace at Aztek. Current work on screen. Learn about Justin's essential web design tools.

 5 Recent Tools I've Added to My Workflow

 

1. Iconogen 

One of the tools I’ve found recently is a great site called Iconogen. Icongen takes your single logo image and creates all the required Apple Touch Icons, Windows Tiles and favicons you need for your site instantly, and most importantly free

2. Unsplash 

Unsplash is a simple webpage gallery of copyright-free images you can use for your website or design mock-ups (or whatever you want, really). The variety of hi-resolution images work better for me than watermarked stock images when I'm working on client concepts. They put up 10 new photos every 10 days and you can subscribe to get the latest updates.  

3. Packery 

Packery is a JavaScript layout library that uses a bin-packing algorithm. This is a fancy way of saying “it fills empty gaps.” Packery layouts can be intelligently ordered or organically wild. Elements can be stamped in place, fit in an ideal spot, or dragged around.

Image of a screenshot of the Packery.js library in action.

4. Muz.li 

Looking for design inspiration? Muz.li is a curated design-inspiration extension created for the Chrome browser (you're using Google Chrome, right?). While I am decently active on Behance, Muz.li has a nice curated collection you can skim through and typically more in-depth designs then you can find on Dribbble.

5. Unheap 

Finally, Unheap, a compact gallery of jQuery plugins with demos and handy documentation. Unheap does a great job of keeping these relevant and active which can save you some precious time. 

 

Image of a screen shot that is a recent concept utilizing some of the Unheap jQuery plugins.  

What tools do you use to enhance your design process? Share with us in the comments below. 

Speed is Perception: Why Your Website Speed Matters

By justin on  April 24, 2017

Last week the Aztek team attended the Stir Trek conference in Columbus, Ohio. Among the many great talks Chris Love’s “10 Things to Make Your Site Faster” presentation stuck out and got us thinking we should share a few of the ideas we use when designing websites and applications. 

So, Why Does Speed Matter?

Image of a blurred train speeding by. Learn more about how you can increase site speed in this post.

What your users don’t see could hurt you.

Slow websites are not just an inconvenience, they're a usability concern. Does it matter how great your images are if they take 60 seconds to load? You may think so, but we doubt your users will. The modern web is clogged with slow, resource-heavy sites that respond poorly for users.

Keep these points in mind

Key takeaway: speed is good user experience. 

Make Site Speed a Priority

As the Web becomes more and more bloated with multiple file requests, large frameworks, and massive media resources— all is not lost. 

Awareness of speed and rendering time has become a mandatory concern for focused developers. There are some great articles and posts by Dan Mall and Tim Kadlec that shine a light on making speed a priority in web and application development.

If you are managing a web development project, working on a development team or have a stake in your company’s web presence at all; speed is not to be overlooked. Below are a few points from Love’s presentation and some ideas we use at Aztek to help our clients improve site speed.

Tips to Help Improve Your Site Speed

  • Bundle and Minify your CSS and JS, this results in less file requests.
  • Set a performance budget
  • Monitor your file requests.
    • The average website up today has 99 file requests! Way too many.
    • Have you reviewed what your site is requesting?
  • Check out the recent grunt.js or gulp.js plugins to load only your core css.
    • The Uncss plugin is a starting point but may need customization for the desired results.
  • Always call your javascript at the end of your html pages.
    • A bad javascript request will block subsequent files and hold your page from loading till resolved.
  • Use the Yahoo Yslow rules.
  • Get rid of what you don’t need.
    • Bootstrap can bloat your CSS and JavaScript, are you checking if you need everything? Most developers really only use a small fraction of their frameworks.
  • Measure!
    • Webpagetest.com has many great measurements available.
    • Remember “Web performance optimization rule one; you can't fix what you can’t measure”
  • Are all your files referenced correctly?
    • Love pointed out “Instagram crashed because of a favicon 404 that was called over and over.” A simple bad favicon file request affected the entire site performance and operation.
  • Analyze your website speed and performance
  • Compress and optimize images for the web
  • Follow The Google Gospel of Speed

Have additional questions about your site or applications speed? Talk to Aztek today.

Card-Based Web Design: A Winning Pattern

By justin on  April 24, 2017

Grouping related information into a single container can be extremely useful on the web and off. Card-based design takes this simple idea and strategically applies it to the web, and particularly to mobile design.

example of card based design

Group Related Information

We’ve understood for a long time that grouping related information into a single container can be extremely useful on the web and off. Card-based design takes this simple idea and strategically applies it to the web, and particularly to mobile design (where space, grouping, and information relationships are most valuable to users).

Easy To Stack

Card-based interfaces have the ability to easily stack, either across or down, on multiple size screens making them indispensable in today’s responsive environment. Popularized by sites like Pinterest, Dribble, Facebook, and Spotify; their influence has spread quickly. But don’t dismiss this as a mere trend. Card-based design offers an experience that highlights single, digestible elements that can be perfect for web content. As the web moves away from the static page toward more personalized experiences (with aggregated content), card-based design offers a winning creative pattern to work with.

Benefits of Card-Based Design

  • Is intuitive and easy to understand
  • Helps break down large groups of data into easy to digest pieces
  • Provides a useful structure to your design
  • Great for responsive screen applications
  • Serves as the perfect size for sharing on social networks
  • Gives product and interaction designers a familiar flexible card layout
  • Improves site UX by creating data that is quick to scan
  • Creates a consistent appearance even with varying types of data
  • Uses a single primary action which users understand, usually a click for the full content

Examples of container-style card design in action:

Card-based design on Pinterest

Pinterest was one of the first to use a card-based design to showcase its user’s pins. Image via Pinterest.com

Card-based design on Awwwards

Awwwards.com features a portfolio of websites in card tile fashion.

Card-based design on Spotify

Spotify uses a grid-based card design to showcase its music offerings.

Card-based design on The Guardian

The Guardian uses card-based news snippets to highlight the large amount of data it produces daily.

Card-based design on Zillow

Zillow, a real estate offering site, makes it easy for users to quickly look through cards for each of their listings.

Interested in learning more about web design patterns that can help you communicate more effectively with your users? Aztek is consistently looking for the best way to design great experiences on the web. Get in touch with us today to learn more.

Photo Credit: "The heat is on!" by marco is licensed under CC BY 2.0

Categories:

3 Tips: How to Use Content to Create Better UX

By justin on  April 24, 2017

Great websites start with great content — content about your company, content about your products, and content about your team will attract the viewers you want. Without well-structured content and a captivating message your design and user experience (UX) is conjecture at best.

First things first: content

Designers and front-end developers are often asked by clients to create beautiful websites, apps or software; a reasonable request and one that can lead to great visual results. It's also one that can produce blank templates and decoration rather than a cohesive user experience. There is nothing inherently wrong with putting together simple 'templated' sites or apps, but your results with this method are severely limited.

(via: https://www.flickr.com/photos/tyger_lyllie/593557424/sizes/o/

Remember, content without a strategy affects your user experience no matter how well the site is designed.

Can UX, design & content work together?

We've found that the best online presence comes from a strong message combined with great visual design and thoughtful development.

Even during the print advertising era, the strongest most effective designs used combinations of targeted content and memorable images, not pre-made templates. You've probably heard “Form follows function” a proclamation originally coined by famed architect Louis Sullivan (Try constructing a building without functioning structural plans), it is one that aptly applies to the UX on your site. The whole of these disciplines working together will bring you the strongest of each piece.

3 Tips For Content-First UX

1. Keep designers and developers in the loop

Make sure your designers and developers understand the message and content focus of your website. Before building out the site there should be content work happening. From a content audit (understanding what content is there and if it's any good) to wireframes, there is information available that can help inform the design. In some cases there may be a content strategy statement to work from, or even sample content that's been created.

Taking a content-first approach means communicating the steps taken for content to the designers and developers constructing the site so they can incorporate them into their process.

As James Box and Ellen de Vries from Clearleft state in Gather Content's Content Strategy: A Guide for UX Designers:

Content can no longer be painted on or poured in. Instead, a piece of content is active and alive. It has a life-cycle that may have begun long before the design process has even started.

How this helps UX: Making sure the whole team knows the content goals and priorities puts user needs first when going into design and development.

2. Start with content early

This tip is especially true for the core user needs that your website is addressing. Bobby Anderson on everydaydesigner.net makes a strong case for why 'content-first' is necessary:

By designing “Content-First” we’re stripping away all of the nonsense and focusing on what is important. Designing “Content-First” is about gathering your client’s assets and laying them out within the design in order of importance, optimizing the content for a web audience and ensuring that the message(s) and/or features that the client wants to get across to their users is consistent across all devices.

Having a content-first approach ensures you have everything you need before starting a project. This can help avoid endless rounds of changes and help save back-and-forth between your designers and stakeholders.

How this helps UX: Starting with content early ensures that users needs are not lost as the site starts to be built. If content is mapped out and planned for it cannot be overlooked during the build process.

3. Find sample content to get started

Don’t have content ready yet? Try designing with the current site content, if available. It won’t be perfect but it will get you started in the right direction. If you're unhappy with the current content, try designing with words that describe what you want the new content to communicate.

Rob Mills shares an excellent post on uxbooth about Using Proto-content for a Better User Experience. He gives the benefits of 'proto-content' when finalized content is not available:

Proto-content allows for content and design to be evaluated and tested together. That’s where the true value is. Content is design, design is content, and both are user experience. The better teams can get at treating these two disciplines as a whole, the more informed both content and design decisions will be.

How this helps UX: You won't end up with large gaps in content because you'll be using real examples (or something close to it) instead of lorem ipsum.

Use these three tips to create web experiences that enhance your content rather than overpower it. The content-first approach drives your project's UX by highlighting what is important to your users giving them the best overall experience.

Learn more tips on how well written, structured content can help your design.

Want to work with a team that takes content, user experience, and design into account?

Check out our skills and services.

Categories: