Hierarchy of our main server is by client first, followed by job number and name.
The job name should be written in exactly the same format as what appears in our time tracking platform (WorkflowMax) to make things simple to follow and allow for creating a new job with accuracy. That format includes a “-“ between the job number and job name, and the job name being in title case.
The only exception to this is clients who have with us a retainer agreement. Those jobs within the retainer are added as tasks within WorkflowMax, but listed as separate jobs on the Global Share. They should follow the same format as the naming for standard jobs with the exception of beginning with a RN followed by a 5 digit number instead of 6.
Each and every job is broken down into 3 folders: ASSETS, EXPORTS, and PROJECT FILES. These should be written in all caps and there’s should be no project/job that does not contain these 3 folder at the first level besides our internal TINY GIANTS CO folder. These folders should only appear once per job and only immediately following the job name.
Should a job have multiple deliverables within it, say for example an event that requires a flyer, an invitation, and a presentation. Each file type folder (ASSETS, EXPORTS, PROJECT FILES) should contain a folder for each deliverable when necessary.
The file type folders (ASSETS, EXPORTS, and PROJECT FILES) are defined by the type of file contain within them and the most common use for said files. However PROJECT FILES and EXPORTS should be nearly identical in terms of folder structure and name as they are the most closely linked.
These are files are most easily defined as those that are either flat (unworkable), originated outside of our company or work machines, or supplies that serve the creation or manipulation of a job. These files may fall under the following categories:
Since this folder can conceivably contain any file type, it is sorted rather by origin and usage.
Anything we want to bring into a project file (Adobe Software, etc.) must first be placed in ASSETS before being linked or placed within the project.
This does not include animation artwork. Since those files are done in Illustrator and will periodically be changed they should be in Project Files in an ARTWORK or AI folder.
Large amount of assets should be sorted into subfolders of their own. Common subfolders are:
These files are also most easily defined as flat files (unworkable) that are either for external delivery to the client, internal delivery for review and revisions. Most common file types for this folder are flat video (.mp4, .mov, etc), flat images (.jpg, .png, .tiff*), or flat documents (.pdf).
There are a few exceptions for this folder within the design services. Occasionally we will be asked to deliver working files to the client. Even though they are also in Project Files, we need to package them, zip them, and place them into the EXPORTS folder before sending them to the client. These should not replace our internal working files but be a duplicate of them solely for sending to the client.
Another exception would be something like a Powerpoint presentation. This will be sent to a client even though there is no “flat” version of it, and therefore the presentation file will stay within the PROJECT FILES folder. However if you save it as a PDF to send to the client as a proof, then that should be located within EXPORTS.
*.tiff files can be saved to contain layers and are therefore ‘workable’. As a rule we save layered image files from Photoshop as .psd and use .tiff only as a lossless flat image format.
These files are most easily defined as the base for all work created as a company. They may be compiling software built out of external assets (.indd, .pr, .ae), files or single asset creation (.psd, .ai, .doc). The basic rule here is that if you can, have, or will manipulate that file for a project it should be in here.
This is another file type folder, but it is unique as it only appears once in every client, and above all the individual jobs. This folder should contain client specific assets that will be used across multiple jobs or be referenced regularly. These most commonly contain the client’s core branding assets (logo files, typefaces, branding guidelines, etc) but also may include a client supplied image, video, or graphics library that isn’t for one project in particular (see AACo).
Not all jobs require extra organization beyond the 'Holy Trinity' listed above. However projects can grow in scope and complexity so it is important to use common sense when adding additional steps of organization. When necessary or when the file count grows beyond 5 for PROJECT FILES you can create an OLD VERSIONS folder to keep the most recent files easily accessible, or create folders to separate software types like PSD or AI. This is especially important in jobs that cross departments and require both video and design deliverables within one project name. In all things its important to ask at all times:
If I knew nothing about this project, could I still locate this file and understand what it is?
We never work from a place of ‘this makes sense to me’ rather ‘this will make sense to anyone’.
Folders: All folders should be named in ALL CAPS always, with the only exception being the Job Number and Name folder.
File Names: File names should be in Title Case with a “-“ separating each important segment of information. File information should also be in order of importance loosely following the order in which we follow for our folder structure.
For example:
If you are making a flyer for the Italian American Chamber of Commerce West, for their 2020 Gala, a file name should look something like
File names should end in a clear V# to note the latest version. This is separated into decimals for internal exports and whole numbers for external exports. Meaning that clients will only ever receive a 'whole' version like V1 or V2 while we use decimal points to differentiate internal versions when necessary. For some design projects that don't need to be exported every time you may use less internal versions than say a video project.
For example:
Delivery files may contain a V# to help the client distinguish past versions but once final delivery is given it must note that in all caps. For a final version of a video you can use FINAL or if its a particular format, something like PRORES or WEB can apply. For design you will may also use FINAL unless something is more applicable like PRINT, DIGITAL, or MASTER for branding files. These final versions would take the place of a V# and so it should not be included. Additionally for delivery to clients the final file name should include a TGCo at the beginning of the file. This is not necessary anywhere but final delivery.
For example:
It’s important to follow these steps in order to ensure nothing is lost.
Any footage captured needs to be put in the ASSETS folder following this structure.
Duplicate a sequence when making any significant changes to a version / taking over from a previous editor.
Exports should be identical to the sequence name
In general a branding job follows 3 main stages: Concepting, Collaboration, and Execution. However as branding is immensely personal to each business, this process can be heavily customized to fit the unique and individual needs of each client. Final structure of the overall process is determined by the Creative Director on the project or the relevant Producer, this should serve simply as a rough guide for when in doubt, etc.
In this stage we take all information from the client that we acquired through questionnaires and in-person meetings and discuss internally important milestones we need to meet visually to accomplish their goals.
We then develop concepts individually rough ideas through references and mood boards of the direction we’d like to take the brand. These should not be fully developed stylescapes but rather loose “sketches” and references of design direction. This can be in any software that is necessary.
After discussing again internally we decide which directions have the most potential to develop and then create 3-5 stylescapes to present to the client. This should be developed in InDesign.
Once presented to the client and having received the necessary feedback we refine those ideas into one or two stylescapes refined as a complete design direction. This should be the shortest stage of the overall process, simple to ensure confirmation of the final direction.
The final direction/stylescape is now broken down and distilled into a cohesive set of branding guidelines and layouts are developed for all collateral included within the package. A final package is delivered to the client containing all finalized assets.
It’s important to follow these steps in order to ensure nothing is lost.
When beginning a job it is important to assess what softwares should be used for what portion of the project as often you will need to use multiple in any given project. There are exceptions to every rule but in general you should follow these guidelines:
This is the dominant software for most design projects, and will compile assets from other Adobe software. If the project requires equal amounts of text, imagery, and design elements then InDesign is the only real option. Additionally if the design is heavily text dominant, then InDesign is the best software.
This software is best used for vector based graphic elements and custom artwork and illustrations. It’s best to let the design ‘live’ here, but in delivery to the client when it needs to be placed on a company branded page, then it should placed into InDesign to accomplish this.
Though PS has expanded it capabilities over the years its still best at photo manipulation. Use this to edit colors, effects, and re-touching photos to be used within designs. Because it is raster based you’re extremely limited in changing the size down the road so ensure you have made your project large enough that it will be high quality across all platforms. This software should be used to create single compositions, like a photo or element, never for a layout of multiple elements. The one exception is for web ads, because they are very precise in pixel sizing and output and treated as a single image once exported.
When building a website in Webflow, follow these steps to make the development process as efficient as possible.
Once you’re logged into the TGCo Webflow account, select the three dot ••• menu of the Launchpad project. Then duplicate the project. Since we adjust settings for each project individually, we won’t copy any of the settings so deselect all three checkboxes.
Before you start working on the pages, head over to the Project Settings and make the following changes:
Go through the entire Style Guide page and style the html tags and classes according to the visual design. With html tags, make sure to select the pink tag within the class selector and not create a new class (blue tag). Adjust sizes for all smaller breakpoints, if needed.
From the Figma or Adobe XD file, export all the icons, logos and images you need for the web project. Figma layer names should always include the name of the enclosing folder. For example, a logo for the home page specifically would be named ICONS/1. Home/client-logo-dark. This creates a 1. Home folder within the ICONS folder. The export destination is the WEBSITE folder in ASSETS. See Folder Structure and File Naming for more information.
Use JPG for images with no transparency. The file size should be as small as possible and as large as necessary for image quality. Smaller images shouldn’t exceed 150kB while large images (like hero images or banners) can be up to 300kB. If it looks too low-quality, the size can be increased to around 400kB.
Images with transparency should be PNGs. During the export, make sure to only include colors in the color profile that are necessary, to keep the file size as small as possible.
Icons and logos should be uploaded as SVGs. Typography must be expanded to shapes before exporting an SVG.
Structure website asset folders on the Global Share as follows. The first ASSETS folder on the left is the one located inside the job folder inside the client folder.
Any working files for images or animations (e.g. Photoshop, Illustrator or AfterEffects files) are stored inside the PROJECT FILES folder inside the job folder. The folders should be structured as follows. See 01C Keeping It Organised for general file naming conventions.
Keep file names as short as possible while being descriptive. Everything should be written in lowercase.
For logos and icons, the names go from general to specific. Icon file names start with icon (general) - social (more specific) - linkedin (more specific). Include company/organization name, type of logo and the color for logos.
There are some basic components set up as Symbols that are going to be used throughout the website. Add copy, links, logos and adjust styling on mobile if necessary.
When naming CSS classes in Webflow, use the Client-first method. To learn more, look at the documentation and videos here: https://www.finsweet.com/client-first/
Depending on the use case, a grid or a flex box will make more sense to use. Make sure boxes within the grid/box are responsive and don't look squished up on narrow desktop browser. For more element flexibility, use Children Wrap on flex boxes and Auto-fit on grids.
Name interactions using the element name and a description of what it does. When creating universal interactions that will be applied to multiple elements, leave out the element name. To minimize the amount of interaction, utitlize the parent & children property where possible and apply interactions class-wide.
To ensure the website is accessible to as many people as possible, go through the following list and check if the design and functionality of the website line up.