Category

Web Development

Using Garrett’s 5 Planes of User Experience in Web Design

By | Graphic Design, Learning, Web Development | No Comments

When designing a website, it is important to think through every possible way that users will be interacting with the website. The way they interact with the website is highly dependent on the way it is built. This might sound like a complicated process, but by breaking the process down into its core elements, we can understand it better. Thankfully, Jesse Garrett, an information architect, came up with a principle called Five Planes of User Experience.

Read More

Finding Love in an Ad-Free Place: Ad-Blockers & Your Brand

By | Blogging, culture, Marketing, News, SEO, Social Media, Web Development

Ever since the internet was young and innocent, advertisements have cropped up as a way for brands and marketers to get access to the huge amount of people logging on every day. The pop-up has served as the bane of many an internet user’s existence, popping up in more and more frustrating situations and in greater quantities. Nonetheless, users have revolted and used ad-blocking softwares to dispel the efficacy of “traditional” internet marketing — namely, the pop-up window.

The era of the pop-up advertisement is all but dead,

and it has everything to do with ad-blockers.

What is ad-blocking?

photocred: bookstores.nyu.edu

photocred: bookstores.nyu.edu

Simply put, ad-blocking is the process of eliminating any and all advertisements on a webpage — especially those that show up as third-party plug-ins (think “pop ups” or banner ads). This results in pages loading faster, because ad-blockers essentially refuse to load advertisements on a given webpage.

Why are people attracted to it?

It appeals to common sense that users would want the fastest, most distraction-free browsing experience. Using ad-blockers reduces the “white noise” of traditional advertisements encroaching upon the content users want to access. If users are this adamant about not wanting to see advertisements, it speaks to a collective lag on the part of brands to provide compelling and engaging content to get people to listen and engage with their online ads.

When done well, advertisements don’t have to be “white noise.”

What can brands do to counteract the rise of ad-blockers?

The rise of ad-blockers for traditional users, with Apple recently releasing ad-blocking as part of their overall software package, has petitioned companies to market in more profound ways; Companies are now tasked with creating compelling, engaging, and user-centric content. Users are playing a greater role in advertising, rejecting ads that don’t reach them in a way that asks them to participate and be involved in a brand’s “process.” Therefore, companies need to re-focus their marketing strategies on co-creation, user involvement, and overall engagement.

Besides creating more compelling content, what else can be done?

Creating great content is one thing, but there also needs to be a well thought out and executed distribution

photo cred: tech.co

photo cred: tech.co

strategy for your brand’s content. If you simply create it, it is not a guarantee that consumers will flock to your brand. Developing a robust digital strategy is imperative for any company’s success in an ad-blocking online culture. This means utilizing mediums, strategies (SEO), and resources to reach people where they reside online.

Ad-blockers are making traditional forms of advertisement more difficult, but it hasn’t rendered the entire practice of advertising online as dead. Companies are now being asked to be more creative, to create content which exceeds expectations, and taking residence in places that users wouldn’t normally find them — but are using anyways. There are places to advertise, if your company is doing the right job in seeking them out.

Creative Resources

By | Graphic Design, Resources, Web Development | No Comments

Finding the right tools and creative resources to complete projects can really help their outcome and timeline. There are a ton of resources online that help with completing your projects, no matter the subject. Below I have compiled a list of resources to help complete your creative projects.

 

 

 

 

Web Design

LearnableLearnable provides a list of online books and online courses created for web designers and developers. They provide unlimited access to all courses and videos. This is a great resource for all areas of web design.

W3Schools: This website can provide everything from HTML to CSS to JavaScript to XML and lots more. With live code editors it simplifies learning the basics of web design.

CSS3 Click Chart: Most CSS attributes are very hard to remember. This website provides example code of how to use it and what proper attribute to apply to each CSS element. With live demonstration it shows in real time what your coding will look like. From common to cutting-edge coding this resource will help you create exactly what you are looking for.

 

 

 

 

 

Graphic Design

