Tag Archives: illustrator

Thumbnail

Designing A Font Based On Old Handwriting




Designing A Font Based On Old Handwriting

Carolyn Porter



Designers create handwriting-based connected cursive fonts for a variety of reasons: to immortalize the loops and swirls of a loved one’s handwriting, to digitize the penmanship of a person or document of historic significance, or to transform charming handwriting into a creative asset that can be licensed.

Let’s say you found a beautiful old handwriting specimen you want to digitize. You might presume you can trace individual letters, then seamlessly convert those tracings into a font. I will confess that was my assumption before I began to work on my first font. I had not taken into account the myriad of thoughtful and intentional decisions required to transform the specimen into an artful and functional font.

Before you begin the process of digitizing your specimen, it would be worthwhile to ask yourself a few questions about your goals and intent. Think of it as writing a creative brief for your project. Begin by assessing the importance of historical accuracy. Then conduct a close examination of the specimen: look at the idiosyncrasies in the handwriting, the variation in shape and position of individual letters, the method for connecting letters, and the texture. Possessing a keen familiarity of your specimen will allow you to make informed decisions about aesthetics as you design your font.

Recommended reading: Hands On The Sigmund Freud Typeface: Making A Font For Your Shrink

How Important Is Historical Accuracy?

One of the biggest decisions you will need to make is whether you want to capture every nuance of your handwriting specimen, or if you want to design something inspired by that handwriting. It is like watching a movie “based on a true story” versus one “inspired by real events.” In the first scenario, you can expect the movie (or font) maintains a higher degree of factual integrity than the second option, where the director (or designer) may take wide-ranging creative liberties.

If you choose to replicate your specimen with utmost precision, be aware that rigorously honoring accuracy may mean compromising legibility. “Old scripts, in particular, include letterforms that are less legible — even virtually illegible, like the old-style long s — than in modern handwriting,” notes Brian Willson, who has designed more than two dozen fonts based on the handwriting of notable figures such as Abigail Adams, Frederick Douglass, and Sam Houston.


Three examples of fonts based on, or inspired by, the handwriting of Abraham Lincoln.


Compare the similarities in these three fonts based on (or inspired by) the handwriting of Abraham Lincoln. Although 1863 Gettysburg (the font shown on the far right) was inspired by documents written by President Lincoln, the designer’s stated goal was not to replicate Lincoln’s exact writing, but to create a font that represented the era. (From left to right: LD Abe Lincoln by Lettering Delights/Illustration Ink, a Lincoln by Steve Woolf, and 1863 Gettysburg designed by GLC.) (Large preview)

You may find you want to make thoughtful revisions to strike a balance between historical accuracy and optimized legibility. As I designed the P22 Marcel Script, which is a connected cursive font based on handwritten WWII love letters, I chose to make small revisions to improve legibility.

The font retains the essential character of the original writing, but it is not a precise replica. Many of the original j’s, for example, did not have a tittle (a dot), and the original lowercase p did not have a closed curve on the bottom of the bowl. It looked like a hybrid between a p and an n. Knowing some people struggle to read cursive writing, I chose to dot the j and revise the shape of the p.


Three images showing original letter written by WWII French forced laborer Marcel Heuzé, a close-up of the greeting “Mes chères petites,” and the font P22 Marcel Script based on the handwriting sample shown.


Note the small revisions to improve legibility. (From left to right: The original handwriting specimen, a close-up of the greeting “Mes chères petites”, and a sample of the font P22 Marcel Script.) (Large preview)

Does Your Source Document Include Enough Material To Work With?

John Hancock had a fantastic signature, but designing an entire font based on the eight letters in his name — J, o, h, n, H, a, c, and k — would be a challenge. Assess whether your specimen is complete enough to support an entire font. Does it include both upper and lowercase letters? How about numbers?

When designing the font based on the handwriting of Jane Austen, designer Pia Frauss discovered she did not have a handwritten letter X to reference. If, like Frauss, you have a specimen that is mostly complete, you should be able to extrapolate what a specific letter might have looked like. That skill will also be necessary when it comes time to design new glyphs — the term for a specific character in a font file — like the Euro, which has only existed since 1999.

If your specimen only has a limited set of characters, gauge whether you feel comfortable designing the missing letters. If not, consider finding a handwritten specimen that is similar in style, then pulling the missing letters from the supplementary specimen.

What Idiosyncrasies Make The Handwriting Special?

Are crossbars unusually high, low, or angled? Are ascenders or descenders abnormally long or short? Are letters strikingly narrow or wide? Do specific letters extend above or below the baseline? Do letters loop in unusual ways?

If your goal is to create a historically accurate font, you will want to take care to ensure those idiosyncrasies are not lost as you digitize individual glyphs. If you are comfortable taking creative liberties, you might exaggerate those points of differentiation.

In the font Marydale, Brian Willson included quirky glyphs such as the loopy, two-story serif g found in the original handwriting. Brian thought it added friendly charm. But a risk of embracing idiosyncrasies is that some users may not like those letterforms — and indeed some users complained to Brian that the g was too unusual. Nevertheless, Marydale is one of Brian’s best-selling fonts.

To help you decode shapes and understand the mechanics behind some of your specimen’s idiosyncrasies, it may be helpful to identify the type of writing utensil that was used. A ballpoint pen will create uniform-width strokes; a split-nib pen can create graceful thicks and thins; a dip pen may carry evidence of ink being reapplied; a brush can create dramatic variation in thickness. You may also consider how the writing utensil had been held or if the writer had been in a hurry, since hand position and speed can influence the shape and style of the handwriting, too.

