Development - Craig Jamieson

Using AI to Build My Site

If you’ve noticed things looking a bit off, that’s because I’m seeing how far I can push AI to build this site.

It started when I was fixing some bugs and got curious. AI’s pretty good at writing, so why not see if it can help build a site I couldn’t do on my own?

Here’s the deal: I come up with all the ideas. AI just executes what I tell it to do. It’s like having a senior engineer who can code faster than I can, but doesn’t think for itself. I’ve been trying out ChatGPT, Claude, and Perplexity for this.

It’s been interesting. AI can quickly turn my ideas into code, even for complex stuff I don’t know how to do myself. But man, the bugs. I’m constantly switching between tools because they all have different quirks and limitations.

The dream is to eventually use this to create cooler stuff for clients without needing a whole team. Right now though, it’s a bit of a mess. But that’s part of the experiment, right?

I’m not documenting every little thing, but I’m thinking about writing it all up or maybe doing a YouTube video once I’m done. Could be helpful for other designers who want to try this out.

It’s a bit of a wild ride, but I’m curious to see where it goes. AI is often pitched as the tool to come up with ideas for your site, but I’d urge you to use it as a high-level coding tool.

A Decade of Responsive Web Design

Today marks 10 years since Ethan Marcotte published his article for A List Apart on responsive web design. It’s become the standard for how we build websites that scale across devices and something that helped me transition from Flash to HTML in 2010.

https://twitter.com/beep/status/1264919155364503554

I had the good fortune to meet Ethan at a conference in 2018 and his workshop and he couldn’t be a nicer guy, super smart but humble in what I believe changed how web sites were built. It’s incredible to me that it’s been a decade already. Thanks again Ethan.

What is a design system?

A design system is a living ecosystem that serves the teams working on deploying products. As a central repository, it can be a combination of a coded components, design guides, brand assets and rules of engagement. This is usually an independent project run by a dedicated team who maintain the overall repository, code all the components, deploy updates and create all the assets for consumption by the teams across an organization.

The following are some of the most common categories within a design system.

Styleguide Commonly referred to as a living style guide is a visual reference of all the design assets that make up a brand and it’s supporting media and include things like colour, type, layout and other assets to help the design team consistently utilize the brand assets. This is constantly growing as more and more assets are added and the brand evolves.

Visual Language The brand will share the visual assets and their usage to best communicate effectively across media and contain a variety of produced assets such as video, icons, illustrations, and photography.

Design Language Every great design starts with a definition of the values and the standards to which a design effectively comes together and communicates seamlessly across multiple media. Principles are shared to help teams better understand why decisions were made and how best to apply them.

Pattern Library A coded repository of atomic-like assets for developers to easily consume to reduce the amount of churn and repeated assets that need to align across a project and function in a consistent way. This is usually html and css and some basic javascript. It can be, but not necessarily include complicated coded assets such as angularJS, jQuery and React, as technology changes so quickly code might be redundant before going live. The coded assets are both visual, functional and can be executable.

Voice & Tone Effective content and communication requires a brands voice and tone, while also including guidelines on how to effectively add content to communicate consistently across media.

Brand Guidelines Brand assets can be downloaded and appropriate guidelines shared to ensure consistent brand usage and avoid dilution of the brand and incorrect deployment creating confusion when developing brand assets.

Added to that, guidelines, legal documentation, how to contribute, get support and update logs are essential to maintaining a design system.

I hope you found this very basic guideline useful. Design systems are ever increasing in their detail and functionality and I’m sure in the future I will explain in more detail all the new features you can add and why you would need them. Whether you’re a designer, a developer or running teams and projects, a design system has to be the best way to create a consistent product, increase productivity and align your teams to your companies product vision.

2017 Site Maintenance

It’s been ages since I blogged properly, but I have every intention of sharing loads more with you all. I have started doing some site maintenance. Currently, I’m playing with adding some gradients to all the pages and posts and also putting my blog at the forefront rather than my work, as I’ve just not got much content to show there, as well as how I share my posts across social channels. I have had a super 2017 and look forward to doing a recap over the next few days and sharing everything I have been doing. So thanks for understanding, and please check back soon for some updates to the site and a recap of the past year.

