Views
3 months ago

Web_Designer_UK__May_2018

GET PRO DESIGN SKILLS

GET PRO DESIGN SKILLS FOR COMBINING FONTSBringing together compatible fonts is essential for great designs 1 COMPLIMENT YOUR FONT PAIRING Don’t go mad with fonts, pick a couple that work together and set the tone and mood you want to portray. Contrasting fonts tend to work but be careful of readability and scale. 6 APPLY COLOUR WITH ACCESSIBILITY IN MIND Legibility is essential when choosing a colour for typography. Contrasting colours are best, but be mindful of accessibility. A resource to check is WebAIM Color Contrast Checker. 2 UNDERSTAND CONTEXT Where is your typography being displayed and who is going to read it? The right visual direction and tone is important when it comes to making your messages readable and relatable. 7 MIX YOUR STYLES Use contrasting styles/fonts like Sans-Serif and Serif, to achieve more varied looks. Sizing and hierarchy is very important but the difference in styles can make a big difference. 3 DON’T BE AFRAID OF SPACE Clarity and breathing space is important when making a message noticeable. Don’t make textual elements fight each other in a tight space. Nobody wins. Space helps keep focus. 8 WATCH YOUR WEIGHT Most fonts come in variety of options and weights. Don’t deviate from ‘normal’ on body text, keep text readable. Don’t use too many weights, reserve for your headlines. 4 SIZE MATTERS It’s important there’s not a huge variety of text sizes on a page. Consistency, hierarchy and readability are key. Ensure your fonts follow set size rules and don’t vary. Stick to a pattern. 9 MAKE USE OF FONT FAMILIES When pairing with other fonts, you can use variations from families but be mindful not to overuse. Use one or two weights to add variety and hierarchy. 5 STYLE CONSISTENCY If you decide to use uppercase or letter spacing for your headlines, don’t deviate and ensure the other style changes you make are followed. 10 PLAY AROUND It’s good to find font pairings you like that you stick to, but with the amount of fonts out there to experiment with, it’s always worth having a play with new and interesting fonts. PROXIMA NOVA adobe.ly/1k4Zr4S MRS EAVES XL adobe.ly/2rdMDmz ALTERNATE GOTHIC adobe.ly/2rhkNGr PLAYFAIR DISPLAY bit.ly/2j4b4eL FREIGHT TEXT adobe.ly/2DhOexG OPEN SANS adobe.ly/2D86IMU ROBOTO typekit.com/fonts/roboto ALICE bit.ly/2DBlvR4 44 _________________________________________________feature

GET PRO DESIGN SKILLS RESOURCES GOOGLE WEB DESIGNER bit.ly/2DCT2uk Best used for creating Google Ads but also a neat little tool to create dynamic displays whereby you can animate textual elements. SLIDER REVOLUTION bit.ly/2avbF9a WHAT’S TRENDING TODAY Thereareanumberofdifferent treatments and trends that you can apply to typography in order to better tell your stories. Generally, making your typography more integrated into your design is a good start and less about a headline plonked onto the canvas. Here are some examples of typographical treatments to try and look out for: TYPOGRAPHY CHAOS This trend is still going and enables you to be a bit more chaotic with your composition of typography. Splitting words and even letters around the canvas can offer a really interesting look. In some cases, the unconventional arrangement can test the readers with curiosity. CROP AND CUT TYPE On the same lines of creating interest and making typography unique, simply crop or cut letters up within a word. Make sure it’s enough that the letters are still readable. There’s a really interesting neuro behaviour that readers can still identify letters within words, even if characters are missing. Take Hangman for example. Make sure that your typography is contemporary NEGATIVE SPACE Mostly using artwork within your typography creates negative space. This is a wonderful way of really integrating artwork within your typography and making your text stand out. A great technique when using negative space is it enable graphical elements to pop out of the type, creating a dimensional space. GRAPHICAL TYPE Typography can be a little flat so enhancing your typography graphically makes and textual elements stronger on the page. It might be that your typography is made furry or even paint like. The objective here is to make your typography more like an object as opposed to a character. If you’re developing in WordPress, this slider plugin is incredible for creating custom sliders with very little limitations. Using the timeline and various animation styles, your typography can really make an impact on the page. You can work with numerous layers and integrate your graphics too. A truly smart way of bring more life to your web projects. ADOBE ANIMATE CC adobe.ly/2rb71Vs If you haven’t dipped into this yet, it’s worth doing and not being put off the association with Flash. You can export HTML5 canvases and achieve a higher level of animation. When it comes to typography and more complex graphic directions, Adobe Animate will help you out. DYNAMIC: WHY & HOW? In many cases, typography is really static. It doesn’t move or engage other than serving one purpose and that’s to be read and understood. We’re all well aware of other media formats that are used to be more engaging — video, for example — but text can be just as exciting. Have you ever seen Honda’s ‘Keep Up’ campaign? For a 2015 campaign, it’s still a great example on how words can be the focus point and heart of a campaign. The campaign projects words quickly in the video forcing you to read in order to keep up. The central alignment and placement of the text makes it easier to read. Speed reading is the core method used here, causing viewers to focus entirely on the words that are displayed. There are many methods other than speed reading to make textual elements more engaging, but thinking more about movement and integration within a design can be really effective and creative. How? Well there are tools out there to help, but it all depends on what you’re executing and where it’s going. The easiest way is to use video, but if you can achieve animations through web languages such as JavaScript and CSS3, then go for it! Honda - ‘Keep up’ bit.ly/2rjtDU0 feature _________________________________________________45