Assess Variations In Axis, Letter Height, Alignment To Baseline, And Stroke Width

Within any single handwriting specimen, you will likely see variation in axis, letter height, alignment to baseline, and stroke width. These irregularities enhance the individuality of handwriting — but transferring those irregularities to a digital font can be a challenge. If your font includes too many variations in axis, letter height, alignment to baseline, or stroke width, it may not reflect the visual unity of the original specimen. If your font does not include enough variation, it may lack the charm of the original writing.

Take time to assess which elements in the original specimen are consistent and which vary, then plan how you could incorporate those variations into your font. If you employ a consistent axis, consider varying alignment to baseline or stroke width. If you standardize stroke widths, consider varying axes and letter heights.


The word “Smashing” typeset in three different fonts that have three different levels of variability in stroke height, stroke width, and angle.


Fonts with increasing variability in axes, letter heights, alignment to baseline, and stroke thicknesses. (From left to right: Texas Hero by Brian Willson/Three Islands Press, P22 Cezanne Pro by Michael Want and James Grieshaber, and Selima by Jroh.) (Large preview)

When I began working on the P22 Marcel Script, I sourced favorite individual letters from five separate handwritten pages. The first time I pieced glyphs into words, I could see that the axes, letter heights, and stroke thicknesses were too variable. Even though each glyph had been a careful re-creation of one man’s handwriting, the resulting look was haphazard. I decided on a standard for axis and stroke thickness, then adjusted every glyph to that standard. Varying letter heights and alignment to baseline prevented the font from looking too mechanical.

Where And How Do Individual Letters Connect?

Are the connecting lines that sweep from one letter to the next high or low? Are the connecting lines thick or thin? Are there some letters that do not connect?

The key to designing a successfully connected cursive script font is to create an overlap so individual letters appear to seamlessly flow from one into the next. The trick is to identify one location for that overlap, then to start and end every glyph in that precise position. Some designers place those overlaps along the left-hand edge of a glyph, other designers place the overlap in the space between the glyphs. Some designers place the overlap low, others place the overlap high. There is no right or wrong answer; choose the location and method that makes sense for you.


Three detailed examples of ways glyphs in cursive script overlap to appear as if the letters connect in a fluid, seamless way.


Fonts that overlap on the left-hand edge of each glyph. The magenta circle shows the overlap; the horizontal magenta line shows the consistent placement of the sweeping connecting line on the letters m and a. (From left to right: Douglass Pen by Brian Willson/Three Islands Press, Rough Love by Positype, and Bambusa Pro by FontForecast.) (Large preview)


Three detailed examples of ways glyphs in cursive script overlap to appear as if the letters connect in a fluid, seamless way.


Fonts that overlap in the space between the glyphs. (From left to right: Dear Sarah Pro by Christian Robertson, Storyteller Script by My Creative Land, and Mila by Facetime.) (Large preview)

You may also discover that not all letters in your specimen connect. In that case, you will still need to identify one location and implement a consistent strategy for the overlaps, though you will only create the overlap on those glyphs that connect.* *


The word “Smashing” typeset in three different fonts where not all letters connect with the surrounding letters.


Fonts where some, but not all, letters connect. (From left to right: Blooms by DearType, JoeHand 2 by JOEBOB Graphics, and Brush Marker by Fenotype.) (Large preview)

Do You Want Your Font To Include A Texture Effect?

Adding texture can enhance a feeling of antiquity or nostalgia, but this treatment adds time, complexity, and increases file size. And it may influence whether or not someone will want to license and use your font, since they may or may not be looking for that specific effect.

Examine your original specimen to determine where the texture came from. Was it caused by the paper surface? Was variation caused by the writing tool or writing speed? Are irregularities clustered on curves? Does one side of the letter include more texture than the other? Do brush strokes or splatters of ink extend into the space surrounding each letter?


The word “Smashing” typeset in three different fonts that have three different textured looks: a paper texture look, rough edges, and brush strokes.


The word “Smashing” typeset in three different fonts that have three different textured looks: a paper texture look, rough edges, and brush strokes. (From left to right: Paper texture; Thirsty Rough by Yellow Design Studio, Scratchy pen and ink texture, Azalea Rough by Laura Worthington; Brush strokes, Sveglia by Wacaksara Co.) (Large preview)

Once you’ve made high-level decisions on the importance of historical accuracy, identified what idiosyncrasies make the handwriting special, considered how to add variation in axis, letter height, alignment to baseline, or stroke width, assessed how to connect glyphs, and decided if you want to include texture, it’s time to forge ahead with the design of your font.

Pick Your Letters

Make a copy of your specimen, and go through it line by line, flagging the specific characters you want to incorporate into your font. When designer Brian Willson begins a new font, it is not unusual for him to spend hours poring over the source material to select the individual letters he plans to include.

Consider flagging two types of letters:

  1. Favorite “workhorse” letters
    Workhorse letters will make up your basic glyph set. They might not be the fanciest option, but workhorse characters will make for a reliable and legible glyph set.

  2. Favorite swash letters
    Swash letters might include extra loops or flourishes, more or less texture, greater variation in position above or below the baseline, or exaggerated features such as extra-long crossbars.

Swash letters may be less legible, or may only be appropriate for use in specific instances, but can add variety, beauty, and personality. (Swash glyphs will be added later in the process; focus first on designing the workhorse glyph set.)

