Development - Craig Jamieson

2015 Web Design Trends

I recently taught a web design fundamentals course and at the end I shared some of the most common web design trends I have noticed during 2015. I have not and will not attempt to predict what will come, but there is certainly two obvious directions we seem to be going into. Firstly there’s the rich multimedia experiences, that care less about download speeds, but offer visitors something entertaining, something like Flash websites used to do, before Steve pulled the plug. I have a huge amount of respect for the efforts these teams have gone to, given how difficult this is to do with todays technology. The second trend is just he opposite, super simple sites that focus more on content, speed and minimalism. I recently ~~re-designed~~ re-aligned my personal site and unconsciously added a few trends without even realising it. I simply had no consistent images I wanted to use, so I decided the use of colour, large fonts and minimalism would suit me better. Hope you like my list.

Hidden Main Menus

With only a hamburger menu on the right hand side, the navigation is hidden, only on selection to reveal a full screen navigation that is hard to ignore. I’m sure there are other’s who may have done this before, but I first noticed that Teehan + Lax were early adopters of this technique.

Make it Big

Large full screen backgrounds are nothing new, but large fullscreen videos that seem to load relatively fast, are just epic.

Multimedia Experiences

The team at ultranoir have crafted an amazing online experience, the likes of which I have not seen since Flash ruled the rich media experience online.TimeSifht165 is a Digital & Interactive Fan Artwork inspired by the exceptional story of a unique French car : The Delahaye 165s and the amazing thing, is you can drive the car with your desktop keyboard or through your phone.

Patterns

I’ve started spotting patterns everywhere as a way of breaking the large device focussed stereotype layouts that were all of the web over the past couple of years. They re not only gorgeous, fill the screen, but they can be interactive. The light vector graphics also help with speed, but still offer a richer visual appearance.

Typography Microsites

It’s interesting to see a font get an entire site dedicated to it. Font microsites are popping up everywhere and none as slick as the FS Millbank microsite, which is gorgeous on any device.

Flat Design

Flat design is everywhere and with SVG being the preferred image format, I doubt flat design is going anyway any time soon. Love it or hate it, it makes sense in our multi device world where speed and vectors are king.

No more Boxes

It’s fantastic to see html sites breaking out of their grid like structures and telling stories in new ways. Again similar to how Flash sites were built, this is another tribute to the interactive era of the past, or maybe the beginning of an exciting future.

Simplicity

Simple, clean, content focussed sites that purely drive the message home make sense when we consider how despite faster internet bundles, the internet just seems to be getting slower.

No header background

Almost every template you find these days has the same large image background, and while we love the large format video experience, sometimes it’s simply lovely not having a large image in the background. Another great example of simplicity.

Very Large Typography

Someone commented during my course that this site reminds them of the mad men era ads, where there was a huge focus on copy driving the campaign message home. With the use of web fonts, we can pretty much use any BOLD font we like and do something beautiful with words and type.

Speed & Performance

I love how Google have stated that performance is a feature. Speed is super critical to users, UX people cannot stress enough the importance their research has identified speed as one of the most important things to users. But it’s more than that, with pages filled with all sorts of animation and other functionality, how fast these services perform is equally as important. People want a fast, smooth experience and taking into consideration speed and performance will ensure your site is a hit, not only with users, but with search engines too, who now rank you on both speed and performance. I think this will be the biggest trend going forward and as you might have noticed with the minimal websites above, simple is influenced by speed.

Learn to study

One of the most common questions I get asked over the years is how to stay skilled up as a designer. Well it’s rather simple, I keep studying. Now everything we do is a learning curve, and that almost seems natural as a designer, but learning also comes from studying. I have no formal education, I have a masters in nothing. But I have committed a lot of my spare time, to learning through studying online courses.

I try and study something new just about every day. Sometimes it’s just reading articles online, sometimes it’s trying a technique or an idea I have had, but mostly I use a couple of really good online resources.Some of my favorite resources to study are

Treehouse, for a wide selection of design, development and other soft skill courses
Udemy, for specific application and skill courses
Skillshare, which is good for just about anything, someone who was brave enough to teach, was willing to share.

Granted this doesn’t give me any sort of certification, but in an industry where it’s probably better to do good work than have any certification, studying daily, is a pretty good thing to do. If you’ve read my blog thoroughly over the years, you’ll know I also read, a lot, so I will be sure to share a few of my latest finds real soon.

The tip here is to become disciplined in your approach to staying skilled up within our industry. It doesn’t matter that as a Creative Director I might not use most of these skills, it just challenges me to think differently and fills me with knowledge about things I might have to give direction on.

