- Affinity Designer Patterns
- Affinity Designer Reviews
- Affinity Designer Update
- Affinity Designer For Windows
- Affinity Designer 3 Sided Mandala Mock-up TemplateDraw 3 Sided Mandala with the help of Affinity Des. Free Active - Energy For Life Logo Design Are you searching for a free Active Energy logo design.
- Symbols offer a highly efficient way of working, suitable for 'repeating' elements of design that are liable to change, e.g. Logos, branding, and buttons, as well as specific adjustments. By avoiding having to edit the same elements multiple times, a symbol can be edited just once with all instances of that symbol updated automatically, even.
- Optimized for the latest tech on Mac, Windows and iPad, Affinity Designer is setting the new industry standard in the world of design. Best in class for creating concept art, print projects, logos, icons, UI designs, mock-ups and more, it’s already the top choice of thousands of professional illustrators, web designers, game developers.
Get free Affinity designer icons in iOS, Material, Windows and other design styles for web, mobile, and graphic design projects. These free images are pixel perfect to fit your design and available in both PNG and vector. Download icons in all formats or edit them for your designs.
| Corporate Symbols | |||
| Trademarks During the Middle Ages European trade guilds began using marks to identify the origin and content of their products. The term “hallmark” comes from the identification marks that metal artisans stamped into metal when exhibiting wares in the guild hall in London. The above image shows the mark of Hester Bateman registed in 1761 (1708–1794). Ms Bateman, a silversmith of household silverware in London, used her special initials along with the standard hallmarks; the crown signifying a tax is paid to the crown, a lion which identifies the type of metal (sterling silver) and the h, a 'date letter' which notes the year of production. | The application of formalized trademarks parallels the rise in mass production methods of the 18th century (See Industrial Revolution section). Instead of identifying local craftsmen, trademarks were used by large companies who shipped their products farther afield. These corporate trademarks transported the reputations and standards of quality of their makers. Above: Shaker's Furniture Mark, USA, 1873, use by permission. 2 | England's 1875 Trademark Act established the commercial worth of trademarks in a controlled central registry, the recognition of trademarks as exclusive property and outlined the first legal protection of trademarks within the UK and internationally. 2 The Bass Red Triangle was first trademark to be registered under the act. One of the most distinctive, identifiable and historically significant logos and brands in the world, it was dropped when Bass was purchased by Coors.3 | Trademarks can be used alone or combined into configurations. These are the common terminologies used for elements: If the identifier is strictly type = logotype or wordmark. If only an image = symbol, logo or trademark. If a combination of symbol and logotype= signature. Shown above, Microsoft's August 2012 mark, More... |
| Symbols Styles Reflect Their Era | |||
| Symbols “Styled' to an era Symbols and trademarks usually reflected the stylistic period during which they are created. Above is the General Electric logo first introduced in the 1890's at the height of the Art Nouveau period. It clearly reflects the curvaceous motif that dominated in that period. (Below an Ethel Larcombe art nouveau letterform) .4 | As Art Nouveau waned and a simpler geometric style emerged, symbols reflected the new attitude. Especially so in trademarks for the Wiener Werstätte, or Vienna Workshops formed in Austria in 1903. This co-operative of artisans and artists united with the goal of making products that merged pure and applied arts. Designer Joseph Hoffmann used a geometric shape, the square, as the foundation for a set of marks to identify the organization. A monogram of the letters WW was used on printed matter. A stylized rose was used to identify products from the workshops. The marks were legally trademarked in 1913. | Despite the communal spirit of the Wiener Werkstätte there were accommodations for individual recognition. Products were imprinted with both the workshop symbol and marks identifying each designer and craftsman involved in the production. The image below displays the symbol for the workshop, the monogram for the Wiener Werkstätte and the personal logo for Joseph Hoffmann. | AEG Symbol, 1907 The Berlin-based AEG, (Allgemeine Elektricitäts-Gesellschaft) of the same era was also identified by a geometric trademark. Designer Peter Behrens (1868-1940) working as the artistic adviser to AEG, used the symbol as the anchor for an entire design scheme applied to the print work, products and architecture. Behren's design program for AEG is recognized as the first complete corporate identity system. |
| Corporate Symbols Transcend Their Names | |||
| Raymond Loewy As symbols and trademarks are repeated over and over they become synonymous with their corporation. Frequently the symbol has little or nothing to do with the corporation— meaning is by association only. For example the above logo by industrial designer Raymond Loewy (1893-1986) became so associated with the company it represents that Loewy suggested that the name be dropped altogether. Betcha' know it. Interestingly, the symbol has nothing to do with an oil company —it is the name of a shop that specialized in antique sea shells that was owned by the father of Shell's founder .5 |
Thanks to the folks at Under Consideration you can link to Fortune'sLogo Smackdown to see an evaluation of the best logo of all time. | The Starbucks logo made news in early 2011 when the name Starbucks was dropped from the logo. Originally named after a character in Moby Dick, the mega brand coffee company founded in 1971 has now spread to 55 countries. See their logo progression here. . | Unimark, 1965 Cofounded with Ralph Eckerstrom, Wally Gutches, Larry Klein, Bob Noorda, Jim Fogelman, Massimo Vignelli and Bob Moldavsky. 'The prototypical corporate design consultancy, Unimark created identities and graphic programs for American Airlines, Memorex, Target, and the New York Subway System that are still in use today. In its attempt to reconcile what was widely considered an intuitive, artistic process with rigorous methodologies and a dedication to sophisticated marketing practices, Unimark in many ways anticipated the current interest in design thinking in business circles, and expanded the debate on the relationship of good design and good business that continues to this day.' 8 |
| Paul Rand on Timelessness in Symbol Design: Thoughts on Design from Paul-Rand.com | |||
| Paul Rand6 Paul Rand was arguably the greatest symbol designer of his era. His designs reflect the style of the mid to late 20th century —simplicity, neutrality, clarity—all part of the vocabulary of the Modernist period. However Rand added a blend of playfulness and illustration that made his work unique. In the following columns are some excerpts from Thoughts on Design, a collection of his essays published in 1970.You can read them on the Paul Rand website. | Rand wrote: A trademark is not merely a device to adorn a letterhead, to stamp on a product, or to insert at the base of an advertisement; nor one whose sole prerogative is to imprint itself by dint of constant repetition on the mind of the consumer public. The trademark is a potential illustrative feature of unappreciated vigor and efficacy; and when used as such escapes its customary fate of being a boring restatement of the identity of the product's maker.” | The role of the logo is to point, to designate—in as simple a manner as possible. A design that is complex, like a fussy illustration or an arcane abstraction, harbors a self-destruct mechanism. Simple ideas, as well as simple designs are, ironically, the products of circuitous mental purposes. Simplicity is difficult to achieve, yet worth the effort. The effectiveness of a good logo depends on: a. distinctiveness b. visibility c. usability d. memorability e. universality f. durability g. timelessness | (Shown above, Rand's 8 and 13 line versions of the IBM logo, drawn for visual balance at various size applications.) “It reminds me of the Georgia chain gang,” quipped the IBM executive, when he first eyed the striped logo. When the Westinghouse insignia (1960) was first seen, it was greeted similarly with such gibes as “this looks like a pawnbroker’s sign.” How many exemplary works have gone down the drain, because of such pedestrian fault-finding? Bad design is frequently the consequence of mindless dabbling, and the difficulty is not confined merely to the design of logos. This lack of understanding pervades all visual design. |
| In addition to design, Rand taught and wrote, expanding his influence over the next generation of designers. He was an esteemed professor at Yale University from 1956 until 1985. (Shown left chatting with graduate student Gaynelle Grover, now a branding expert). 7 | |||
| Footnotes | Links of Interest | ||
| 1 Image Source 2 Image Source: Shaker Museum and Library, Old Chatham and New Lebanon, New York. 2 3 The Making of Modern Trade Marks Law: The Construction of the Legal Concept of Trade Mark (1860-80), Lionel Bently | 3 The Local History of Burton on Trent 4 Image Luc Devroye.org 5 Marks of Excellence, p. 115. | 6 Section information from Paul-Rand.com 7 Photo © Bez Ocko with permission by Gaynelle Grover. 8 | A 10 minute animation of logo designs by the New York firm Chermayeff and Geismar by Sagi Haviv on youTube. Logo R.I.P. Brought to you by the Stone Twins. |
| Coyprights | |||
| ©Designhistory.org 2011 | |||
If you’re an app developer, you may be familiar with Apple’s SF Symbols—a huge array of vector iconography that can be easily implemented into your app’s user interface design. It’s compatible with iOS 13, watchOS 6 and tvOS 13 or later. The icons are designed to integrate with Apple’s San Francisco system font, which ensures optical alignment with neighbouring text and allows you to use line weight variations for each icon.
For more general information on SF Symbols, see Apple’s Human Interface Guidelines article.
Designing your own symbols
This is where things get interesting—you also have the ability to design and import your own symbol designs, using Apple’s SF Symbols template layout as a starting point. This template can be imported directly into Affinity Designer and used to create your own symbols, then brought into Xcode as a resource, allowing you to use it within your app design.
Exporting an existing symbol template
For starters, you will need to download the SF Symbols app directly from Apple’s Developer website. Once it’s installed, you can begin exploring the symbol categories within the app.
It’s a good idea to pick a symbol that roughly resembles the design you have planned for your own symbol. In this example, Matt Searston (our resident Affinity Designer Product Expert) has elected to design a cassette icon, so we might look for an existing symbol that is rectangular in shape, and so has a similar aspect ratio.
Once we’ve found a similar design, we can export a template to adapt our design to—go to File>Export Custom Symbol Template, then navigate to a suitable directory and click Export. This will create an .SVG file which we can then load into Affinity Designer.
Creating your symbol design
With the SVG loaded into Affinity Designer, you can begin creating your own design. Here are a few pointers regarding layer structure and layout:
Affinity Designer Patterns
It’s important to retain the layer structure that you see when importing the template SVG file. All of the symbol designs are located in a parent layer called Symbols.
Each line weight and size variant of the symbol is stored as a separate group with a logical naming convention. You have the line weight, then a hyphen followed by the size, for example:
- Ultralight-S for ultra light line weight in small.
- Regular-M for regular line weight in medium.
- Heavy-L for heavy line weight in large.
All vector layer content must converted to outlined curves with no line width. To achieve this, you can select the layers in question and from the top menu go to Layer>Expand Stroke.
Note that you don’t actually have to store each symbol variation as a group like in the original templates: for our cassette design, we simply flattened the layers using the Add boolean operation and outlined them, then named them correctly according to the convention. These imported into Xcode without any issues.
Using groups will however allow you to have multiple child layers for each symbol rather than flattening them all into one layer. You may prefer this approach for flexibility.
Underneath the parent Symbols layer, you will find the Guides and Notes layers. You should generally leave the layers in Guides alone, as they will help you ensure that your new design has correct optical alignment when neighboured with text. There are two layers named left-margin and right-margin which allow you to define leading and trailing margins—you can select the Move Tool V and drag the left or right nodes on the bounding box to change the horizontal scaling of these.
You don’t have to alter these if you don’t need to, however. To keep things simple, we recommend creating your new symbol design without repositioning the two margins, then only rescaling them horizontally if you require more padding between the symbol and text either side.
Affinity Designer Reviews
Whilst getting to grips with the template layout and designing his own cassette symbol, Matt developed an approach that may help when it comes to producing line weight variants for your design. He started by creating the Regular line weight in Medium size, which is recommended as that’s where the two margin guides are located.
He then duplicated the layers in his symbol design and created a Black line weight in Large size variant—this is the thickest line weight and largest font size. He then did the same for an Ultralight and Small variant. By creating variants of the design at each extreme, this will quickly highlight if any of your design choices are going to be problematic when the line weight is scaled. Lots of shapes or curves next to each other may result in a design becoming less distinguishable or more cluttered, for example. By tackling these visual issues early on, you can save yourself a lot of time, then go on to produce the variants in-between these extremes.
Here are some general design pointers when creating your custom symbols:
- Only use vector content: curve paths with the Pen Tool P and shapes are fine. Bitmap images and text are not.
- Grouping content or flattening: you don’t have to flatten your design using a boolean operation, but you must outline any content using Expand Stroke. You can either have a flattened layer with the variant name (e.g. Ultralight-S), or you can name a group which contains multiple vector layers.
- It’s not a steadfast requirement to provide all 27 variants of your design, but it’s a good idea to include as many as possible for accessibility features.
Exporting your symbol
Affinity Designer Update
Exporting your symbol design is nice and straightforward: once you have checked that your layer structure adheres to that of the original template, go to File>Export, then on the export dialog choose SVG as the export format. Leave the export preset as its default of SVG (for export), then click Export and choose a suitable resources directory (e.g. one set up within your Xcode project).
Once you have your exported SVG file, you can verify it within the SF Symbols app before importing it into Xcode in case there are any issues with layer structure or alignment. To do this, launch the SF Symbols app, then go to File>Validate Custom Symbols and locate your SVG file.
Finally, you’ll need to bring your symbol into your app’s .xcassets resources as an Image Symbol Set. To do this within Xcode, select your .xcassets resource (a default Assets.xcassets is provided by default whenever you create a new project), then from the top menu choose Editor>Add Assets>New Symbol Image Set.
This will switch the active window pane to a drag-drop area where you can drag your SVG file in. If everything is present and correct, your symbol variants will appear—you can now go ahead and use these in your user interface design!
Footnotes
For more information, you may like to refer to these Apple Developer articles which will help you further when it comes to adding custom symbols to your user interface design:
Affinity Designer For Windows
They contain good guidelines to adhere to and will also cover adding symbols into your UI design programmatically.