Ideally, at the end of your review, you will have flagged a complete set of upper and lowercase workhorse letters, numbers, punctuation marks, and an array of swash characters.

Scan Individual Letters And Prepare To Vectorize

Create high-resolution bitmap images of all letters you plan to include in your font. I have always used a flatbed scanner to capture those images, but I have heard of people exporting sketches from Procreate or taking high-resolution photos on their phones. If you take a photo, be sure your phone is parallel to your specimen to avoid distortion.

Once you have assembled a collection of bitmap images, you will need to choose between vectorizing the letterforms using Adobe Illustrator’s Image Trace feature or importing the scans directly into font editing software then vectorizing them by hand.

Using Illustrator’s Image Trace feature may be preferred if your specimen includes lots of texture since Illustrator can capture that texture for you. To create a vector outline, import a bitmap image into Illustrator, then using advanced Image Trace menu options, test combinations of Paths, Corners, and Noise to get the tracing result you prefer. Expand to get your vector outline.

Importing scans directly into font editing software may be preferred if your font is not going to include texture, if you are comfortable generating Bezier lines, or if you intend to make significant revisions to letter shapes.

Recommended reading: How New Font Technologies Will Improve The Web

Establish A New Font File

Popular font editing software options include FontLab Studio VI (Mac or Windows OS, $459), Glyphs (Mac OS, €249.90), Robofont (Mac OS, $490), Font Creator (Windows, $79–199), and Font Forge (free). There is also an extension for Illustrator and Photoshop CC called FontSelf which allows you to convert lettering into a font ($49–$98).

Establish a new font file. If you created vector outlines using Illustrator, import each outline into the applicable glyph cell (that is, place the vector outline of the letter a in the a glyph cell so that an a appears when you hit the a key on your keyboard).

If you chose to vectorize the glyphs within the font editing software, import each bitmap scan as a background sketch, then trace.

Identify Archetype Letters

Some font designers begin by designing or refining the letters n, b, o, v, A, H and O since those letters contain clues to the shape of many other letters. The n, for example, holds clues to the shape of the i and h; the b holds clues to the shape of d, p, and q; the O holds clues to C and G. Other designers begin with the most frequently used letters of the alphabet: e, t, a, o, i, and n. In the fantastic book Designing Type, which is chock full of images that compare variations in letter shapes, Karen Cheng notes some designers begin with the letters a, e, g, n, and o.

You may begin with one of those glyph sets, but if you’ve identified a few letters that quintessentially represent the aesthetic of your font, consider starting by refining those glyphs. When I began to work on the P22 Marcel Script, I began by working on the capital M for no other reason than the swoop of the original handwritten M was exquisite, and it brought joy to see that letter come to life as a glyph. (After working on the M, I focused on refining archetype letters n and e.)


Four images showing the original handwritten “M,” the original tracing, initial digitization, and the final letter “M” from the font P22 Marcel Script.


From left to right: Original scan, original tracing, glyph outline in FontLab (note the refinements to stroke width and axis), and final M in P22 Marcel Script. (Large preview)

No matter which glyphs you begin with, you will quickly want to establish standards for the axis, letter heights, alignment to baseline, and stroke widths. Ensure all glyphs meet those standards while simultaneously keeping in mind incorporating variability to achieve an organic look.

In order to introduce variability in an intentional way, it might be helpful to add guidelines to your workspace to define the lower and upper ranges of variability. Use these guidelines to introduce variation in ascender height, descender length, or in alignment to the baseline.

Do you want your font to have more variability? Increase the distance between the guidelines. Do you want your font to have less variability? Decrease the distance between the guidelines. Add variability to stroke widths in a similar way.


Lowercase a-z of connected cursive font P22 Marcel Script.


Lowercase glyph set of P22 Marcel Script. Notice variability in length of the descenders in the letters f, g, y, and z, variability in the height of letters i and j, and how I chose not to connect letters v and w with the following letter. (Large preview)

You will also want to establish a standard position for the overlap. Since there is not one correct place for these overlaps, experiment with a limited number of glyphs until the overlaps appear as natural as if the letters had been written with a pen without lifting the pen off the page. Then, test the position of the overlap on tricky letters such as r, o, s, f, v and w to confirm the overlap works. You’ll know if there are issues because glyphs won’t connect, or the connection won’t appear smooth. (If you see white where two black letters overlap, check for a Postscript path direction error.)

The good news is that once you have established the successful position for your overlaps you should be able to cut, copy, and paste the connecting line to replicate the position of the overlap on all remaining letters.


The word “Smashing” typeset in P22 Marcel Script with small circles highlighting small overlapping areas between letters.


Overlaps in P22 Marcel Script (Large preview)

Test As You Go

As soon as you have a collection of glyphs — even if it isn’t the entire alphabet — generate a test file and preview your font. If your goal was to replicate your specimen with accuracy, assess whether the font reflects the rhythm and character of the original handwriting. Evaluate whether the “color” — the overall darkness or lightness — matches the original. Refine glyphs as necessary to achieve the right rhythm, character, and color.

If you have chosen to take liberties with the shapes of letters or to introduce variability, your goal should still be to achieve an overall cohesive aesthetic. It is up to you as the designer to define precisely what that means.

