Design

Building a Fast, Minimal, Mobile Website

As mobile website strategy plays a crucial role in web design and development we find minimal design can not only be visually pleasing, but important to ensure a fast loading experience for site visitors.

Beautiful design is nothing if visitors don’t stick around long enough to engage. It’s 2016, and your site visitors want to have a blazingly fast site experience. If you don’t deliver, they’ll Google their way elsewhere.

By the numbers

  • 47% of users want a site to load in two seconds or less (according to an Akamai study)
  • E-commerce shoppers want a site to load in about two seconds. Google aims for less than half a second (according to Google Webmasters)
  • 57% of users will abandon a mobile site if it takes longer than three seconds to load (according to a Mobify study)

The consensus is seems to be faster is better since it greatly improves the user experience. Here are some ideas on making your site faster!

Minimal Design

Minimal Design

It stands to reason that, when you create a bare-bones design, your site simply has fewer elements to load. When there are fewer elements to load, you can meaningfully increase the speed of your site. This is especially helpful with mobile website layouts.

It all depends on the philosophy of how the approach site is designed. A lot of trouble can be avoided from the very beginning by designing smartly to avoid harmful practices that affect the site’s loading speed.

An example of a minimalistic website would be:

  • Simple, concise main navigation items
  • More white or negative space
  • Short web forms
  • Smaller images
  • Fewer external assets being loaded (ie. Fonts, Scripts, etc).
  • Minify assets (compress and combine all Javascript and CSS files)

Help from Google

Mobile Website Testing in Google Pagespeed

Google wants your site to be faster. That would help its overall mission of making the Internet faster. So why not use the amazing tools that Google offers?

The best place to start is Google Developer’s own Make the Web Faster page. Here, you’ll get a stellar assortment of tools and info to speed up your site design.

Another excellent tool Google offers is PageSpeed Insights, where you get detailed insights into what’s causing your current site to run slowly. The best part is that you can get detailed reports and recommendations for both mobile and desktop versions of your site. This gives you a great starting point to make refinements to your site!

Optimize Your Servers

An important aspect of making your site super-fast is how you handle your servers. In particular, tackling your server response time which is key. Your server response time is how long it takes for your server to respond to a browser request.

A few strategies to consider for your server to make sure that your server response time is super-fast:

  • Use a content-delivery network or CDN
  • Use a caching solution
  • Improve your web server software configuration

These of course are just a few of the steps we normally take with all website projects. Questions, comments, suggestions? Feel free to reach out or comment below!

Design

Building a Fast, Minimal, Mobile Website

A brand for a company is like a reputation for a person.

Your reputation is comprised of many elements: what you do, what you say and how you present yourself to the world. For a small business a brand style guide lays out the rules for how you’re presenting yourself.

A quick google search on style guides reveals many intricately designed, novel-length books that dictate the exact usage of a logo, and the specific kerning between type. If you’re still figuring out who, exactly, your customer is, and just beginning to think about what features you want on your website, putting together a style guide at this stage might seem intimidating and unnecessary. But it doesn’t have to be long, it doesn’t have to be fancy and you don’t have to be a professional designer to make one.

The mere exercise of creating your first style guide can actually help clarify what’s really important to you, and start to give shape to the words and actions that make up your brand.

Step 1: Start with why

You probably spend a lot of time explaining what your product or service does, but how often do you think about why you do it? A good style guide will start by answering key big-picture questions:

Mission statement: Write one sentence that describes the reason your business exists. You really don’t need more than a sentence, I promise:

Nike: To bring inspiration and innovation to every athlete* in the world.

TED: Spreading ideas.

Google: Google’s mission is to organize the world’s information and make it universally accessible and useful.

Personality: Once you know the why, you need to know the who. Think of your brand as a person. How would you describe them? Sophisticated? Quirky? Down-to-earth? Loud? A dreamer? Write down 3-5 adjectives. Those are the skeleton of your brand’s personality.

Target audience: So you’re now starting to know who you are, but who is your customer? The easiest way to define them is to think about the archetypical person who would use your product or service: how old are they? What’s their gender? What’s their career? Education level? Favorite flavor of Doritos?

Step 2: Make your mark

post-brand-mark

For people, our mark is our signature—it’s what validates a contract, makes a check cashable and adds value to autographed books. For a company, your mark is your logo.

A logo does not have to be literal. It does not have to have a picture. It doesn’t necessarily even have to have your name (think of Apple or Nike). What it does have to do is represent that personality you described above. 

Once you have your mark, your brand style guide explains how to use it. The top three things you should think about are:

1. Where should it appear? Should employees use it in their email signature or does it only appear on the website and business cards? Does it go on every page of a powerpoint presentation?

2. Are there different color or shape variations? Do you want both a stacked version and vertical version? Do you have both a bright green version and a plain black version? Does it always appear with your name, or are they sometimes separated?

3. When should those variations be used? Should your green version always appear on a white background? If you have a photo background, should you always use the black version? On packaging to you use just your logo and not your name, or vice versa?