Easel.ly: Handling a huge amount of text is very hard to visually present. This tool is a great way to create infographics without any hassle. It also allows you to edit and share your work with other creative people with the click of a button.

Fount: This tool is also heavily used in web design. Fount allows you to find out what any font type is, just by clicking the page. Easily accessible, it can sit in your bookmarks bar on your web browser. This tool will help to save precious time trying to find the proper font type.

Method & Craft: Just like your local Arts & Craft store, this website is dedicated to helping you learn better design techniques. By providing articles and examples it will easily show you recent trends and new techniques for becoming up-to-date with the graphic design world.

 

 

 

News & Information

Designer News: This provides a live feed of the latest design news. Many people from around the world help to contribute by sending articles, resources and there own findings. By creating your own profile you can find friends and keep in touch with recent design news around the globe.

HOW Design: This is an amazing resource for finding a variety of books, magazines, and how-to videos. The workshop offers a vast amount of tools to help increase your skills and love for design.

Adobe Creative Suite: Adobe now provides the tools that can help with any project. The creative suite comes with an application that can be accessible from your desktop tool bar. This provides a great amount of images, and projects from which people have submitted around the world. Growing and growing it becomes easier and easier to stay up-to-date and learn the newest ways of design.

 

I hope that you’ve found the resources helpful. The Internet can provide many resources to increase productivity and creativity. Although it may be difficult to find exactly what you’re looking for, I hope these links can provide you with the tools to create something awesome in the future. Stay inspired, and stay positive. Now get creating!!

Tech Skills: Learn To Build Your Own Websites

By | Learning, Web Development | No Comments

Tech skills are fast becoming one of the greatest additions to your work tool box; high demand, multipurpose, practical hard skills that can be used in a multitude of settings. With almost everyone needing a website for their business, personal blog or community group – being able to navigate code and website technology is becoming vital in today’s online age of virtual communication. It’s a new year and if you want to pick up some new tech skills for complete newbies the best place to start is with HTML and CSS.

HTML and CSS are the foundation of website design. If you want to build a website from scratch they are the coding languages you will need to know. So what is HTML and CSS?

Let’s start with how a website page is made: HTML

HTML or HyperText Markup Language creates the bones of any web page by structuring content. An HTML page is split into 2 parts: The <head> where all the information and resources the page will be utilizing are kept and the <body> where any information that will be visible on your web page will be kept. HTML is a ‘tag’ language that defines different elements of a page through the use of different <tags>.

Capture1

Untitled

So we have the structure down – but it looks hideous… Now we need CSS!

CSS or Cascading Style Sheets is a presentation language that is used to make HTML prettier. Without CSS this is what a plain ‘ol HTML page looks like. Not that great looking. With the addition of CSS we can change how our content looks. Ok – to be fair this example is not very ‘wowza’ but you get the idea behind how powerful it is to have control over how your webpage will look. Then you can start making examples like this:

Now it’s your time to start learning those skills

Don’t get me wrong it can be a long road to learning new tech skills but by getting the basics down first you open a gate way to more complicated coding languages. These 2 coding languages alone can ensure you have the ability to save money building and managing your own website, make changes to that website when you choose and understanding how to troubleshoot issues when they happen. Learning a new technical skill will also open a lot of doors and adds so much value to what you can bring to the table at your current or new workplace. It’s also great as a freelancer or small business owner to know, as much of your time can be spent organizing/fixing/pulling your hair out over your IT issues.

Take a look at the amazing free online materials and courses to learn more about HTML and CSS:

 So what are you waiting for? Go get geeky!

Lightweight Open-Source Code Editors

By | Learning, Web Development | No Comments

Working with big projects requires a lot of back end coding and editing. While trying to stay on a time schedule and meet deadlines, it is good to utilize the best resources you have. There are a lot of different code editors that help blend the visual aspect of a website and the backend together. Utilizing these applications help speed up the process of coding and get the job done.

Here are some popular code editors that many web designers use today:

  • Sublime Text
  • Brackets
  • Github Atom
  • PHP Storm
  • Notepad++
  • Netbeans

 

