Here’s how you can setup layout grids, 960 grids, 12-column grids, or any variation that you prefer for web design on Affinity Designer.
Affinity designer is one of my favourite and go-to tools for web design, especially for static web mockups. Once you get the hang of how to use all their available tools, you can go about with your mockups really efficiently.
Luckily we live in times when if you want to start a career as a web design freelancer, you can just put Photoshop aside. Hi, my name is Dawid Tuminski and in this course you will learn how to use Affinity Designer to design websites from A-Z. This course is packed with valuable info any web design rookie should know, such as. We will get our hands dirty and explore all the tools and techniques professional web designers use to design a website inside Affinity Designer. That includes: Building wireframes and grids – the building blocks of every website. Using assets to make the design process ultra-fast. Affinity Designer is quickly taking the graphic designer community by a storm. With the recent release of Affinity Designer for iPad — the parent company Serif is looking to generate substantial market share in the foreseeable future.
Affinity has the ability to easily set up 12-column grids, or any other setups your prefer, with snapping capabilities. This helps you to intuitively keep your designs and layouts consistent throughout the page.
- The Design Agency for the Busy Professional. Affinity for Design is more than a graphic design agency, we are an engaged marketing partner with website, on.
- Affinity Design. Design & flooring. Come in with an idea, leave with a design. Affinity Design. Design & flooring. Come in with an idea, leave with a design.
Which is the Best Way to Set Up a Grid?
There are 2 obvious ways to go about creating the layout grid.
The first way is using the Grids and Axis Manager, the other way is using the Guide Manager.
For the purpose of web design, I have chosen to use the Guide Manager over the Grid and Axis Manager for these 3 big reasons:
- It does not create subdivision lines like how the Grid and Axis Manager does.
- It does not snap on to any inner divisions (because there’s none) or horizontal rows, like how the Grid and Axis Manager does, it only snaps to the vertical columns.
- The grid setup is based on absolute positioning, making it really easy to work with any canvas size without doing any calculations, where as the Grid and Axis Manager works on relative positioning, which means you have to do some calculations to center-align your grids based on your canvas size.
The Grid and Axis Manager is definitely a handy tool when it come to many other workflows, but the Guide Manager is by far the better choice for designing web page layouts.
Here’s How to Set Up the Grid
What we are working with is specifically called column guides.
This can be accessed by going to your Affinity Designer toolbar on the top and clicking on view, followed by Guides Manager under the dropdown.
Your Guide Manager window will pop up, and you will see Column Guides on the right half. You will just have to fill in the settings according to your needs.
For this example, I will be working a a 1280px wide canvas. I want to set up a 12-column grid, with 30px spacing between each grid, and 140px of margins on my left and right. A very typical setup I use. And here are the steps:
- Under column, I will fill that to 12.
- I will set the rows to 1, because I do not want to create rows.
- Gutter, which is the spacing between my columns will be set to 30px.
- Set the color of your choice.
- Under the margins section, input 140px to left and right.
Your column grid will then be created. It may not show yet because we have not toggle it on, but for now we can go ahead and close the Guide Manager. This is just a one-time setup for your project, meaning you can adjust the length of your artboard, and the grid will just go on continuously with your artboard.
For good measure, you could also create a vertical guide that will be placed in the center of your canvas. I do this because center-aligning is common in web design, so it’s faster to have a visual marker right there when I need it.
How to Display and Hide the Grid
Affinity Designer Website Tutorial
Go to your toolbar and click on View.
Under the dropdown, click to enable/disable Show Column Guides. This will show or hide your main grid. Toggle it on whenever you are working on your layout, and off when you want to take a look at your design by itself.
How to Display and Hide the Center Vertical Guide
Under the dropdown, click to enable/disable Show Guides. This will toggle a blue vertical line that will run in the middle of your canvas.
How to Enable Snapping to Your Grid
While creating and arranging your layouts, snapping should be turned on and configured properly to make sure your work is aligned pixel-perfectly to your grid.
Toggling the snapping can be done by clicking on the magnet icon somewhere at the top of your screen.
But you should configure it first by clicking on the dropdown button on the right of the icon, then tick the checkbox that says “Only snap to visible objects” and “Snap to guides”. Alternatively, you could also use the “Page layouts” preset, which will work well for snapping onto the grids that we have created.
Interested in Affinity Designer?
Get yourself a copy Affinity Designer, or their entire suite of professional and versatile designing tools, available for macOS, Windows and iPad (for certain programs only), here at : https://affinity.serif.com/en-gb/
With the recent release of Affinity Publisher, it feels like just the right time to showcase some font websites that are very popular, and of course free.
We’ll go beyond the essential features expected of such sites, i.e. searching, category filtering (top rated, featured, by style) and font previewing, which most sites share.
The rankings in this article are based on the author’s opinions and research only.
Affinity Designer For Website
1. Google Fonts
Probably the most well-known free font provider. The site is mainly intended for provision of fonts for websites, but the fonts will be perfectly acceptable for print or PDF output using Affinity Publisher.
The Good: 952 font families, easy-to-use website with previews, searchable by category. If a free font can’t be found, a purchasable equivalent is offered via the provider’s website.
The Bad: It isn’t immediately obvious how to download your chosen font! Tip: After selecting the font family you will able to spot the download button from the pop-up box!
2. Font Squirrel
This site claims its fonts are 100% Free for Commercial use. As always, check the licence for your chosen font (the licence will be included along with the downloaded font).
The Good: Over 1000 font families locally available. The font summary shows icons indicating licencing restrictions (e.g., for embedding). One-click downloads are a real time saver.
The Bad: Some of the advertising seemed to get in the way of important font search and filtering features. The site also looks a little dated and didn’t size to my browser window too well.
3. FontSpace
This is a big website, with a nice show/hide browser to access fonts via a rage of interesting categories. Optional login available.
The Good: 60,000+ fonts. A clean design with hover overs for licencing information before download.
The Bad: Adverts seem to masquerade as font category navigation bars.
Affinity Designer Official Website
4. Lost Type
While limited in the number of fonts available compared to the other sites, you get a very creative set of fonts nicely presented in card format.
The main distinction from the other sites is that the site operates on a cooperative basis.You can either:
- Pay what you want to for personal use
or:
- For some fonts, you can pay a nominal fee for commercial use
The Good: The site is fun and feels creatively led. If you donate, 100% of sales goes to the originating font designer. Font previews are presented in actual design examples.
The Bad: No search feature or Records per Page view. Only 50 typefaces available.
Affinity Web Design
5. DaFont
The site covers a wide range of fonts (they quote 43,030!) segregated into many font categories. The fonts encountered were mainly free for personal use only. Optional login available.
The Good: The site offers filtering by themes (e.g., fancy, gothic, techno) and font designer. What looks like a popular forum helps users identify fonts visually.
The Bad: Another site that offers a multitude of adverts masquerading as font category navigation, and use the Themes filter or search feature you should be able to get what you need.Registering and subsequent login doesn’t reduce the volume of advertising displayed.
Well yes, they are, but it’s worth noting that the free font may have a more limited glyph and special character support compared to a purchased font.
Not surprisingly, your downloaded free font will install and be made available to Affinity Designer, Photo and Publisher as for other fonts on macOS and Windows systems.
If you’re using Affinity Designer or Affinity Photo on iPad, you’ll have to install your free font via the Preferences (Fonts tab) before it becomes available to your app. This is due to the iOS environment being more ‘locked down’ compared to its desktop counterparts.
If you’re on a limited budget, free fonts are a life saver. For professional output, you may want to invest in purchasable commercial fonts from commercial font sites for absolute assurance on quality and licencing, but only if you’re able to stretch your budget further. Notable commercial sites include MyFonts.com, FontShop.com and fonts.com amongst others.
One important caveat is that fonts sourced from some of the free websites mentioned often means for “For Personal Use Only”. However, some free fonts offer purchasable upgrades to commercial equivalents, often by contacting the font designer directly. If donations are welcomed in relation to free fonts you have the option to support the hard work of the font designer at your discretion.