As you test, it will be helpful to print blocks of sample text at a range of sizes. Reverse letters out of black. Look at the spaces between letters. Look at the spaces inside of letters. Look at strings of glyphs backwards, then upside down. Look at the font both when printed on paper and on a computer monitor. Testing under different conditions will help you notice glyphs that need additional refinement. I found that when I tested sample text set in a foreign language the unfamiliar letter combinations would help me see individual glyphs that were too heavy, too light, too narrow or too wide, along with individual curves that seemed too rounded or too flat.

For the first-time type designer, I recommend the book Inside Paragraphs: Typographic Fundamentals by Cyrus Highsmith (see list of references below). The book provides an invaluable primer on learning how to look at shapes and spaces in and around letters.

Continue testing and revising glyphs until your font includes a–z lowercase, A–Z uppercase, numbers, fractions, punctuation marks, and diacritics (marks such as the umlaut, acute, or tilde added to letters to indicate stress or change in pronunciation).

Add Swashes And Alternate Characters

Once your workhorse glyph set is complete, consider adding the swash characters you flagged when you picked your initial letters. A digital font can never offer the infinite variability found in handwriting, but by writing lines of OpenType code and incorporating swashes, ligatures (two or more letters that are combined into a single glyph), and alternate characters, you can begin to close the gap between the mechanical nature of a font and organic variation of handwriting. OpenType code allows you to do things like ensure two of the same glyphs never appear next to each other, or replace a workhorses glyph with a fancy swash or with a glyph that has more (or less) texture.

This work can be time-consuming, but you just might find it is addictive. You might discover every word you test could benefit from some custom flourish. The font Suomi, designed by Tomi Haaparanta, includes more than 700 ligatures. The font Hipster Script, designed by Ale Paul has 1,066. Syys Script by Julia Sysmäläinen for Art. Lebedev Studio has more than 2,000 glyphs. And between the Latin and Cyrillic versions, the font NIVEA Care Type by Juliasys has more than 4,000 glyphs.

Between swashes, ornaments, and alternate characters, the Pro version of the P22 Marcel Script includes more than 1,300 glyphs. Many of the alternate glyphs were inspired by flourishes in the original specimen; other glyphs were of my own invention, but were made in the style of the original writing. In my experience, incorporating swashes, ligatures, and alternate characters is the most exciting part about designing a connected cursive script font. In fact, it is what brings a connected cursive script font to life.


Four variations of the glyphs in the font P22 Marcel Script, beginning with the basic  “workhorse” glyphs progressing to variations with lots of flourishes.


From left to right: P22 Marcel Script basic (workhorse) glyph set, P22 Marcel Script Pro incorporating alternate glyphs, and P22 Marcel Script Pro showing additional alternate glyphs, swashes, and an ornament. (Large preview)

Final Steps

Once all your glyphs have been designed and the font has been thoroughly tested for technical performance and aesthetics, it is time to name the font and release it into the world.

Ensure no other font is already using the name you are considering. You can do a preliminary search on aggregator websites such as MyFonts, Fonts.com, FontShop, or Creative Market. Fonts are also distributed by individual font foundries and designers. Because there are so many distribution channels, the only way to guarantee availability and protect a name is to apply for a copyright with the U.S. Patent and Trademark Office (for U.S. designers). Consider hiring a lawyer to help with the filing process.

Finally, when it is time to release the font, if this is your first font it may be easiest to distribute your font through an established foundry or aggregator website. They should offer technical support, and will track licensing and sales tax. Consider working with one of the websites listed above; each website will have a different process to submit a font for consideration.

Further Reading

Smashing Editorial
(ah, ra, il)


Originally posted here: 

Designing A Font Based On Old Handwriting

Thumbnail

Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes




Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes

Manuela Langella



(This article is kindly sponsored by Adobe.) A fixed element is an object you set to a fixed position on the artboard, allowing other items to scroll underneath. This way, you get a realistic simulation of scrolling on desktop and mobile. With the new overlay feature, you can simulate interactions such as lightbox effects and submenus.

How do famous brands use fixed elements and overlays? Well, let’s take a look at some examples to get some inspiration first.


Examples of brands using fixed elements and overlays


From left to right: 1) McDonald’s mobile home 2) A submenu slides up when you click on the hamburger menu. This is an example of an overlay. 3) Netflix’s Italian mobile website home screen. 4) Netflix sets its call to action as a fixed element. When you scroll down, the button stays fixed to the bottom of the screen. 5) Adobe mobile home 6) By clicking on the menu symbol, a submenu comes out as an overlay. (Large preview)

In this tutorial, we will learn how to set a menu bar as a fixed element and how to apply an overlay transition in a prototype, to simulate a menu opening from the click of a button. Both examples will be done in a mobile template, so that we can see our simulation in action directly on our mobile device. I’ve also included an Illustrator file with icons, which you can use to set up your examples quickly.

Let’s get started.

Preparing The Mobile Template

Open Adobe Xd, and choose the “iPhone 6/7/8 Plus” template. Then, go to File → Save As and choose a name to save your file (mine is mobile.xd).




(Large preview)

Let’s create a restaurant app in which people can select what to order from a list of food.

We will create two home layouts. The first one will be a long page, which we will use to see how fixed navigation works. The second will have a full-screen image, and the user will be able to click and open a menu bar that overlays the home screen.

To get started, click on the artboard icon on the left side, and click to the right of your current artboard. This will create a second identical artboard, near the first one.




(Large preview)

Let’s begin to design our elements, starting with the navigation bar. Click on the Rectangle tool (R) and draw a shape 414 pixels wide and 48 pixels tall. Set its color as #DE4F4F.




(Large preview)