System design: Block builders

In a big organization, there are a lot of moving parts across various departments and projects and when the goal is to create a single design language, keeping a consistent design can become almost impossible. My strategy for this was to develop a core design team who would be responsible for designing the individual components of our design system which could then be deployed and consumed by designers who worked within project teams. This was met with a huge amount of resistance as people seem to think that having bums in seats within projects would speed things up and deadlines would be achieved. However, the goal is to have a consistent design and building up a living style guide would provide us with a platform that all teams could understand and consume the required components in which to apply to their designs. Ultimately project teams should be more focused on other priorities like functionality, better user experiences and align all projects into the specific channels that will deliver these to the people who will use them.

In order for me to explain this over and over again, to which I have mildly had some success, I have managed to create the analogy that this core design are busy creating the system, which if I get my way, will consist of pairing up designers with developers so they can dev these components and test, break and animate them before committing them or rolling out several static designs, is call these my Lego block builders. Their responsibility is to make the Lego blocks which the Lego builders will consume to make the Lego models. There is a very generic list of components almost every project may consume from (atoms), there’s how you piece these components together (molecules) and then there’s the way they work together (organisms). The Lego builders consume this within their various projects and should they need a specific block that does not exist, it is their responsibility to identify it and bring. it to the core design team who will then work with them to create the blocks and how they work together to deliver on the projects needs, feeding back into the system for all other Lego builders to consume. I have borrowed some language from Atomic design principles, and we have probably all played with Lego, so this should be language most people can understand.

I am often told that this is not agile and this is creating silos etc. Maybe, but it’s necessary if you want to have a single look-and-feel that represents the brand consistently. Spreading the design out across multiple teams, on multiple projects, in various buildings would simply not work. While I could move across all teams and keep alignment, the task is too great and much easier to control by giving out a set of guidelines for teams to follow. It’s a subject for another post, but living style guides and designs systems are necessary and utilised by most big organisations who want to create seamless experiences for their customers, but throwing tons of resources won’t develop this any more successfully than rather putting a core team together who work with each other to solve the visual design challenges and deploy them into the style guide and then iterate accordingly. I think the challenge is to identify the brick builders from the Lego designers who consume the bricks and make sure that there is still enough design challenges for everyone to be inspired no matter which role they are best suited. The other is getting people to understand the vision and hopefuly make them understand that in order to be consistent and speed up the design process, a small core team is the most practical solution I can think of.

Designers: learn to code

For a while now, designers have been able to fire up their favorite design program and whip out some layouts which are sold to clients and then handed over to developers. While it would be damaging to some talented individuals to expect them to be able to do anything else, other than what they are primarily good at. For everyone else, they must learn to code.

The problem is that more often than not, is that the design does not come out built the same way it looked when it was designed. There could be any number of reasons, such as the designer not understanding what development limitations there might be, the developer does not pay attention to the details a designer might see, or things like responsive behavior and animation which you can’t explain in a static design.

The only logical solution I see is for designers to become great coders, learning how to design in the browser vs in a visual design app like sketch or photoshop. Of course, if developers came to the party and teamed up with designers like copywriter/art directors come together, that would be ideal.

Designers please, enroll in some online courses and learn to build your own responsive layouts, code animations and build a set of tools that will speed up your process with best in practice functional UI. Designers must learn to code.

KLM iFly 50

I wanted to share the KLM iFly 50 website today as it’s the first website I have seen in a while that just blew me away. It’s simple but technically brilliant and I’m truly inspired.

To celebrate the iconic fiftieth edition of IFLY KLM Magazine, we created the ultimate travel collection, presenting the 50 most beautiful, surprising and mesmerizing destinations from all over the world. (found @ Awwwards)

I don’t pay as much attention to these sorts of sites anymore, but I am inspired enough to start keeping an eye out and sharing more finds to inspire you too.

Mobile Input Types

Virtual keyboards are awesome. Use them.

One of the easiest, cheapest, fastest and most effective ways of improving your mobile experience is using the right input type. It will save the user dozens of annoying taps and all you need to do is strike a few keys.

