Web Design & UI

That’s why we speak in pixels, sleep in HTML5. Responsive grids make our hearts burst with joy. We deliver designs that go beyond aesthetics, we analyze and solve problems, we look for connections with user, and with the people we are creating for.

Web design is essentially the look and feel of your website. The styles that tell your user this is our business on a personal level, you belong here. Design can speak directly to different personality types and demographics by letting them know how they should be feeling, comfortable, excited, amused, and trust that your brand is exactly how it looks.

Material Design:

Material Design is a set of principles from Google that is continuing to evolve as they work towards creating a unified experience across the different platforms and devices users access your website from. One of the goals of material design is to try and replicate the surfaces and edges of materials to help provide visual cues to users as to what action they should take and the result of that action. Googles 3 Principles of Material Design Are as follows.

Material is the metaphor: “The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other”

Bold, graphic, intentional: “Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.”

Motion provides meaning: “Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.”

Flat Design

Flat web designs are traditionally about keeping websites simple, using a minimalist approach without the need for gradients, drop shadows and other 3D illusions. The lack of depth created by flat design offers an interesting aesthetic compared to traditional skeuomorphic web design, but can create usability issues. The reintroduction of basic 3D depth into flat design has morphed it into what we now call Flat 2.0. The added shading helps users navigate more easily and efficiently. Flat Design is very popular in the web design world today and it’s ability to easily adapt from mobile to desktop makes it an ideal choice for responsive websites.

Skeuomorphism

When website first started receiving well designed appearances skeuomorphic design was a major part of the aesthetic. Skeuomorphism is the basic concept of adding visual cues that help objects resemble their real world counterparts. In web design these visual cues help our website users have a more lifelike interaction with content we present to them on the screen. The heavy shadows are not always pleasing to look at and are often considered out of style. However, as designs move towards the flat and material ascetics skeuomorphism is making it’s way back into websites and popular applications as a major contributor to user experience.

Animations

Animations are the moving aspects of website that help the user understand what interaction they have taken or will take. They happen on specific actions over time and can increase your users engagement on the page.

Incorporating basic animations into your website’s design is great, but animating a lot of content can slow your webpage down and frustrate users.

Responsive Layouts and White Space

Designing websites today means, designing for mobile first as over 50% of web traffic comes from mobile devices for many businesses around the world.

Your website’s layout and content should adapt to different screens, pixel densities, clicks, and taps to make sure every person has the best experience possible while interacting with your business online.

Most responsive websites will follow a set of principles that define how the website will rearrange such as off canvas, fluid, layout shifter, and column drop.

Each section of content that users will need to understand should be given whitespace to help break up the major points your website is trying to get across.

Images, Icons, Video and Audio

Images and icons are an integral part of helping your users quickly understand your content and links.Users will often glance at your images before starting to read your textual content.

Video is a growing request from customers in the web design industry. Many business are looking to add HTML5 video to their websites that allow for design and layout customization. Properly incorporating video allows it fit seamlessly into the design and improves the experience visitors have on the website.

Forms

Well designed forms are the difference between having visitors and having customers on your website.

Your forms should be designed to help move customers or visitors through the conversion process with as few steps as possible. The less time and effort someone needs to spend entering form content the more likely they are to complete the process without being frustrated. There are some great ways to help your visitors focus on the form with full screen overlays as well.

Colours

Choosing the right colours for different elements of your website can help users identify your brand, and understand what their next action should be.

Colours can also convey emotions to the user, and the emotional trigger behind each action should be taken into account when selecting colours for your website.