I’ve prepared some icons in Illustrator to use in our layout. Just open the Illustrator file I’ve provided, and drag and drop the icons in your library, as shown below:

Large preview

In doing so, your icons will be automatically uploaded to your Adobe XD library, too.

To learn more about how to use libraries in different apps, read my earlier article, in which I go over some examples of how to add icons and elements to a library (in Illustrator, for instance) and then access them by opening that library in other apps (XD, in this case).

Once you have added the icons, open your XD library. You should see the icons in place:




(Large preview)

Drag and drop the icons on your artboard, as shown below. Position them, and make sure they are all about 25 pixels wide.




(Large preview)

Because we need our icons to be white, we have to modify these. We can directly modify them in the library, as demonstrated in my previous tutorial. With that done, we’ll see them updated in XD directly, without having to drag them from the library again.




(Large preview)

Now that the icons we want are in place, let’s create a logo. Let’s call this app “Gusto”. We’ll simply use the Text tool to add it. (I’m using the Leckerli One font here, but feel free to use whichever you like.) Align the logo to the middle of the navigation bar by clicking “Align center (horizontally)” in the right sidebar.




(Large preview)

Group all of the navigation elements together, and call the group “Menu”. To do this, select all elements in the left panel, right-click and choose “Group”.




(Large preview)




(Large preview)

Let’s add a beautiful hero image. I selected one from Pexels. Drag it on your artboard, and resize its height to 380 pixels.




(Large preview)

Now, click on Rectangle tool (R), and draw a rectangle the same size as the hero image, and place it on the image. Set a gradient for the rectangle’s color, using the values shown in the image below.




(Large preview)

(If you’d like more information about gradients, feel free to see my previous tutorial on how to apply them in XD.)

Insert some white text on the hero image and a circle for a button. Place a little circle with a number on the cart icon as well; we will need it later.




(Large preview)

Next, let’s increase the artboard’s height. We have to do that in order to insert new elements and to create the scrolling simulation.

After double-clicking on the artboard, set its height to 1265 pixels. Be sure that “Scrolling” is set to “Vertical” and that the “Viewport Height” is set to 736 pixels. A little blue marker will allow you to set the scrolling boundary towards the bottom of the artboard, as seen below:




(Large preview)

Let’s add in our content: Gusto’s mouthwatering menu. Click on the Rectangle tool (R) to create a rectangle for the picture that we will add.




(Large preview)

Drag and drop a picture directly into the box we just created; the image will automatically fit in it. Click on it once, and drag the little white circle from an angle inwards, in order to round all of the angles. Their values should be around 25, as shown in the picture below. Get rid of the border by unchecking the border value in the right sidebar.

Large preview

Click on the Text tool (T), and write a title on the right side of the image. I chose Lato as the font, at 14 pixels. Feel free to use another font, but maintain the 14-pixel size.




(Large preview)

Grab the Text tool (T) again, and write some lines for the description (Lato, 10 pixels) and for the price (Lato, 16 pixels).




(Large preview)

Take the Rectangle tool (R) and draw a rectangle of 100 by 30 pixels. Color it with the same orange we used on the button for the hero image; add the text “Add to Cart” with the Text tool (T); and add the cart icon from the library. All of these steps are covered in the short video below:

Finally, click on “Repeat Grid” to create a grid for this section. Once that’s done, we can change images and text easily, as shown in the video below:

If you want to learn more about how to create grids, follow my tutorial.

I used the following pictures from Pexels:

  • https://www.pexels.com/photo/close-up-of-food-247685/
  • https://www.pexels.com/photo/food-dinner-pasta-spaghetti-8500/
  • https://www.pexels.com/photo/selective-focus-photography-of-beef-steak-with-sauce-675951/
  • https://www.pexels.com/photo/food-plate-chocolate-dessert-132694/
  • https://www.pexels.com/photo/bread-food-sandwich-wood-62097/

Add some titles, descriptions and buttons.




(Large preview)

Finally, let’s add a rectangle for the footer, with the text “Gusto” in the center. Set the rectangle’s fill color to #211919.




(Large preview)

Yes! We’ve completed the first template design. Let’s set up our second template before we begin prototyping.

For our second mobile layout, just copy and paste the navigation and hero section from the first layout, and size the hero image to be full screen. Then, add a “Try Now” button to it.

In the short video below, I show you how to copy and paste elements into the second artboard, create a new button with the Rectangle tool (R) and write text on it with the Text tool (T).




(Large preview)

Excellent! Let’s move on and create our prototypes.

Setting Fixed Elements

We want to make the top navigation of our layout fixed, making it stick to its position as we scroll the artboard.

Click on your “Menu” group to select it, and select “Fixed Position” in the right sidebar.




(Large preview)

Important: In order for all elements to scroll under the menu, the menu should be on top of all other elements. Simply place the menu folder at the top, in the left sidebar.




(Large preview)

Now, to see your fixed navigation in action, simply click on the “Desktop Preview” button and try scrolling. You should see this:

Large preview

Tremendously simple, isn’t it?

Setting Overlay Elements

To see how overlays work in XD, we first need to create the elements that will be overlaid. When you click an item in the menu, what would you expect to happen? Exactly: A submenu should appear.

Let’s create three different submenus, like the ones in the image below, using the Rectangle tool (R). I chose a rectangle because the menu will overlay the screen, so it will cover not the whole artboard but just a part of it.