Many of these have their own unique features to help the coding process. Code editors such as Brackets are written in JavaScript, HTML, and CSS. If you are comfortable with coding and building websites, using this software would be very helpful to make the best of your ability. These programs organize all code into one page. That means no more switching back and forth between pages and wasting valuable time to get work done. It is also extremely easy to live preview your work and make quick edits to get the end product you are looking for.

Getting the Job Done

As your projects get bigger and take more time to complete using something like Git will help with versioning and processing the backend material. This gives you the design view and code at the same time. Unlike WordPress where you are forced to switch back and forth to preview your work. There is a lot of extra bloat in these programs so by using these code editors will help get the job done much easier. Another plus is most of these programs are free, and made by Adobe.

 

I am still getting to know these programs. But as bigger projects come my way I am looking to use programs such as these to help with the workload. Efficiency and effective programing is the best way to accomplish what you’re looking for in a project. I am looking forward to utilizing these types of programs. Expanding my skills set and getting web sites completed faster. If you have any other ways to improve your code editing, please share I would love to know.

A Second Look: Trends in Web Design and Development

By | Graphic Design, Web Development | No Comments

After spending many hours online, you naturally begin to pick up on web design’s current (and evolving) trends. By visiting a variety of different web sites and communities, you start to pick out specific differences in layouts and styles of each design you stumble upon; you begin to observe the subtle nuances designers have begun to adopt to put their work above and beyond what we call ‘average’. Incorporating the latest trends through a marriage of coding and design is ever advancing the web and how we view it day-to-day; it’s not stopping or slowing by any measure, and you should be ready to embrace it.

Here are a few trends in web design to keep a look out for (and, if you’re a designer or coder, trends to pick up on).

What Web Design Trends to Watch For

1) Grid Style Layouts

The first time I noticed the wide-spread use of grid based structures was on social media (think of Pinterest, Tumblr, Google + and the like). Most social networks use a grid to help display huge amounts of content in an organized, concise fashion to decrease the chances of user confusion and conflict. This creates a simple user experience that enhances the overall time spent of the site; half the battle is creating a strong UX, let alone one that’s pretty to look at and able to captivate users.

Using thumbnail images with some text displays a tidy way to keep information into a easy to read format. This allows users to flow throughout the site and find what they are looking for without relying on search queries, as was once the trend. This grid based layout has also become standard amongst blogs and personal websites for easy content consumption while remaining auto responsive and flexible.

 

2) Extended Form Elements

Creating a simple experience that enhances the user experience is the key to web design; if it’s not intuitive, it isn’t worth interacting with and probably not worth using. This includes using JQUERY to help write smooth, easily-readable code with fewer lines, and overall, much less clutter. CMS’s have been further enhanced by Javascript and JQUERY  (think WordPress, Joomla, etc.) while keeping websites clean on both sides of the canvas (front and back ends).

These elements, which bring a high level of polish and interactive features, live on some of the greatest sites to date. Viewers are now spoiled with liquid-smooth animations and creative website layouts that we never had the chance to experience before the turn of the millennium. 

 

3) Landing Pages

Although they’ve been utilized by sales peoples for quite a long time (for leads and converting users), landing pages have become a rising trend, featured both on one-page sites in addition to email grabbing pages of large websites. Using this element helps to encourage viewers into learning more about a product or company (while, obviously, benefiting your business by allowing you to capture valuable contacts and customer insights). The idea of landing pages is to create a sneak peak at what the company can provide to various types of potential clients, letting them know what sets them apart from the competition. If the customer opens the door to your website, you want them to walk in and enjoy a hot cup of tea, not run for the hills. It’s all about great, converting copy, a proven track record and a beautiful user experience.

 

4) 3D Transition Effects