It’s not going to transform a terrible mobile experience but it could make the difference between a good and awesome one. There are dozens of input types, have a scroll down to discover when you should and shouldn’t be using them.

Go check out Mobile Input Types

Web Designers in 2016

Its been a while since I actually got to code a website from scratch without some sort of CMS or other hosted solution. Web design simply is nothing like it was when I started out almost 2 decades ago. A lot of the major engineering is gone and for that matter, so is a lot of the design/styling. We really don’t do as much grunt work as we do, know what works. So I was thinking about what a web designer in todays online world looks like.

Nomadic

Working nomadically is nothing new to web designers, but it’s never been easier than now to work remotely. As co-working/co-living spaces become more available, with high end internet access availability, there really isn’t much holding web designers back from enjoying travel/vacation and work, a term we like to call a workation.

Basic skills

No web designer should have the right to call themselves that if they cannot at the very least understand how to write html and style with css, but I have a sneaky suspicion there are plenty of folks out there who simply know how to use the customisation panel within WordPress or their hosted online solution.

Knowing

There doesn’t seem to be any reason to have to code anything from scratch anymore, so the modern web designer really does have to know, rather than have to do. You could probably surpass more seasoned web developers by simply trying all the platforms out there and understanding their offerings than actually being able to develop anything.

Designing

Often we forget that despite being able to code, or not, there is the design, in web designer. There is very little need to design anything anymore, it’s more like a mix and match type of process. I don’t even see the point in doing a mockup design anymore, I think it’s easier to just jump straight in and add your logos, select fonts and colours and add your content.

Content is king

This old rule still stands true, even today, except it’s a whole lot easier to do now than at any other time before given how comfortable we all are taking photos of just about everything using little more than our phones and writing micro copy on the fly. Crafting words will always be an art thats hugely valuable, not even spelling is something we ned concern ourselves with, given the incredible tools available to us in editors.

Thinking

I haven’t been paid to do much for years, most of how I keep the lights on has to do with design thinking. How I see things has become far more valuable than how I (physically) do things. Knowledge, experience and approach mean a whole lot more to people than how neat my style sheet is.

Users vs taste

While every designer should have good taste, I guess it’s what separates us, it’s far more important to understand our users needs than to impose a design style. I still believe I’m an artist, my tools have just changed, my choices show my style, but my methodology and approach are the real art for delivering an experience people will love.

Innovation

You don’t have to be hugely innovative to be on the edge of web design, you simply have to know how to use the right offerings, but if you do want to innovate, then there are plenty of opportunities to join teams of designers building apps, templates and services that require that sort of thinking. But being a pioneer does not a web designer make, you can earn without being the inventor, rather you are more of a curator, so to speak.

The web is dead

If that was the case, then I see web people. Web designers are everywhere and I would think it’s one of the easiest things to get involved in, no matter what your experience. The learning curve is constant, you have to keep your skills sharp, whether it’s designing, coding or learning the latest online offerings. Being a web designer will always evolve, the web is not going anywhere. As long as there is a browser, web designers still exist and while I’m sure their is a decline in people accessing the internet by way of the browser due to apps, there is a growing internet access footprint as connectivity becomes more available.

In 2016, you don’t need to design or code to be a web designer, you just need to know how to solve problems for the web.

Freelancing Creative Director Failure

My career has never been the norm, not by any standards. I did not get a matric, I dropped out of college, I was self-educated in design, computers, development etc and instead of joining an agency, I started freelancing from day one. But eventually I joined an agency and was quickly hired as a Creative Director and did a descent job of leading the digital charge within the Ad industry. But it was never smooth sailing and I have had to resort to freelancing again, with very little success. Now if I had the answers, I would at least have a fighting chance of understanding why after 10 years of successfully freelancing, I was suddenly unable to. So I have a whole lot of assumptions as to why, freelancing as a Creative Director is doomed to fail.

Before I start explaining, I want to apologies for the mixed use of CD and Creative Director, I simply felt it made sense to use one or the other as I typed it. It’s how I roll … deal with it.

Networking