Step 3: Pick your colors

post-brand-colors

Color is a personal choice, but it also comes loaded with implications. You may love orange, but are its energetic, cheerful associations right for your company? Refer back to your mission and brand personality.

If you already have a logo, you should probably start there to help define your colors. For help getting started, check out Google’s super helpful color guide. You will want 1-2 principal colors, and 1 or more supporting colors, including at least one neutral or grayscale color. The Starbucks color palette is as identifiable as their mermaid logo.

Your style guide should explain when to use your primary color(s)—e.g. in your logo and packaging—and when to use any secondary colors, e.g. in the body text on your website, or as a background in PowerPoint presentations.

A good brand walks a fine line between consistency and agility: it should be easily recognizable, but open to change as your company grows and develops. Developing a basic style guide gives you a road map to define who you are today, and lays out the route to your business’ future brand identity.

If you have your mission statement, and know what you want to set out to do but need a creative services team to help with the rest… we know who you can contact.

Design

Building a Fast, Minimal, Mobile Website

Change can be somewhat unnerving at times. Yet evolving your brand as you grow is a necessity regardless if you’re just a small company with 1-10 employees or a Fortune 500 company. You should always look to refine and adapt to your target audience.

I had recently been discussing some exciting ideas with our client Redline Photo about different approaches to evolve and enhance the brand for next year’s events. The clean and minimal style of the logo design for Redline Run, their inaugural event, led us to ideas for updating the logo to convey that same feeling. Simple, elegant and upscale.

Change generates excitement

Starbucks Logo

With the recent holiday cup controversy that Starbucks has received on social media there’s proof that change can generate excitement and encourage engagement with your audience. Of course revamping your logo’s design every year isn’t necessary but trying out different avenues of growing your company’s audience whether through social media, within the community or even in reaching out directly to current customers for feedback can help generate some great ideas on how you can improve your brand.

Design

Building a Fast, Minimal, Mobile Website

You go to see a concert for a certain artist because you have an expectation of what it will be like to hear and see them perform. There’s an established connection.

In the 5+ years working with Red Frog Events, one of the fastest growing event companies in the country, I had the opportunity to learn how to design, develop and market an experience in the event industry. Creating that initial connection that draws customers in whether it was for a Warrior Dash event or for Firefly Music Festival.

The marketing and design aspect is meant to engage potential customers in seconds and tell the story of the event visually. What type of event is it? Why is it better than others? Why do you need to be there?

Telling the Story

Redline Run Motorsports Event

As with any form of marketing it’s a great practice to keep messaging and visual elements simple. Draw users in instead of overwhelm with what they should do. Creating a personality around your brand through posts that engage and entice your audience to feel as if they’re a part of your brand’s community.

An example of telling the story with visuals for an event is the 90’s Bar Crawl and 80’s Bar Crawl. These two brands have a similar style but the theme is easily communicated through simple and engaging design.

For the event marketing of Redline Run we designed a “style” through our social media messaging that included visuals in almost every post. We found that website traffic increased on average of 48% each day a post or set of posts were published. The social marketing really connected with the motorsports audience over time and was the number one method of drawing traffic for the event’s registrations.

From music festivals and mud runs to motorsports and bar crawl events, I’ve enjoyed finding ways to visually develop an event’s brand through unique and compelling design. It’s telling the story of the experience and building anticipation. What’s your experience?

Design

Building a Fast, Minimal, Mobile Website

While recently surfing Facebook I noticed a friend had published a link to their new employer’s website. Given this business has over 200+ employees and a large social following I assumed their website was responsive. It was very much not the case.

There’s a free and simple tool Google has for checking if your website is considered mobile friendly:

https://www.google.com/webmasters/tools/mobile-friendly/

Another bonus to having a mobile friendly website is that it’s taken into consideration with search results.

Design

Building a Fast, Minimal, Mobile Website

Working with startups is something I enjoy doing. There’s plenty of ground to cover when building an online presence and for me the challenge is like having a blank canvas. So here are some things you should plan on if you’re just starting out to paint a complete picture.

Research, review and apply.

Take a look at what competitors are doing through their various social media outlets and see how they’re reaching their client base. Set the bar high and find inspiration from larger brands. Search for some example websites and make note of elements that work well.

With well established brands you’ll notice that their messaging is consistent and visuals are cohesive. This is something to keep in mind while you’re designing and assembling your messaging for your online presence.

The more preparation in place before developing assets to put online the easier it will be when you’re ready to start.

What’s your niche?

After you’ve reached critical mass with the intel you’ve gathered it’s time to make your statement. While you know what you do is great, how will you share this with your audience? What is it that sets you apart? There’s a reason you do what you do and why your excited to share it with everyone, crafting how you market this to your audience is key.

Startup in motion.

As mentioned above, having a consistent message and cohesive visuals are important when marketing your brand. Educating and exciting your potential client base regardless of the medium should be a priority. Once your website and social media accounts are up focus on growing your audience and encouraging interaction with your users.