I’ve come across many websites that are using 3D effects to display image galleries, navigation menus and text animations. Although it’s a fun, punchy feature to use on your site, designers should be wary of using too many animations on a single page (especially on single page themes; you know who you are!). A common effect used on websites is the scrolling fade transition; this allows information to fade onto the page just as the user is scrolling down or transitioning to another slide/section. Modern design is all about introducing content in a smooth, appealing way, and 3D/parallax effects do this quite easily with little effort or code.

 

5) Flat Design Elements

You’ve seen it everywhere; even mobile devices and operating systems (Metro UI in Windows 8 and 10) have picked up flat, layered design.  More and more web designers are using this element because of the simplicity and the professional polish that comes with design elements that lack the aging effects of typical Web 2.0 treatments. CSS3 allows designers to incorporate flatter buttons, text shadows, and rounded corners to keep their designs fresh, current and consistent; it’s much easier to have your website live as a cohesive unit if the design meshes well.

This feature tells us a lot about the future of not only web design, but of UI design in all devices. Apple, Google and Microsoft are only some of the first adopting fresh colours and simplistic (yet stunning) interfaces that are layered, flat and make use of smooth transitions.

 

6) Portraits

Many portfolio and creative websites are now using portraits to add a human element to their website; after all, websites shouldn’t be websites: they should be the face of your business, organization or belief online. A good way to accomplish this would be to include a simple photograph of yourself on your bio page or in a slider on the home page, or even dedicate a section in your ‘About Us’ section.

This helps the user to get a glimpse into who you or your company is on a personal level, removing the corporate illusion of a single unit. Instead of doing what everyone does with portraits, add some creativity and spice; use hover overs, funny faces, GIFs or cultural/hobby photos. Add some character!

7) SVG Images & Icons

You’ve seen them, and they’re taking over by storm. Vector bases graphics are becoming something that almost everyone web site has, either living as a hotlink to another page or service, or serving as a great way to add visual interest to an otherwise boring section where copy might have been used. They help communicate meaning to a heading, service, or button into a simple icon. SVG images are like vector images but can be manipulated much more easily with the hassle you expect from graphic integration on the web. They have the ability to be selected and edited in most Adobe applications. If you still remember the relevance of flat design today, these vector graphics work very well in such environments.

 

8) Responsive Design 

Many people are starting to use their mobile and tablet devices more often than their computers; its a fact many businesses are trying to cope with. Be it social media or corporate websites and tools, people are flocking to not just one device to consume media and interact with the masses: they’re using 2, 3 or even more. The easy access to things like the Internet and email are a huge factor into why mobile technology is becoming something that everybody on the planet is starting to use. Responsive design works the best when you eliminate the excess stuff and only keep the bare essentials. This makes a simpler design and easy to use for all users. Scaling up for computer size is when information can be added and more design elements can be incorporated.

 

As you can see many of the trends are working together to create the World Wide Web  that we see today. I’m sure that as the web continues to grow and reach more and more people, trends will change and evolve. Will we continue to see flat, layer design, or will the Web 2.0 styling with emboss and gradients come back? Will we seen flash websites take to the forefront, or will clean and simple sites live on?  Who knows. The landscape for web design has shifted considerably over the past few years despite the young age of the Internet itself. As more people search for their next fix online, be it that next hot item or to simple message their friends on the next social network, there will be more options to innovate and push boundaries. What do you think we’ll see next?

Part 2: An Intro to Online Business Branding

By | Graphic Design, Marketing, SEO, Social Media, Web Development | No Comments

Welcome to Part 2 of our Intro to Online Business Branding! If you’re looking for a few tips to get you ahead online, keep reading!

 

Email Newsletters & Social Campaigns 

As you gain customers, be sure to understand that engagement and communication are extremely important. This can mean a larger focus on social media or other channels; if you’re looking to grow your brand online, social media is a must. This ties into brand recognition and your ability to understand and reach out to potential customers. In addition to tapping into social media for its communication prowess, its pretty important to leverage the power of email. The more customers you have online, the larger your potential list can become. Email is not only a way to retain customers, but remind them of your brand and what you offer elusively.