Another thing is to at least learn something, be it a chapter, a full discipline or just a workshop, try and study something every day.

One last thing is to learn new things, stuff that makes you uncomfortable, challenges you and is something you never even considered you could do.

I am genuinely interested in design, in all it’s forms, it’s as much a hobby to me as it is my career, and seriously no one has ever really had to hold a gun to my head to get me to learn more. I think due to my lack in formal education in my youth, I have learned to love studying.

Non-responsive web design

I’m sure you have all heard the buzz words, responsive web design (RWD), adaptive or responsive sites. But incase you have been living on the moon.

Responsive web design is fluid grids, flexible images, and media queries. It was first defined in an article and a book by Ethan Marcotte.

To me, this term is already old school. If anything we should be talking about, non-responsive web design … websites that have not adopted RWD principles. To me simply, sites are responsive. We are so past the desktop browser being the only way to view a website. So please, if you haven’t already, do your people a favour and make sure you don’t have a non-responsive web design.

The only thing that’s constant, is change

In the earlier years of my career, I did much smaller projects. Microsites, personal sites, presentations etc. Then things got bigger, campaign sites, platforms, e-commerce sites and so on. Now days, I am very much interested in building product eco-systems, and I like to work on the same project for longer periods of time, by constantly iterating and improving things. I love how platforms like Medium, Pinterest and the like are always evolving the smallest details and constantly improving on their designs.

I could never have imagined that when I began my career, I was constantly about new things, but now the new thing, is a small detail that makes for a better experience for users. What I find amusing is that we used to redesign, and then make a big deal about it. But now we keep changing things, subtly as if no one will really notice, the site just kinda feels better. As they say, the only thing that is constant, is change.

Material Wealth

If you are interested in learning user interface and user experience design techniques, then a good place to start, given the wealth of useful knowledge shared, is the Material Design site by Google.

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

I consider myself fairly seasoned when it comes to interaction design, but if for no other reason than learning how to articulate the points made, Material Design has plenty of learnings, information and inspiration.

Focus on the project, not awards

It’s my opinion that creatives in the ad industry are focussed on the wrong things and they’ve lost site of the experience you go through actually working on projects. Too often I hear people start a project with statements like, “we need an award winning idea”, “this is an award winning campaign” and “this is the agencies Cannes entry” and honestly while it makes sense to keep your eye on the prize, let’s not forget the journey, so to speak.

I guess however, I can only really talk for myself. So I’ll try and explain things as I see them. I enjoy being recognized by my peers, the industry and even our clients. I love my FWA certificate, my Pixel Award etc. it’s good for my career, good for my reputation, my ego even. Most importantly, awards are good for business.

But I enjoy making stuff even more. I’m a journey guy, I appreciate what I and the team I work with go through on a day to day process as we craft our project. Sure there’s a lot of headaches in between, but getting us through that shows the kind of metal we’re made from. Each iteration we go through, every step we go through, brings us another step closer and sometimes further from our end goal, passionately pushing around pixels, debating ideas and figuring out the code. It’s this sort of stuff that makes me excited to do what I do every day.

Of course if you know me, although I see work as play, it’s not all work, I’m a clown, I always have time to laugh, to make an ass of myself, pull pranks and to do midnight food runs. We play together and we hurt together, but we’re in it together and those bonds are the lasting ones.

So I’d be so brave as to suggest you put on your big boy pants, you roll up your sleeves to get the job done and forget about your shiny shoes and monkey suit. Enjoy your work, stop focussing purely on the end reward, if you do great work that should be reward enough, and besides when you do great work, more often than not, you will get the recognition you deserve.

Legocy

Today is Mandela Day in which we celebrate on Nelson Mandela’s birthday every year. I thought it would be the perfect opportunity to share with you the Legocy project which I had a hand in earlier this year.

In support of the Nelson Mandela Foundation, YouTube asked agencies to enter a competition by making a short film as a tribute to Nelson Mandela. The smart folk at Quirk Jozi came up with doing a short Lego stop frame animation to one of Nelson Mandela’s most famous speeches. The hope is to get enough signatures and send a request to Lego to make a Freedom Fighters Lego set. As I have been collecting Lego for a personal project for a while, I was asked to help with the cast, and of course being such a huge Lego fan, I jumped at the opportunity to have a play date with the team at Quirk. In addition I helped build them a responsive one-page site, provided the domain and hosting. They won the competition, and below is the end product.

