48 of 365 - bibliophile custom typography by John LeMasney via lemasney.com
48 of 365 – bibliophile custom typography by John LeMasney via lemasney.com
Tonight, I just wanted to play a bit with a word: bibliophile. It’s such a beautifully rhythmic word, and while I tend to read more screens than physical pages, I feel like I can align myself with the word.
In Inkscape, I found a good hefty font in Chunk Five, typed out the letters, and converted the word into a path. I ungrouped it, as text to path always groups the letters. Then, using the node tool, I extended the serifs to the left and right wherever they had room to move. Originally, I did not cross over the dots for the i’s but after playing with the serifs going through the dots, I decided I liked it. I hope you did too. 🙂
Ampersand Greater Than Font Study by John LeMasney via lemasney.com
Today, I decided to use Inkscape to play with type. When you type less than three (<3), you are expressing an emoticon for love, symbolized by a heart. It’s a straightforward, easy-to-use symbol. Two close friends or sweethearts might use it in SMS to express a little love.
Ampersand Greater Than (&>)
Melissa Brisbin and I have used an alternative to less than three to express not only that we are good friends, but that we exchange and share value in technology, libraries, and related interests. Ampersand greater than (&>) resembles a heart too, but indicates a togetherness, a bond. When we type it to each other, it’s a little reminder of our history. In honor of her birthday yesterday, I decided to work on the ampersand greater than as a typography muse.
I started by going through my font catalog and pulling out all the fonts that had interesting ampersand and greater than symbols.
40 of 365: Ampersand Greater Than Font Study by John LeMasney via lemasney.com
Then I began pulling out the best combinations, angling the symbols, pulling them together into a single flowing shape.
40 of 365: Ampersand Greater Than Font Study by John LeMasney via lemasney.com
Finally, I went back in and tweaked the finest points of the combinations. This was my result: nearly the final set.
40 of 365: Ampersand Greater Than Font Study by John LeMasney via lemasney.com
And today, I decided to add some color, along with final tweaks to the pieces.
Ampersand Greater Than Font Study by John LeMasney via lemasney.com
Tame The Web logo rev4 by John LeMasney via lemasney.com
Tame The Web logo workspace by John LeMasney via lemasney.com
Here is a final image of the workspace that I used to create the new Tame the Web (TTW) logo using Inkscape, with the help of Michael Stephens. Michael has been the heart of TTW since its inception, and wanted to have a logo to present his organization to a larger audience. He reached out on Facebook (where I get most of my work) and asked about logos on his page. He got some feedback, and in the process, Lori Reed decided to tag me, and I responded that I’d love to be involved in the logo if possible, and that I’d work for free. Michael contacted me and we began. I asked him to fill out the design brief on this site (it’s in the menu above) and when I got the response, I did this.
Tame The Web logo revision 0 by John LeMasney via lemasney.com
I tend to start logo work with the fonts. In this particular case, I used some of the information from the design brief to create a possible logo. In the brief, Michael talked about the past branding work that he had done and what had been present. He wrote that a heart symbol had always been a constant in identifying TTW. He also shared a palette, some quotes, and some clarifications in order for us to work through the logo. Michael understands brand. When he saw the image above, he said that the logo I proposed was beautiful, but that it was not the right feel. He said that it had a certain old-timey feel to it, and that he was looking for something a bit more contemporary. I understood, and decided to focus on fonts, as I usually do. He told me he liked a few of the fonts in the first submission, and I decided to focus on those.
Tame The Web logo rev1 by John LeMasney via lemasney.com
In this revision, I took the fonts that Michael liked and tried a few subtle differences, including the pipe between elements,. the kerning, and the imagery. I never thought the whip would go very far. 🙂 I sent them to him, and he said that he loved the curve in the line, but that straight spoke to him more. He also liked the tighter kerning in some of the versions. He liked the horizontal version as well.
Tame The Web logo rev2 by John LeMasney via lemasney.com
After he gave me feedback I focused just on the elements and kerning that he liked, and decided to incorporate the palette he had suggested, with deep blues. I grabbed one of my favorite deep blue palettes, and applied the colors to the elements. I sent it back.
Tame The Web logo rev3 by John LeMasney via lemasney.com
But there was still the issue of the missing heart. I decided to play a bit with text and image to introduce hearts, which Michael enjoyed. We agreed that the solid blue heart worked best, and worked best ahead of the title.
Tame The Web logo rev4 by John LeMasney via lemasney.com
Here are the final two versions of the logo, one horizontally aligned, and one block sized. I absolutely loved the opportunity, and I’m so grateful to work with someone like Michael. Even though I always have great, creative, and interesting clients, Michael was a standout.
Cost-Benefit Analysis study: a font mashup between Gill Sans and Scriptina Pro
Cost-Benefit study: a font mashup between Gill Sans and Scriptina Pro
Cost-Benefit as a design principle talks about the tension between the cost of the user’s time, effort, and other resources versus the benefit to that same users. If the perceived cost of a user exceeds their perceived benefit, the user will stop the use of the design. If the value of the benefit exceeds the perceived costs, the user will sustain their use, despite sensing the cost. If a user has to wait too long to get their food at a restaurant, they might get up and leave, despite the fact that they lost time and effort in the process of waiting until that point, and that they will need to find some other way to get the food. If that same diner had waited for weeks for the reservation to open, or had some other perceived valuable benefit to staying despite the wait, they will do so.
I decided to illustrate the concept of Cost-Benefit by considering the costs and benefits of using an interesting but complex font. I was given the idea by Melissa Brisbin, who after hearing the explanation of cost-benefit in design, suggested the creation of a font that was elegant and beautiful (benefit), but not especially legible (cost). I decided to match up the major points of each character between two of my favorite fonts: Gill Sans and Scriptina Pro. I’m pretty sure I’m supposed to hate both, as a sensible designer, but I can’t. I just love their lines and forms too much.
If the user finds the font more valuable for its interestingness than its legibility, the user might find a way to use it, despite difficult reading. If the user was looking for a font for a paragraph of text, they might dismiss the font as too difficult to read at that size, despite the potential for beauty or interestingness. Special thanks to Melissa Brisbin for the inspiration for today’s sketch.
Advance Organizers are a design method where an audience is given new information in one of two ways to become oriented with a new concept. In cases where the audience is newly introduced to the topic, we might use an expository advance organizer. If an alien was trying to learn about the way that a human hand functions, for instance, we might use an expository advance organizer in the form of a description of the look, feel, uses, and functions of the hand. If the alien had hand like appendages, let’s say 3-pointed claws, we might use their understanding of that in the form of a comparative advance organizer that showed the similarities and differences between the alien claw and the human hand. The purpose of either would be to grant the audience a better understanding of the new concept before going into deeper detail, training, or demonstration.
Above is an illustration of the comparative visual anatomy of serif typography and sans-serif typography, in which the letter A is used in a comparative advance organizational method, since you, the audience, is likely familiar with the letter A.
I thought I’d share the things I think about when approaching a new design. Over the last 10 years or so, I’ve developed a way to think about design when faced with a blank digital canvas, and it’s helped me to develop solutions every time. There are many principles of design and breakthroughs that have happened in its history, but these are the ones that I consider first.
Font
English: A comparison between the fonts Helvetica and Arial. (Original description: Useful letters for fast differentiation between Helvetica and Arial) (Photo credit: Wikipedia)
Usually, unless I am working on a piece in the interest of fine arts, where one may value abstraction and ambiguity, I am trying to convey something specific in design. Perhaps the easiest way to do this is with words. However, the typography is a message in itself. If you choose to display the word “gravity” in Helvetica, Comic Sans, or Creampuff, it is three different ways of emphasizing the word, one of business and straightforwardness, one of childish play, and one of casual sexiness. Be careful not only what you are saying, but how you are saying it, and fonts are a great way to define the how.
Background
The way that you set the background of a design allows you to carry through and finish your thought from the foreground. What textures best represent your ideas? What makes the most sense from a legibility standpoint? Will a cracked and peeling wall of paint give the adequate tone, or will it be a simple fade from a lighter color in your palette to a darker one at the edges?
Line
Logo for the School of Visual Arts (Photo credit: Wikipedia)
Hard, thick edged lines create gravity and strength in a design. Lighter, curved, frilly lines create an atmosphere of elegance. Angular accents create active layouts, pointing the eye here and there. You can use line to direct the eye, border elements in your design, or bring the viewer back again and again to a symbol.
Palette I often use photography as a starting point for palette. If I am doing a design on fresh food, I might use a photo of fresh food as my palette, choosing colors from the deepest red in a tomato or the brightest green in asparagus to reinforce my points.
Layout
Using lorem ipsum to focus attention on graphic elements in a website design proposal. (Photo credit: Wikipedia)
What happens visually when you line three words up, one after the other, in a perfect square? What happens when you take those same three words and create a rectangle? What about if you give them some space? What about if you angle the words? The overall shape of your design will carry a message, the virtual lines created by words will carry a message, and the flow of the viewer’s eye from one element to another will carry a message.
A crash course in typography
Fonts on the Brain – Leaver’s Hoodies
5 Free Tools For Creating Infographics
The 10 Commandments of DIY Marketing Design