Having a great email campaign to have your buyers or users opt-into can help you acquire more business in addition to reaffirming your brand with useful content and updates about your products and services.

 

Retain Customer Trust

Money’s important; yes, it’s what pays the bills. But don’t forget that your customers don’t want to be reminded that you need their hard earned money. You wouldn’t want someone to push these products or services down your throat.

The secret to selling and maintaining customers is to provide value for the customer through a great user experience (in addition to helpful info) plus building a long term relationship. Look to add value, build trust, and be respectful of potential customers. This won’t only lead to more sales, but will also increase brand loyalty and customer confidence. They’ll look to you because you offer great products and services, but will also because they can trust your name for added value.

Part 1: An Intro to Online Business Branding

By | Graphic Design, Marketing, SEO, Social Media, Web Development | No Comments

If you thought that branding your business in the real world was enough to get you a steady stream of customers, separate you from your competitors and build significant brand equity, you might want to do a double-take.

The Internet has given us the ability to reach more and more interested customers than ever before. However, this is not without costs and sacrifices; it can be a difficult task handling two different branding channels (both online and offline) at the same time. Also, because there are more businesses online than off, you’ve got some steep competition if you want to step into the digital world, especially if you’re interested in e-commerce or retail.

But where do you start? How do you develop an identity online with so much noise, confusion, and competition?

Brand & Mortar has the skillset, tools and experience to help develop your business’s digital identity. If you’re looking to tackle your own branding and identity initiatives, we have a few fundamental branding concepts that might help. Be sure to join us next week for our Part 2!

 

Recognition

Being recognized by users and past customers is the name of the game here; recognition, or the identification from real world to digital. If you have recurring customers offline that attempt to find you through social media or search engines, and they’re met with different branding (or none at all) on your website or social platforms, you’ve already sabotaged your branding efforts both online and off. Customers or potential clients will likely be confused if the branding hasn’t been streamlined enough; are you the same company they interacted with or bought from recently? Unclear branding can ruin your recognition and, at the same time, reduce your credibility (logos, colours, and other design elements that aren’t consistent can appear sketchy).

Sometimes, jumping online can be a great time to rethink your branding efforts; a new logo, social media revamp, and brand message might be options to help define you as a company or influencer in your field. Is your logo too similar to another company or competitor? In many cases, all it takes is a revamped colour palette or minor graphic alteration to your existing logo to make it (and you) stand out, but remember that your logo defines your brand, and if you develop a solid backing, you’re going to want it to stand the test of time.

 

Understanding Customers

You’ll always have competitors. However, the best choice you can make is highlighting your strengths and differences to those of your competitors. Why are your services or products better? Are they of higher quality? Higher value? Do you come to your clients or adjust to their personal needs? Once you know your personal strengths in your ability to manage your business and act as an interface between your services/products and your customers, then you can understand what demographic might be best for you to tackle. You could make the best product in the world, or offer the greatest services ever, but if you don’t know how to target an audience and understand what makes them tick, you’re unlikely to truly reach them.

When a consumer thinks about your particular service or product, you have to make them think about you in particular. What makes you stand out? Where can you build a connection between you, your service or products, and the consumers wants and needs? Those are always tough questions when you’re searching for a better reach, but looking towards smaller, more targeted niches can serve you well. You may find your perfect audience within the one you were previously trying to target, all because you took a step back and thought like a client or customer. A bigger reach, just like in social media, for example, doesn’t always mean better.

Join us next week for Part 2 of our article on online branding efforts for your business!

4 Things To Look For In A WordPress Template

By | Graphic Design, Marketing, Web Development | No Comments

WordPress, like it or not, has become an industry standard platform for everything digital content on the web. Not only are WordPress templates easily tweakable in their current form, but just about anyone without HTML or CSS knowledge can throw up a (rather crude in most case, if we might say) website. Although having someone experienced optimize your content and website for SEO and other tweaks is recommended, WordPress gives you the ability to, at the very least, setup a fully functional blog for yourself or your business.

Read More