Follow the video below to see how I created the three overlay menus. You will see that I used the Rectangle tool (R), Line tool (L) and Text tool (T). We’re using rectangles to create the menu backgrounds because we need an object to overlay the screen. I’ve included the icons in the Adobe Illustrator file.

Below, you’ll see how I use “Repeat Grid” and how I modify elements inside of it.

Here is the final result:




(Large preview)

We will work on the second home layout at this point.

Set the visual mode to “Prototype”, selecting it from the top left of the screen.




(Large preview)

Next, double-click on the little hamburger menu icon, and drag and drop the little blue arrow onto the “Overlay 1” artboard. When the popup window appears, choose “Overlay” and “Slide right”. Then, click the “Desktop Preview” button to see it in action.

Large preview

Let’s do the same thing with the user icon and cart icon. Double-click on the user icon in Prototype mode, and drag and drop the little blue arrow onto the “Overlay 2” artboard. When the popup window appears, choose “Overlay” and “Slide left”. Then, click the “Desktop Preview” button to see it in action.

Large preview

Now, double-click on the cart icon in Prototype mode, and drag and drop the little blue arrow onto the “Overlay 3” artboard. When the popup windows appears, choose “Overlay” and “Slide left”. Click the “Desktop Preview” button again to see it work.

Large preview

We’re done! These great new features are super-easy to learn, and they’ll add a new level of interactivity simulation to your prototypes.

Quick tip: Want to preview the layout on your phone? Just upload your XD file to Creative Cloud, download the XD app for mobile, and open your document.

Here’s what we have learned in this tutorial:

  • set and create mobile layouts and elements,
  • set fixed elements,
  • use overlays to simulate a click-to-open submenu.

Where would you use fixed elements or overlays? Feel free to share your examples in the comments below!

Smashing Editorial
(il, yk)


Excerpt from: 

Fixed Elements And Overlays In XD: Incredibly Easy And Fun Methods For Your Prototypes

Thumbnail

How To Speed Up The Wireframing Process With Photoshop And Adobe XD




How To Speed Up The Wireframing Process With Photoshop And Adobe XD

Manuela Langella



Before starting any design project, there is one word that is sure follow you from the very beginning: wireframing. Today, we will learn how to create a wireframe in Adobe XD and how to implement some graphics from Photoshop just by using libraries.

But first, what exactly is a wireframe?

A wireframe is a visual representation of your project’s structure. It defines the bones, the elements that will work in your layout, and the placement of the content for your prototype.

The great thing about wireframing is that it’s a combination of simple elements that make you concentrate on your project’s functionality. In this stage, you can draw without thinking too much about the style and design.

You just have to figure out what your project targets are and how to develop them through wireframing by using simple elements. As you move further through wireframing, you develop the best solutions as team component make comments and suggestions about your sketch.

The first step is to create a project and name it “sections”, then make a list of “elements” you need to complete the different steps, up to the creation of the final “architecture.”

Creating a wireframe “by hand” first makes a lot of sense. It helps you develop the entire idea on paper (without digital limits), and also lets your concepts flow easily. For those of you who work in a team, working with paper doesn’t seem the best approach if you want to share your notions with everyone involved in the project — especially if you work with your team online.

In this tutorial, we will cover the following steps:

  1. Create a wireframe, select, and insert PS assets through libraries;
  2. Update PS files and see the results in Adobe XD.

We will create a set of objects to use in our wireframe. We will put them aside in our assets as we had an extra panel from where we can take our tools.

Once you’ve done with it, you can save it and re-use for future projects, by using the same elements again and adding some more objects as well.

You will need these Photoshop elements I prepared to use in our wireframe.

Here’s what we will create:


wireframe