[youtube https://www.youtube.com/watch?v=9tdheV2I_Vw?rel=0]

Please add your name to the list www.legocy.co.za

Handoff

On Monday 2nd June, Apple announced new operating systems for their computer and touch devices, OS X Yosemite and iOS 8. There are many new features, but something that stood out for me was Handoff.

Handoff

Now your Mac knows the last thing you were doing on your iOS device and vice versa. So you can start something on one device and instantly pick it up on another.

With the ability to start surfing a website on your desktop and then immediately jump onto your iPad, responsive design has never been more important. This experience is going to become seamless and I’ll bet we’ll all wonder how we ever lived without this feature, but if your site is not properly responsive or dare I say, it’s not responsive at all, the users journey might be cut short. So any developers who have not yet learnt responsive techniques and to any site owners who have not made an update, perhaps it’s about time.

Crafting Digital

Last week the digital industry came together to celebrate the 2013 bookmarks awards and it’s great to see some great work being produced.The focus seems to be integrating campaigns and more around the idea, as it should be. But I feel that there isn’t a very high standard of traditional digital craft.

I went through all the award-winning work on 10 and 5 and there are only a handful of agencies who are really standing out for me. The thing that stood out most is that no one is caring enough about craft. Most of the supporting sites on campaigns aren’t great and simply functional. But there’s no real love for beautiful design, clever code, fast loading mobile friendly sites or any advances in technology. Hardly any of the sites I visited were responsive, reduced in file size or anything resembling the standard of design I have a spent an entire career trying to replicate. The best designed stuff came out of Ogilvy Cape Town, who are a traditional Ad agency, but in my opinion, in the running for the top digital agency too. Not that I’d take anything away from the teams at HelloComputer, Native VML and Quirk who are really coming into their own and crossing that line between traditional digital and integrated full service agencies.

At the end of the day, I totally understand that clients don’t really care about using SVG graphics so that things scale beautifully on retina displays and are tiny in file size, but as the digital industry, we should care, we need to set the standard. If work cannot be crafted by the time it needs to launch, the beauty of digital is that it’s easy enough to polish after the launch and we can always continue to refine our stuff and let’s be honest, if we are going to use it to promote ourselves, then you don’t need a budget signed off to show your work some love.

What I’d like to see from the bookmarks are categories that look at high quality web design and development, best interfaces, mobile apps etc. These need to follow best practices, be light, adaptive and certainly not follow the cooky-cutter format most of them currently have. They also need judges who understand this. While I have a huge amount of respect for the senior representatives from the previous winning agencies, they are not necessarily qualified to be judging work that is technically brilliant as important as it is aesthetically pleasing.

I like that the bookmarks award individuals in categories like User Experience Designer and Strategist, but what about best interface designer, digital designer, front-end developer and so on.

I feel bad writing a post like this, because I have never entered the bookmarks, I also haven’t been producing as much work over the past few years, but I do believe in craft and I do believe in our industry, so whether I’m producing the work or not, I feel I have a responsibility to motivate the industry to do better work. Yes I’m a kak writer, my rambling here isn’t going to inspire much, but if the lack of gold compared to the huge amount of bronze awards are a sign, the level of work is worse than my writing, with the exception of a handful of talented folk, we have a way to go, so let’s not forget about craft.

FNB site redesign

On the 14th July FNB launched their newly designed website. There have been a lot of negative comments made, which is to be expected given that people really don’t like change, but in fairness I have to commend the effort made by the team who have redesigned the FNB site, it is a huge leap forward compared to any other banking website locally (& abroad for that matter).

On the plus side, the site is responsive, fast, the use of text instead of images would be a huge help with that, clean(ish) and at least an attempt has been made to refresh it and keep up with current trends.

I haven’t had too many of the problems with my account, like some other people have reported, nothing is obviously broken. But I do see a lot of design and usability choices that I might have done differently. I’m not going to tear into the redesign, I think there are enough people doing that, but I will offer some advice, based on what I currently see online. I hope that this advice is taken into consideration as I really do believe it could improve the over all user experience.

Buttons
It’s not particularly clear what is a button and what is just text. You basically need to run your cursor over everything to see if it’s click-able and on touch devices that really presents a problem. If you are using text links, then underline them. If you have buttons, then make them stand out and have clear call to actions, so they cannot be ignored. Buttons sizes should be larger on touch device’s as your finger is the cursor.

Menus
Whether it be the main navigation menu, a sub menu or a list menu, again these need to be made obvious to the end user, as with buttons. Menus also need to show where you are. They should contain the most important functions of the site first, then secondary include things like about us, careers and other company information (you are mostly buying into the service, not the history of the company or it’s current job vacancies). With responsive designs, especially when focusing on mobile devices, menus should be easily recognizable and easy to use.

Navigating
When you click into many of the sections of the site, a modal like window appears and it has a close button. While that makes sense in some instances, it just doesn’t in others. For example, if you close the window to be taken to the home page, then why not just have an icon that has a house on it. If it’s a tab menu, then why have a close button?

If you are going to have several pages deep as you navigate, then at least include a bread crumb trail, so you can work your way back.

Fonts
The use of web fonts on the site ensure that it’s a lot more on brand, that the content is SEO friendly, will always show, even if images were turned off and best of all, it loads a lot faster. Given that the site homepage is secure (https://) due to the login form on the home page, this is a really smart addition. But they still haven’t got the balance of font weight and size right. On tablet and mobile devices, the text is tiny, which is a simple mistake easily fixed, just bump it up a bit for smaller screens, so you don’t have to strain to read it.

Use a colour scheme that makes it easier to differentiate between header, sub-header, body copy and links. Remembering that hover isn’t immediately recognized on touch devices.

Icons
One of the stand-out features of the old FNB site was the use of iconography and it has often been used as a shining example of what clients want when they reference other sites, so I’m not sure why they have hardly used any icons. Just like icons on road or airport signs, it would be easier to have some symbols that are easily recognizable on the site, so even if you have trouble reading, you know what to click. It would also help differentiate between what is a button and what is just text. Obviously this needs to be a consistent treatment or again it could confuse.

When designing icons, even something as simple as an arrow, make a little effort. A triangle is just a square cut diagonally and rotated. That’s just lazy. When you see all the curves used in the FNB CI (from what I can tell) surely some rounded arrows could be used.

If I had to take a guess, while speeding up the site must be a priority, user friendliness has to come in pretty close. If speed is the issue, then use sprites of png or svg graphics. You can even create a font, which includes all your graphics as vectors, which can be loaded in once.

Interface
The interface design is very confusing for me, I’m just not sure I understand what they were trying to achieve. But if I had to guess they were against the traditional scrolling website and they wanted the interface to seem more contained. The fixed header and footer was a poor choice, as was adding their logo on the bottom. Logos are commonly recognised as being home buttons and are best suited to being on the top left. This isn’t to say that it can’t be done, I see fixed elements and logos being abused in all sorts of ways now that this functionality is better supported, but on a banking site, I’d opt for something more traditional myself.

Another odd element is the left hand side where page headers are flipped 90 degrees; it all just reads a little odd to me.

The element that bothers me probably the most is the search and login section. It sees really cramped and hard to tap on mobile devices. I’m sure real-estate was a huge consideration for the designer, this section s one of the most used features and just seems cramped at the top on the edge. A little padding around everything would make it easier on the eye and touch.

Loading
Remember loading bars on Flash sites? I’ve designed enough of them to know that you can do amazing things, but in HTML, they are a functional element for content heavy sites that load slowly. I understand telling people the pages are loading, but if you are going to have a loader, that is a bar that represents the amount of data being loaded and indicates how long you have to go, at the very least, make it work properly. And only use loaders if it’s really necessary, given the speed of the page loads, I don’t think it’s worth it on this site.

Social Media
I went and looked at a bunch of international banking sites and not one, not even PayPal have social media icons on their home page. While I am aware that FNB dominates as far as banks go in this space, it just strikes me as weird to add these icons to your home page. But if you are going to, then at least use the official icons as specified by the specific social networks. Facebook is probably the most aggressive about this, but even the friendly folk at twitter have some terms too. FNB are a very public online site and could well land up in trouble.

Responsive Design
I believe the use of responsive web design was the smartest choice made when redesigning the site. I’ve not seen another bank do anything close to making their layout work across multiple devices. There are so many advantages to using this technique and given FNB’s commitment to embracing technology, making it work across multiple platforms is a sure way of allowing users to access their site on any device. I actually think the need for a mobile app and a mobi site becomes redundant. What I would caution the team on though, is their current interface design and various layouts across the devices. I’m not sure if they have finished this yet, but across my devices, the site doesn’t quite adapt enough to call it truly responsive. I struggle with the font sizes, buttons etc as mentioned above. Regardless it functionally works across all my devices, which means I can bank anywhere, which is a huge win!

Conclusion
I could continue to do this all day, but I am sure that the team have got their hands full given the mammoth task of pulling something like this off. Again, it’s a huge effort and I really am impressed, as usual FNB are ahead of the rest of the banks online and I’m sure once people get used to where old features now are, the complaining will turn into compliments as they have made the effort, no other bank that I’m aware of has made toward a better online experience. I would personally love to work on a project like this and to the teams involved, keep going, it’s inspiring and you all deserve a good pat on the back.