Lego was once a company struggling to survive in the mid to late nineties. It wasn’t until they embraced their core audience and listened to suggestions that they then started outputting what customers wanted and regained popularity.

The same can be said for plenty of companies. Growing a community around your brand doesn’t happen overnight, but consistency and striving to grow with your audience will help get you there.

Design

Building a Fast, Minimal, Mobile Website

As a musician I sometimes find a part in a song that I don’t care for, it might just not sit well with the rest of the song. So I try a bunch or different ideas hoping lightening strikes. Sometimes this works, other times it’s best to step back and look at the whole song, the bigger picture. The same applies to design, development and marketing in a lot of instances.

Looking at what your main goal is instead of changing and tweaking things to kind of work is a better process to utilize in a lot of scenarios. Asking yourself questions like “what message do I want to communicate?” or “what is easiest for my customers?” can help you solve with an end goal and then allow you to work out what steps you need to meet it.

The idea of having one main goal and the steps to reach it certainly isn’t new, but it’s something that can be overlooked.

news-solutions-message

Clear Messaging

In a lot of cases I’ve been approached with lists of problems that a website has and the ideas of how it can be “fixed” just with a new layout. In this case I have to ask what the main goal of the website is. Is it solely for informational purposes? If so, what is the hierarchy of information that your users should find when visiting? If the website is e-commerce driven then you certainly want the process of shopping to be simple and intuitive.

Having a clear vision that’s communicated to your users is key regardless if it’s for a website, social media campaign or even business cards. Putting yourself in the shoes of who you’re reaching for a moment and really asking yourself if your messaging is clear can be extremely helpful.

So grab some coffee, and put pen to paper. What’s your goal?

 

Design

Building a Fast, Minimal, Mobile Website

I recently had the fun challenge of testing my Illustrator skills with the branding of an event put on by SnowDay DC.

In discussing the overall style and theme of the inaugural event we thought that highlighting some of the fun aspects we recall of the nineties in an illustrated style would project that concept well.

If you were to Google 90’s photos the results… are not pretty. Stock photos are not much better. So we knew in order to showcase the fun and overall theme of the event a custom design would be the best route to go.

case-study-90sbarcrawl.com-2

Starting with logo concepts I assembled a few rough ideas that drew from graphics of the period and we refined, combined, and tweaked to establish a logo that fits the theme and contained clear messaging. Much like I mentioned in my branding post, having the right visuals in place was key to how the rest of the assets would follow. This actually made illustrating the graphics used on the website that much easier.

For the site design, I wanted to display a more literal concept that the event is a bar crawl. Each building/bar contains a reference to that era and it was fun choosing which characters to add within the scene to really try to bring the whole experience together.

 

Design

Building a Fast, Minimal, Mobile Website

We’ve all seen that car. The one with the shiny rims but the rest of the car has seen better days. If your new website were the rims, do you feel the rest of the car looks just as good? Much like a car, your brand is seen from every angle. It’s the first thing most people interact with whether it’s on social media, business cards, your app, etc. It’s not only your logo/mark but also your messaging.

For many people having a brand = having a logo. But’s that’s just one small piece.

Not to discount the importance of your rims, I mean, website. But if you’re investing in a marketing campaign for your debut product or are about to launch your very first website why not step back and ensure your brand’s message and logo/mark is something you’re just as proud of? It will be viewed through all forms of communication.

The embodiment of your brand comes down to everything you do.

Branding visually

Plenty of great concepts can be hindered by weak creative. The design of your logo should be simple, professional and most importantly clearly communicate who you are and what you do. Your logo should set the tone for any creative assets that follow. A few good points mention in this Smashing Magazine article for logo design are that it should be:

  • Simple
  • Memorable
  • Timeless
  • Versatile
  • Appropriate

Whether you’re a startup with 15-20 employees, a major corporation or it’s just you these are just a few steps that are involved in the process of conceptualizing for what a brand’s logo should be.

news-budget-for-branding-2

In the wild

Some items to keep in mind when you start the creative process for your brand’s logo are how it’s used. A logo that may look great on t-shirts and posters may not translate well for your website. You should take into account how you’ll be using your brand’s logo through all types of creative when starting the design process and consider how that will translate on all levels (social, website, products, etc).

After all, you want the messaging you’ve worked so hard on to be perfectly clear everywhere!

Design

Building a Fast, Minimal, Mobile Website

We’re very excited to launch the brand new website and identity for the Village of Steger, IL.

We worked to develop and design a site that was very easy to navigate and find the necessary information that site visitors may need to find.

We found that alot of village and city websites lacked focus in the design of how information is portrayed we kept with the approach that less is more in terms of design elements.

Featured posts

Evolving your brand
  • November 16, 2015

About us

ForYouDesign is a web and graphic identity development firm established in 2001. Designing to enhance and capture the idea of what every client envisions for their project.

We cover everything from web design and development, hosting, branding, content management solutions and more.

Our team is intentionally small, eclectic, and skilled; with our in-house expertise, we provide sharp and innovative work.

Contact Us