Menu

Welcome to Applied Works – we hope you enjoy working with us! Please familiarise yourself with the following best practices and shout if you have any questions.


Before

What is it?
We design for many different platforms and devices. Before work begins, ensure you know how your design is going to be consumed. A responsive web app requires different text size, margins and contrast to large-scale video assets.

Understand the user
Who is the audience and what do they need? Carefully considered hierarchy and wording are tantamount to your interface being easily navigable and understood. Apply logical order and clear labelling to guide the user; if you can’t explain why something is where it is, it’s probably unnecessary.

Content first
Never begin any design work without real content: real data and real words should inform the design. On the rare occasions where content isn’t available before design work begins, try and establish realistic content parameters first. Consider whether your design needs to be flexible enough to accommodate any amount of content.


File organisation

We’re a small team, so sharing the work load depends upon us all maintaining this folder structure on the server:

Projects
– Client
–– [XXX] Project Name
––– 01-Discover (raw data, content, style guides, brand assets)
––– 02-Define (user research, wireframes, concept documentation)
––– 03-Create (mood boards, design files, design assets)
––– 04-Deliver (presentations, final design work, development assets)

File naming convention
ClientInitials_ProjectName_Platform_YourInitials_VersionNumber, for example:
BBC_PersonalityTest_Desktop_AB_01.ai

Versioning
Create a new version of your file every time a significant change is made. Drop old versions into an ‘Archive’ folder. Keep only latest versions in the top-level folder.


Adobe Illustrator

Most of our design output is vector-lead interface, so we use Adobe Illustrator for everything from wireframing to front-end design. There are several Illustrator design templates on the server which should help you get your project started. This includes a wireframe library, design files for various device widths and presentation decks for sharing work with clients: Resources > Design Assets > Illustrator Templates.

Follow these principles when working in Illustrator:

Artboards
Instead of layers, we use artboards to separate each of the different screen designs required for a project. This means PDFs can easily be exported which are great for sharing work. Never move artboards, move content using apple+f to paste in place. This is for two reasons:
• Moved artboards do not always sit on whole value pixel co-ordinates
• Content on different layers (such as guides) will not move with the artboard

Layers
Use layers to isolate content that is the same across multiple artboards. For example, all guides should be drawn on one locked separate layer.

Images
Always either embed any placed images within the Illustrator file or make sure they are saved in a location common to all users.

Essential shortcuts
Apple+F – Paste in place
Ctrl+alt+v– Paste in place on all artboards
Apple+alt+y – Pixel preview mode
Return – Move (or copy currently selected object)
Apple+d – Repeat last move
Apple+0 – View at 100%


Make it pixel perfect

All front-end designs we share with the client and hand over to development must be pixel perfect. Check your work carefully and stick to the following practices:

• Work in pixel preview mode (apple+alt+y).

• Ensure ‘Pixel Snapping Options’ are switched on.

• Check object co-ordinates and dimensions are whole pixel values. If an object has a blurred edge, it’s off-pixel.

• Most of our projects utilise an 8px grid; use multiples of 8px to move and duplicate objects accurately, quickly and easily.

• Check your designs at 100%.


Style sheets

Keep your style sheets as simple as possible. Does your design really need sixteen paragraph styles and four different grey border styles? Sticking to only a few type sizes, font weights and colours helps other designers and developers interpret your work correctly and quickly. Keep track of your paragraph styles on the pasteboard; save your colour swatches with helpful names.

Check with the development team before designing something that might be tricky to implement, like setting type on a curve or applying patterns to type.


Don’t forget to…

Take a break. Ask for help.


Accessibility

Accessibility is relevant to every one of your users. As a bare minimum we expect:

• All type to be WCAG 2 AA Compliant. Use Snook to check your work.

• Colour to not be the only way to tell objects apart. Check using Adobe tool located within View > Proof Setup > Colour blindness.

• Type to be clearly legible at 100% scale, ideally tested on device.


Share your work

We use Basecamp to keep track of our projects.  PDFs are good for sharing wireframes, type-optimised PNGs for final pixel-perfect designs.


Handover to development

• Assets Including fonts, icons and graphics
• Object states Including normal, hover, active/click, focus and disabled
• Grids and breakpoints
• User flows

Don’t leave the development team guessing about any detail.