Wireframe (Large preview


complete layout


Complete layout (Large preview

1 . Create A Wireframe And Select And Insert PS Assets Through Libraries

The best place to begin developing a wireframe from scratch is to draw it by hand first.

In this project, I want to create a landing page for an online course site. I know I need to communicate essential information in it. It doesn’t have to be perfect the first time out, but in the end, its effectiveness is very much dependent on how I organized the wireframe and how closely it aligns with the initial purpose.

First Step: Here are my own hand-drawn wireframes.


wireframe


Large preview


wireframe


Large preview

As you can see, there is not much information on them. The first intention is just to show how the layout will be composed and which elements are to be considered. Clean and simple.

Second Step: Re-submit the wireframe in a smaller size and with some margin notes which I use to explain the elements and their use:


explaining elements on wireframe


Large preview

Third Step: Let’s begin to create our digital wireframe with Adobe XD.

Open Adobe XD and choose “Web 1920” from the open window.


chose web 1920 in adobe xd


Large preview

Save your project as “Wireframe” by selecting FileSave as.

Once your file is saved, create another artboard for iPhone 67 Plus as well.

Click on the A (Artboard) button on the left side, and choose “iPhone 6/7/8” in the right sidebar.


creating artboard for iPhone formats


Large preview


creating artboard for iPhone formats


Large preview

And here are our two artboards: one for desktop and one for mobile.


creating two artboards, one for desktop and one for mobile


Large preview

Now we can begin to create our wireframe objects. Following our hand-drawn sketches, we will now create the same objects in XD.

Hero Image
Select the Rectangle Tool (R) and draw a shape where your hero image should be. Then grab the Line Tool (L) and draw two lines joining the vertices. This kind of shape represents our image placeholder.

Group the shape and lines and call the group “Hero”:


grouping shapes and lines


Large preview

Now let’s continue with the “Icons” section. I put some text before my icons, and I’m going to represent that visually with some lines. Grab the Line Tool (L) again and draw a single horizontal line. Click on Repeat Grid Tool ( + R on Mac or CTRL + R on Windows), and drag your line until you have three of them.

creatings icons

We need three symbols for our icons, so click on Ellipse Tool /E) and draw a circle. Click again on Repeat Grid Tool ( + R on Mac or CTRL + R on Windows) and create three circles. Then select the space between the circles and drag to make it wider.

creating circles

Feature Section
Create a light grey background (#F8F8F8) by using the Rectangle Tool (R). Repeat the steps from the previous Hero Image section above to create an image placeholder, then repeat the steps from the Icons Section (also above) to create a line for text. Finally, create a simple button with the help of the Rectangle Tool (R) tool.

This is the final result:


Final result


Large preview

For the Testimonial Section, repeat the same steps as before in order to create an image placeholder and some text lines. As you can see from the complete wireframe image, there’s a quotation-mark symbol that we have to insert.

We’re going to do it using Photoshop.

Open the Photoshop file I provided by clicking on this link.

I want to insert this image as a symbol by using Libraries CC.

In Photoshop, be sure to see Libraries panel by going on WindowLibraries. Create a new library by clicking on the little icon top right (see image):


creating a new library


Large preview

I named my library “Wireframe”. Feel free to give your library the name you desire.

Now click and drag on the symbol you want to have in your library:

clicking and dragging symbols in library

Switch back to XD, and go to FileOpen CC Libraries and you will see the last symbol you just uploaded through Photoshop and the library you created.


symbols created in photoshop and moved to adobe xd


Large preview

Drag the quotation symbol into your wireframe in XD and position it wherever you need it to be.

positioning symbols into your wireframe

For the “Prices, Subscribe and Footer” sections, we will represent them by using additional boxes and lines like the ones you see in the image below.

Note: You can find the email icon in the Photoshop file which I’ve provided here.)

Follow the steps described in the Feature section to insert the symbol in the library through Photoshop, open it in XD, and drag it into your wireframe artboard.

This is the result:


result


Large preview

One last thing we need to do before going ahead is to order our layers. Be sure your layers are activated by clicking on the Layer Icon ( + Y for Mac or CTRL + Y for Windows).


ordering layers in adobe xd


Large preview

Group all of the section elements into folders (I assigned them the same name of the section they represent). This way, you will have all of your elements placed in order and won’t have any difficulty in finding them quickly (see image).


grouping section elements into folders


Large preview


grouping section elements into folders


Large preview

We are now done with our wireframe!

In the next step, we will build our design by using our wireframe and discovering how to modify Libraries’ elements instantly.

2. Adding A Layer Of Fidelity To Your Wireframe

We have just finished our wireframe and, at this point, we can double-check it to see if we have missed something. Once we are sure that we have all of the necessary information included in the wireframe, we can then share it with the project’s team.

We are ready to move on and update our wireframe to make it “live” with images, color, and placeholder copy.

Go ahead and create your design. Duplicate your wireframe by saving it with another name (e.g. “Wireframe-Layout”).

First, we’ll need an image for our Hero section (I went ahead and used this one by Priscilla Du Preez from Unsplash. .)

Open the image in Photoshop, and reduce the image size by clicking on ImageImage size and set the width at 3000px:


reducing image size


Large preview

Save your image and then drag it into your Libraries.

In XD, drag the image from Libraries to your Artboard. Let it fit with the shape we just created as the image placeholder.


dragging the image from Libraries to your Artboard


Large preview

I’m going to add a logo and some text to this image; I need the image to be a little darker so that the information is easy to read. Go back into Photoshop Libraries and double click on the image in the panel. Once the image is open, go on the Layer panel, select the image layer and click on Add a layer style at the bottom of the panel. Set a Color Overlay with the settings as shown below:


adding a logo and some text to the image


Large preview

Save it, and it will be automatically be saved in all of your libraries. Switch back to XD and you will see the image in your artboard updated (no need to drag it back from the library again).

Note: Depending on the image size, it could take a little more time for the libraries to update themselves.


updating images in libraries


Large preview

Now let’s insert our logo. Open the Photoshop file and drag the “Learn!” logo into the Libraries. This is the font I used.


inserting the logo in photoshop


Large preview

Since our background is dark, we will need a white logo. Switch back to Photoshop and double click on the logo from Libraries.

Grab the Type Tool, highlight the logo text, and make it white. Save it, and it will automatically be saved in your XD artboard as well.


creating a while logo on a dark background


Large preview


creating a while logo on a dark background


Large preview

Insert some text and a button to complete the Hero section.


inserting some text and a button to complete the Hero section


Large preview

Next, I’m going fill out the next section by adding text and icons. The ones I used are from a free pack I created for Smashing Magazine that you can find here.

As previously done, open up the icons and add them to your libraries in Photoshop, then switch back to XD to place them in your wireframe. Here is the result:


adding text and icons, result


Large preview

Now we’ll move on to the Feature section. As before, we’ll drag an image onto the image placeholder (I used this image by Sonnie Hiles found on Unsplash). Add in some text and a button as I have shown you in the previous steps above.


feature section


Large preview

Open the Photoshop file I provided and add the check symbol into your Libraries. Open Libraries in XD and put the icon near the text. Use the Repeat Grid to make three copies of it:

making copies of an icon and playing them next to the text

Now let’s change the color of the check symbol. Go back to Photoshop, open it from the Libraries and give it a Color Overlay as shown below:


changing the color of the check symbol


Large preview

Save it, and see your icons in XD directly updated.


changing the color of the check symbol


Large preview

Now let’s finish our layout.

For the Testimonial section, add in text and an image for the testimonial (I took mine from UI Faces).


adding in text and an image for the testimonial


Large preview

Finally, we’ll add information for the Price section, the Subscribe section, and the footer. You can find Price tables in the Photoshop file I provided. Drag them into your Libraries in Photoshop, then open Libraries in XD and drag them into your artboard. Feel free to modify them as you want.

And… we’re done!

Conclusion

In this tutorial, we have learned how to work with Photoshop and Adobe XD to create a wireframe, and then how to quickly add fidelity to it by modifying Libraries elements. For your reference, I’ve created a mobile wireframe which you can use to practice and follow along to this tutorial. Follow the steps as we did for the desktop version to add text and images.

Let me see your result in the comments!

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(il)


See original article:  

How To Speed Up The Wireframing Process With Photoshop And Adobe XD

Using Gradients In User Experience Design

(This is a sponsored article.) Color has the potential to make or break product. Today you’ll learn how to use gradients for a website in Adobe XD through a very useful tutorial. In the last Adobe XD release, radial gradients were added so that designers can easily create unique color effects by simulating a light source or applying a circular pattern. Designers can add, remove and manipulate color stops with the same intuitive interface as linear gradients.

This article is from – 

Using Gradients In User Experience Design

Monthly Web Development Update 09/2017: Functional CSS, Android 8 And iOS 11

Editor’s Note: Welcome to this month’s web development update. It’s actually the first one that we publish, and from now on, Anselm will summarize the most important things that happened over the past month in one handy list for you. So that you’re always up to date with what’s going on in the web community. Enjoy!
Today, I’d like to begin this update with a question I’m asking myself quite often, and that was fueled by the things I read lately: Where do we see our responsibility, where do we see other people’s responsibilities?

Credit: 

Monthly Web Development Update 09/2017: Functional CSS, Android 8 And iOS 11

An Introduction To Gravit Designer: Designing A Weather App (Part 1)

Being a designer at the moment is great because a wealth of modern design applications are available that let you easily bring your ideas to the screen: Sketch, Affinity Designer, Adobe XD (beta) and Figma, to name just a few (not to mention the classics, Photoshop and Illustrator).

An Introduction To Gravit Designer: Designing A Weather App (Part 1)

One app that is quite new, though — and perhaps a bit overlooked — is the free Gravit Designer app. Gravit gives you all of the tools needed to create functional and elegant screen designs. It can also be used to make icons, designs for print, presentations and much more.

The post An Introduction To Gravit Designer: Designing A Weather App (Part 1) appeared first on Smashing Magazine.

Continue reading – 

An Introduction To Gravit Designer: Designing A Weather App (Part 1)

Challenge Yourself More Often By Creating Artwork Every Day

Whether you’re into good ol’ drawing and painting, or quick editing in Photoshop or Illustrator, one thing’s for sure: they’re all creativity’s best friends. Some draw pictures all day, while others find their inspiration in uncommon sources in order to break out of the box. Whatever it is that you decide to do, it’s good to challenge yourself more often and get out of your comfort zone. If you don’t, you may never discover something that you love doing, or perhaps even worse, never learn a whole lot about yourself.

This article – 

Challenge Yourself More Often By Creating Artwork Every Day

A Handy List of Resources for Picking the Perfect Website Color Palette

picking color palettes

Creating an effective color palette is a vital part of designing a website that works. But how do we get there? For some projects, you already have one or two colors picked out – maybe they’re your logo, or brand colors, and you’re working within those limitations when you create your site. For others, you’re starting from scratch. And some projects just need tweaking – minor adjustments to the color palette to make it more beautiful or usable. Whether you’re a seasoned pro looking to outsource some of the spadework of design, or you’re building a website for the first…

The post A Handy List of Resources for Picking the Perfect Website Color Palette appeared first on The Daily Egg.

Original link:  

A Handy List of Resources for Picking the Perfect Website Color Palette

Winter- And Holiday-Inspired Icon Sets [Christmas Freebies]

Christmas is just around the corner, and what better way to celebrate than with some free goodies? We sifted through the web (and our archives) to find holiday-themed icon sets for you that’ll give your creative projects some holiday flair. Perfect for Christmas cards, gift tags, last-minute wrapping paper, or whatever else you can think of.
All icons can be downloaded for free, but please consult their licenses or contact the creators before using them in commercial projects.

Link:  

Winter- And Holiday-Inspired Icon Sets [Christmas Freebies]

Thumbnail

Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator

Almost five years ago, I had the honor of writing a post on Smashing Magazine about my Photoshop panel GuideGuide. Since then it has seen wild success as the most installed third-party Photoshop extension, an achievement I’m quite proud. In that time, I’ve added some powerful features and, most recently, expanded it to Illustrator. This post will give you a taste of how GuideGuide can change the way you use guides in Photoshop and Illustrator.

Enhancing Grid Design with GuideGuide, A Plugin For Photoshop And Illustrator

If you’re one of the many people who already use GuideGuide, please read on. You may discover some unconventional uses that are not immediately apparent. I’ll provide a overview of the major features, and then give some examples of advanced and unusual ways it can be used to make you a more efficient designer.

The post Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator appeared first on Smashing Magazine.

Credit:  

Enhancing Grid Design With GuideGuide, A Plugin For Photoshop And Illustrator