There’s no doubt that the Internet has changed a lot since 1997. We have progressed from simple text-based HTML sites to 2017's responsive and mobile first designs, animations and other innovations which improve the user experience.


On Thursday, Feb. 24, I attended a Meetup hosted by Graphically Speaking and CodeCore Bootcamp to learn what’s coming up in 2017. The panel of six speakers covered everything from web project management to development trends. However, it all comes down to packaging the content and making life better for the end user.

Web Project Management

Darrell Hadden, president at Graphically Speaking, explained the job of the web project manager. Some tips on the web project side:

  • The client is very involved in the process, but ensure you don’t get them on the development server until you’ve thoroughly tested it.
  • Conversion optimization is the most important part of the process, but understand that a lower conversion rate on launch is to be expected. This is because, hopefully, your redesign will answer more of the user’s questions and they won’t have to contact you. Secondly, when you make a large number of changes to a site, there could be a Google penalty.
  • Update your marketing plan; the way websites are marketed in 2017 is vastly different than even a few years ago.
  • Navigation for mobile design is a very important consideration. The hamburger menu remains useful and popular, but can decrease conversions.
  • Use the wide variety of testing tools available; performance is essential.

 

Visual Communications Design

Lorena Espinoza, Department Head and Instructor in the Digital Garphic Design program at Vancouver Community College, talked about what’s trending in online design.

First of all, don’t discount the napkin sketch. Before jumping online, try sitting around a table and talking through the process making paper sketches to develop your ideas.

If you subscribe to Creative Cloud, consider Adobe Muse as an alternative to Sketch. Espinoza doesn’t recommend this be the end development platform, but it can help clients get a sense of your responsive design.

Consider typography in your responsive design. Make sure your typography is scalable. The latest trend, she says, is to break out of the grid.

Video is popular, but avoid using it for its own sake. Video content should be short and relevant to your goals. Provide text to support your video to boost your SEO.

Cinemagraph is a trend that is catching on as an alternative to video and GIFs. Easily accomplished, it can add a more subtle sophistication to your design.

There’s another move away from flat design that is now bringing back gradients and vivid colours. Think about the new Instagram logo, for instance.

Authenticity is important. Avoid stock photos where possible and invest in a professional photographer or illustrator.

Content Drives Design

Dale Slattery, VP Creative at Graphically Speaking, talked about the latest trends in organizing content in design.

To get started it’s important to do research and define the objectives of the site. This includes talking to customers, management and staff. Define the customer journey and how all stakeholders see your brand. Determine what problem the company solves for the customer. The data in the research stage will come from many places and will be used to inform the strategy.

“When you’re writing copy for the web, you’re engaging in a conversation,” he said.

The unique selling proposition is a critical aspect of the design that should be thematically incorporated.

Once you’ve done your research, today’s trend is “micro-content.” Break the key points down into billboard messages that communicate well.

Be informal and immediate. Use language that resonates.

An example pulled from the Graphically Speaking portfolio was the Easy Park website, where the messages are concise and organized into card-like segments that work on desktop, tablet or phone.

UI / UX

Ramin Shadmehr, Faculty/Program Head, Digital Design and Development at BCIT, talked about the user interface and experience in 2017.

He talked about the key differences between:

Mobile First: Start with the smallest device and enhance the content as the device increases in screen size, and,

Responsive: Adapt the design to the user’s device and environment.

Take advantage of today’s prototyping tools. “Anything that comes into your head, give it a try.” One of the downsides of CMS tools, like WordPress is that, though they are highly customizable, sites can look similar if we don’t use our creativity.

Search out examples of good illustration and typography to inspire you. Dribbble.com is a good place to start.

Don’t neglect performance:

  • Make sure you have a good host
  • Compress everything that can be compressed – images, code, even typography
  • Offload your video and images to sites like YouTube and Flickr

Development

Henry Leung, Application Development Guru and Instructor at BCIT, gave us an overview of the development landscape and where to get started in becoming a capable developer.

You don’t have to learn all the programs and languages out there, but you can learn what they do, he said.

  1. Start with HTML and CSS as these are the foundation of everything on the web.
  2. Learn one DOM script, such as JavaScript or TypeScript.
  3. Learn one structural framework like Angular, React or Vue.
  4. Start working on version control. Use GitHub or GitLab.
  5. Learn a server side language like Go, Node, PHP, Ruby, Java, Clojure or Phython.
  6. Finally, learn a database like MySQL, PostgreSQL or MongoDB

With the exception of step one, Leung emphasizes that you only need to learn one language for each step. As long as you learn it thoroughly, you’ll understand the rest.

Structural frameworks are a key trend in web development because they allow you to develop in reactive components that can duplicate or remove themselves depending on what is required in the app. For example the user area in a chat app requires different components than the chat page itself. The use of these components makes development scalable and easy to maintain. 

Conversion Optimization

Of course, the end goal of all your design activities is to use the website to enhance the business of the company behind it. Brad Tollefsen, senior digital marketing strategist at Graphically Speaking talked about conversion optimization.

Conversion optimization means talking to your target audience and driving them to take an action such as purchase, call, fill out a form or sign up for an email newsletter.

One of the key problems the online marketer is facing today is that social media is putting up walls that prevent businesses from reaching their key market. Tollefsen calls these “walled gardens.” Though the audience is there, the marketer needs to either pay to play or find out how to get organically ranked on Google.

Three of these walled gardens are:

Facebook: Facebook has limited the reach of company pages to encourage them to buy ads.

Amazon: Amazon does not let you communicate directly with the consumer limiting repeat sales and shows competitor ads next to your product.

Google: Frequently changes algorithms and recently started pulling out the key information the user is searching for and putting it in an information box at top. This prevents the user from clicking through to the website.


To beat Google’s new answer boxes, Tollefsen says it’s important to ensure the information on your page matches the questions being asked. Under the search result there will also be related questions that you should also consider answering. 

The next Web Design / Digital Marketing Meetup will be on April 3 and the topic is “ecommerce.”