Getting my Design Environment ready
Getting everything I need for a website design project before the project starts, has saved me tons of time. It also helps the client to feel more at ease, and able to collaborate with me as they know where to find and share everything we will need.
Almost every project I have completed in the last year, I will have worked with either a team of creatives or a CEO. So, collaboration and file sharing is a must.
In this post, I will share with you how I set up my folder structure, the tools I use, how I setup Adobe XD and then move everything to development. This is the process I have used for most of my projects, however, some elements will change depending on the project and who I am working with.
Let’s dive right in.
Sharing and receiving content
I have created a folder-template that I will now duplicate and share with the client. This folder-template, is already in Google Drive, which is what I will be using throughout the project. Once I have closed a client, I will duplicate this folder, and share access to it with them.
In this folder the client, their team and myself, will find everything that will be needed for the project. These are some of the sub-folders within the main folder:
- Stock Photos
The idea is for the client to easily drop all the content I will need for the project there, and as the project gets started, I will be using this folder to easily share files and get feedback from the client.
For projects that require a team, I will set up Invision app as well. There they will be able to interact with the design work, and leave constructive feedback. I know that Adobe XD has its own shareable link, but many people are still getting used to it, so for those who do not interact with it, Invision App and other design sharing platforms will be great.
Once the project is completed, I will most likely move everything to Dropbox. Using this application, the client can always have access to their documents and I will know where to find everything for upcoming projects, as needed.
A week before the project gets started, I will give the client a list of what I need and access to the Google Drive folder. This will allow us to get started with everything we need during the Kick-off meeting, instead of using this precious time sorting and organizing files.
Setting up a style guide on Adobe XD
Adobe XD is my choice for designing digital products and experiences. You can also do this with Figma, Sketch and PSD or Adobe Illustrator.
I have been creating a style guide for every design project for as long as I can remember. This is sort of like a Brand Guideline, with all the elements and assets you will need to ensure there is a consistent look throughout the project.
This style guideline consists of:
- Typography – Headings and paragraphs styles
- Colors – The brand’s main colors
- Buttons – The main buttons I will be using (Main call-to-action, ghost call-to-action, and links)
- Any other global element that I will have throughout the project
Once I have designed an element that will be repeated throughout the website, I will add it to this canvas.
With Adobe XD and with many other designing tools, I am able to create global elements. So, when working with a client and let’s say a color needs to change in the main call-to-action button, I will head over the style guide canvas and change it. This will change it any where else this global element is found on the website.
This file is handed over to the client as well when the project is completed. They can use it as the design system and grow it as their business grows.
It also ensures that if a new designer or developer joins their team, they will know exactly what everything should look like.
I will also make all the typography into different character styles. This has sped up the development process and communication with developers. This gives the exact font and size without having to wander around Adobe XD.
Setting up the rest of the Art Boards
I believe that the smallest tasks sometime take the longest time. So, if there are few elements on a project that I know will work a certain way, I will try to have it ready before I do any work. And setting up art boards is one.
For every project, I will need 3 main screens – a mobile, tablet, and desktop screen.
For each of these screens, I know that the content will always be built in a container of 1150px to 1250px in width. So, I will place my grid to fit that specific width.
With regards to actual art board dimensions, I normally leave it at 1920px, which is a default size. But in the past some projects max-width for sections on the website were set 1500px.
You will notice the 1500PX max width in a lot of new websites, especially in the hospitality industry.
By using a container of 1150px width, I know that the website will display with enough space on either side of the screen for a smaller laptop. This also means that if I set it up for a 1250px, some elements will be right at the edge of the screen.
These are just sizes and dimensions I have learned from building websites. So, instead of spending 30 mins setting this up, I just get it done before the project starts. I guess it is like an Adobe XD project start template.
Speeding up the development with a style guide
So this has become a go-to for me. This has accelerated the website development process for me quite a lot.
I am able to put all the elements I need there, and then get into the development of the website. And just like with Adobe XD, the elements can be made into global elements. This allows me or the client to change the look of an element in this file, and it will change throughout the website.
If you are not using Webflow or a WordPress framework that allows this, your solution will be to code the CSS properties of your website. So, when I worked with the older versions of Divi, I would have a CSS file with all the modifications I needed to make to get the project started.
In the last 7 years as a freelance-designer, I have learned to be organized for myself, but also for my clients. The more structure a project is given, the better the outcomes.
It is important to take note of what works and to remember not every one is familiar with every platform. For example, a creative team might not be familiar with Trello which is what I might use for project management, but they might be familiar with a Google File structure to manage projects.
So, it is important to not limit ourselves to what we know. Instead, be open minded to hearing what each party is comfortable with. The way to find this out is by asking questions.
That is it for today! 👋