Author: Tyler

User Experience Designer vs Developer/ Engineer

Post author By Tyler
Post date October 5, 2016

User Experience (UX) Designers combine their research and graphic design skills together to understand the user needs and produce concepts/solutions/designs that people want to use. This requires a focus on human behaviors, psychology and understanding why people do what they do. It’s all the soft squishy, creative stuff on the right-side of the brain. Most UI Designers can tell you what it should do and why it should do it, but can’t actually build something that works.

User Experience (UX) Engineers fill in the middle ground by combining both design sensibilities and technical skills together. They are skilled at making something both look good and function in a browser/device at the same time. They have the production skills to be able to produce visual designs in Sketch or Photoshop and turn them in to HTML/CSS code. This requires in-depth understanding of how browser rendering engines behave to be able to implement design for the web that renders correctly on all browsers and devices and get all those pixels perfect placed.

I offer both UX design and development, marrying the left and right brain. Contact me today to work on your project.

Blog Design

UI Designers Network

Post author By Tyler
Post date October 5, 2016

As a UI designer with 15 years development experience, I get quite a few IT recruiters contacting me from Vancouver to San Francisco and abroad. Actually I get contacted about new job opportunities each week or so. In an effort to proactively search for quality design work, I’ll be applying to join new networks and groups including:

Any referrals are much appreciated. Thanks for reading!

Logo Design Responsive Web Design Web

2016 Web Design Trends

Post author By Tyler
Post date October 2, 2015

Here are some of the design trends for web design and development we have seen in 2015 and will continue to be strong design elements in 2016:

Flat design without heavy gradients
Clean yet colourul with greens, earth tones, bright but desaturated colors
Slick, simple UI
UI can be the content too, not everything has to be in a box or button
Breathing room for content with empty space
Links can have dotted underline for tooltips etc
Check marks and feedback animates using SVG
Sites will have to responsive and use a secure domain

Blog Digital Responsive Web Design Web Best Practices

2014 Web Design Trends

Post author By Tyler
Post date March 18, 2014

Trends we can expect to see this year for web development and design. Building on what became popular in 2013, here are some web design trends you can expect to see more and more in 2014.

1. Creative approaches to navigation – gone are the sidebars and the expected menu bar of years past. This year, you can expect to see more sites with creative navigation, tabs, layers, and animation. Off canvas User Interfaces seem to be on trend.

2. Simple and clean colours – more sites than ever are employing a monochromatic look with a pop of a single, usually bright, colour. This draws the viewer’s eye directly to the most important information.

3. Hero image – as the web becomes more and more visual, images are taking the place of content as “king” of the internet. As such, websites that feature large hero images on the home page are becoming more popular.

4. Unexpected typography – hand drawn and energetic fonts are something we will see more of in 2014 as we did last year. Look for combinations of unique font faces with clean text to create an eye-catching juxtaposition.

5. Video in place of text – videos are a great way to engage with your audience and add new depth to your search engine optimization. Now, we are beginning to see video used in place of lengthy text on the home page to eliminate clutter and enable viewers to interact with the brand in a dynamic way. Videos as backgrounds for pages is on trend.

6. Long scrolling page and parallax elements – we’re starting to see long scrolling becoming the norm for shallow sites with little need for navigation. For service-based clients, a long scrolling site may be ideal, especially if you are in a visual industry. As seen on my homepage, images in the background can scroll at different rates giving a layered look.

7. Image Filters – manipulating images for use on sites is a trend I expect to continue into the future. With the popularity of apps like Instagram, and the integration of photo effects into iOS7, we know that altered and filtered images are here to stay.

8. Responsive web design – it’s important to define your target market clearly and determine if a mobile responsive website is necessary for your particular brand. In most cases, it’s a great idea to have this from the beginning. A mobile first approach seems to be the way to go.

Curious as to what I can do to make your site better using these cool techniques? Contact me today for a quote.

Responsive Web Design SEO Web

EA SPORTS FIFA Football Club

Post author By Tyler
Post date August 21, 2013

Football club web design and development

Worked with EA Sports in Burnaby, BC on a responsive framework for marketing and portal sites. Football Club second screen app front-end too.

View Project: easports.com/fifa
View App for iOS, Android and Windows Phone
Take a Tour: easports.com/fifa/football-club/tour

Web Best Practices

HTML5 Canvas – Arcs

Post author By Tyler
Post date February 14, 2013

HTML5 is sweet and I have been experimenting with it’s canvas using Javascript and CSS to render a user interface and graphics. In the example below I am drawing multiple circles and arcs on the canvas tag. This could be used online or in an app for charting or statistics, even a clock.

Code Example Below:

var ctx = $(‘#stat-arcs’).get(0).getContext(‘2d’);
ctx.lineWidth = 20;

ctx.beginPath();
ctx.arc(124, 124, 120, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 100, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 80, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();
ctx.beginPath();
ctx.arc(124, 124, 60, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();

ctx.beginPath();
ctx.arc(124, 124, 110, 1.5*Math.PI, 1.05*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#1E263C’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 90, 1.5*Math.PI, 1.25*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#435A6D’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 70, 1.5*Math.PI, 1.0*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’111111′;
ctx.strokeStyle =’#57708A’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 50, 1.5*Math.PI, 0.8*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.strokeStyle =’#95AABD’;
ctx.stroke();
ctx.beginPath();
ctx.arc(124, 124, 40, 2*Math.PI,false);
ctx.shadowBlur=3;
ctx.shadowColor=’#111111′;
ctx.fillStyle =’#FFFFFF’;
ctx.fill();

Canvas Code:
... id="stat-arcs" width="248" height="248"...
Please note HTML5 does not work in IE8 or older, but those users see the text in between the canvas tags as seen below.

Results as PNG image in modern browsers as seen below.

Responsive Web Design

Responsive Web Design for Fitness Trainer

Post author By Tyler
Post date September 19, 2012

This local fitness trainer contacted us to create him an online presence. This site works on all devices including iPhone and iPad using a responsive theme that detects the device width.

View Project: jadefit.com

SEO WordPress

North Vancouver Realtor Site

Post author By Tyler
Post date September 6, 2012

Complete website design with development and facebook page. We used WordPress as a Content Management System for local Real Estate Agent Claudio Tonella. He can add new listings and add images, video and property details all in minutes. The CMS gives him the power to update listing when they get sold or price changes.

View Project: claudiotonella.com

Uncategorized

Website Re-Design of autoTRADER.ca

Post author By Tyler
Post date August 30, 2012

As seen on National Canadian TV ads – Neos worked on the new user experience of autotrader.ca and sell.autotrader.ca. We were pleased to work with Trader Corporation on the new and improved autoTRADER® websites. The key was to simplify the ad steps working with marketing coming up with graphic design layouts. CSS, HTML5 and Javascript by Tyler.

View Project: autotrader.ca

View Project: sell.autotrader.ca

SEO WordPress

Northwater Consulting Website Design

Post author By Tyler
Post date November 10, 2011

We created a new website for Northwater Consulting with interactive “Projects” and “Gallery” sections. The client requested that they be able to update their new website themselves, so we added a Content Management System (CMS) with WordPress. We also helped the company get ranked high on Google.