Any good freelancer will tell you that one of the must have things you need to go it alone, is a pretty strong network. Well I have been a CD is some of the most respected agencies in the country, if not the world. I have successfully worked on many campaigns for multiple brands and formed relationships not only with my colleagues, but the clients too. I don;t mind saying I contacted everyone I felt comfortable enough to reach out to, but with very few people able to offer much more than encouragement. Which leads me to wonder, why that is.

Expensive

My first thought is that people may think I’m an asshole, it’s possible, but I can’t control what people think of me and I try not let that get me down, besides that would make a lot of people pretty two-faced, cause I generally feel pretty liked. So my next thought has to be that people assume I am too expensive. Truth is, I probably am too expensive. While I would not dare charge the rates an agency does, I do believe given my experience, I am worth a descent wage. Even if I wanted to work for less, I’d also have to be responsible and charge the type of money, I am used to earning, or what am I doing this for. I can;t exactly be a homeless CD, it just doesn’t work like that. Any CD would understand what I’m saying, firstly we don’t earn as much money as people think, we gave up getting rich a long time ago when we chose creativity as the main focus of our career, by joining the creative leadership team at an agency. It was a very conscious decision. The hope being that maybe one day we might be promoted into a higher earning position, get profit share or some day get our name on the door. The industry is pretty good at coming up with reasons not to give you the annual 5 – 8% increase agency folk might get, there is no pay for overtime and a world cup period where festive bonus cheques comes once in a lifetime, at least it did for me. But still, I believe I charge a fair rate, so much so that the number I had in my head is actually less than I earned, before I joined an agency.

Skills

You’re the big cheese, you direct creative, so your skills are probably a little rusty. Now I’ll explain this in detail next, but to be clear, you cannot freelance as a creative director, you are a creative director freelancing in digital. So it means you have to do the work, the teams you used to manage did. You have to design, develop, art direct, write and so on. And truth be told, there’s a lot of CD’s I know who were never very good at doing any of those things before taking on the CD role, they were good at brown-nosing the man who hired them over Friday drinks. But that’s not me, as I said, I successfully freelanced for a decade prior to becoming a CD, and given that I was self-taught, I made it a habit to constantly keep learning, so despite being a CD by day, I used to study at night. I admit my confidence in this area, was not as high as I would like, but that’s only due to the high standards I aspire to for myself. I was always a believer, that I need to know as much as anyone I manage, so I can make informed decisions. I am also quite a geek, and wanted to stay up to date and engage with colleagues in my industry who were doing big things, away from managing talent within agencies.

Director

The creative part of what I do, combined with the skills I have, means I’m pretty much covered. It’s the director part that I debate, even if it’s only with myself. Good CD’s lead by doing, they have the respect of their teams cause they lead from the front, but another important thing is relationships of mutual respect. If you think it’s easy to walk into an agency and actually freelance as a CD, let me tell you, it’s tough work. Creatives in agencies have mis-guided egos, so trust me, being told to lead a team is challenging. A CD is supposed to direct creatives, and depending on the agency, be responsible for not just the teams, but the direction creativity goes within the agency, but if you’re only a temporary resource, it’s not likely you will factor into the operational or drive the vision. It has been my experience that other than being a contractor, you are rarely ever asked the CD at an agency. Often I have been asked to help with campaigns etc, but I tend to fill the role of an art director or designer. Positions on a freelance level that are not a whole lot of fun for someone who has been leading creative teams for the better part of 7 years.

Conclusion

Freelancing is supposed to be about working for yourself, choosing when, how and what you work on. Waking up late, going to bed later. Sure there’s a bunch of challenges associated with that, but for a long time I did it, producing some amazing work, that spans a client base and a network across the globe. But then things were simpler, I had no education, so I earned enough money to pay the few bills I had, but it provided me the opportunity to free up my time to learn more, usually by playing. However now, as I furiously head towards my 40’s and I’m responsible for more than just myself, but now a 6-year-old kid and some poor financial decisions, I can no longer earn what I need to be a freelancer, yet alone a freelance Creative Director. I don’t know that I have explored this in it’s entirety, so perhaps there will be a follow up post and it might only be a play on words or my own understanding of responsibility, but you might be an art director, a designer or even a contracting creative director, but you will never be a freelancing Creative Director, it simply makes no sense and you are setting yourself up to fail.