Category Archives: how to

Design challenge 101

So, it’s late October, which means I have to brush up on my design skills in preparation for all things Book Fair.

Looking back at my history with design, I think it started when I was in middle school as a group of friends and I put together a literary magazine called Wet Ink. In high school, I took a photojournalism course, where the instructor introduced me to merging graphics with photography on old school MacBooks. He then suggested, because of my enthusiasm, that I consider joining the yearbook staff, which I did. I was one of those eager beavers, on the staff for both yearbook and newspaper. The whole writing, layout and technology combination had me hooked.

I’m convinced kids who take part in journalism and any media arts course are so much better equipped for the world. If you need proof, look into JEA and their annual journalism conventions. I’ve been to two of their conferences, and the students who I saw were all seriously passionate and ready to take on the world.

Volsung

Volsung yearbook staff ready to take on the world.

Having “done design” for so many years, I’ve come to find it’s a challenge, not just to meet the deadline, or to effectively communicate a message, but more so a challenge to myself. There’s the puzzle of trying to get all pieces of the message out to the audience, and still have something that looks good, while also generating interest and buy in. It’s not unlike library work, where you find yourself juggling multiple tasks and each day brings something new.

This year will be an interesting one in terms of design, largely because our annual Book Fair starts for a day, and then stops. It resumes for an abbreviated 4 days thereafter, but a lot of our key dates, which our families have grown accustomed to, have changed.

When I first sat down to begin the work of putting together our booklet of materials, I realized that these changes needed to be addressed. At the same time, I also realized that a bunch of the information on events that are forthcoming was missing.

One of the challenges in working with a group of people to put on an event that runs for a week is that communication doesn’t flow in a linear fashion. You have one group of individuals working on event A, another on event B or C. And then there’s me, working to make sure all this information on all these inter-related events is collected and written about in a way that parents can quickly make sense of everything given their busy and hectic lives. (And on whichever is their preferred device).

Challenge, right?

It becomes more of a challenge when you consider that I have to put together a 16 page booklet on top of my usual library work. This includes scheduled classes yes, and also drop ins for book talks or research on specific topics, and coincidentally this year, working with a group of students for their speech and debate tournament.

Needless to say, October through November are pretty stressful months.

On Thursday, I sat down to carefully look over what was known, and what was unknown in terms of Book Fair events. I started with the Parent Author Brunch and whittled down key components. Dates. Times. Individuals involved. Graphics/photos. Copy/Text.

I usually refer to what I created the prior year and here’s how last year’s print document looked:

15parentprint

2015 print version – what works?

After comparing events, I realized that this year’s content would be a whole lot more sparse (fewer individuals and books involved). I played with the components and wrote out what key pieces of information needed to be relayed:

A: Vitals: Date, time, location
B: Event timeline
C: Individuals/books (with high resolution graphics)
D: Info on how/were to register and $25 fee
E: Required logo
F: Copy and text “blurb” describing the event.

What needs to be mentioned?

What needs to be mentioned?

Our Book Fair chair had kindly created a flyer that worked as a rough first pass. Unfortunately, it was heavily edited as my boss attempted to figure out where to move images and where to place content.

Yikes! Lots of edits!

Yikes! Lots of edits!

From my sketches and notes, I had a rough idea of what was required, but I needed a little design inspiration. A quick browse on Pinterest resulted in this lovely graphic, and I loved how the three words were stacked on top of each other, with the dates clearly visible.

Gorgeous layout!

Our event was also a title with 3 words, plus the date had changed and making it stand out at the top would mean it’d be easy to see. A little more doodling followed after I saw the image and I opted for a two column design. (Note how I wrote in GUI interface in the upper right hand corner. It was jotted down as a possible search term on Pinterest. There’s some amazing stuff being designed there which highlighted the things I wanted to emphasize; mainly the date and time.)

Reworking the design.

Reworking the design.

With the design framework a little more fleshed out, I hopped onto the computer and launched InDesign. Work on the layout could begin! It went through a series of changes, and still may undergo some more changes as we finalize the book, but here’s how this year’s info for the Parent Author Event looks:

2016-parentsmock1

First pass at layout. A-F components plugged in.

2016-parentsmock2

2nd round of layout.

Notice the second layout is more text heavy. In the first, I had thought there’d be two different areas of copy. After writing out the copy, I realized it didn’t make sense to create a split on the info, so kept it all in one chunk. There was extra white space, which was filled with a combination of other images tied to the visiting author’s book. Then, directly underneath, would be the the required credit for author photo and website photos.

So that was what I worked on this Thursday. On Friday, I repeated the process for the FAQ and Book Club amongst other things. It was a LOT of work spent sitting in front of the computer for over 6 hours. I’d try to focus on one thing, but then would have to backtrack to make a minor edit on another item. Or I’d make a change and new info would come in via email, requiring that I edit on the fly.

I’m fortunate to be working with someone else this year, which is a nice change. We talk shop, or laugh when my tiredness gets the better of me. (I was running on about 6 hours of sleep between Thursday and Friday).

My old yearbook jokes from the 7th Guest games we played kicks in here. I kept saying over and over on Friday, “that’s not it” whenever I need to edit, undo. (Thanks for the voice, Mike Lopez!)  I’m finding that working with another person keeps me on my toes, makes me want to improve my work, makes me stay obsessively organized in terms of file saving/storage as we need to swap files back and forth.

An email went a while ago at work, asking how we balance work life, stress and personal life. After a two day push, I’m not sure how I feel about the crazy amount of time and effort put into the booklet. A good part of my enthusiasm over the years has dwindled whenever I had to start work on it, precisely because of how time consuming and draining it can be. Now that I’m working with a design partner, I don’t know if I want to introduce her to the same crazy work ethic, where we push and push to meet a deadline (and at what cost?)

There’s still a lot more work to be done. I’ve tackled the design challenge, but have some thinking to do on my efforts put into making the booklet happen.

Smore walkthrough

Smore is now the preferred platform on our campus to share information across the levels to faculty, staff, parents and students alike.

As a newbie to Smore, I looked through some of their featured flyers to get a feel for what’s possible, before launching in to play and explore a little more in depth.

To be honest, Smore is, I feel, a simpler and more limiting program by virtue of the fact that it only concentrates on the creation of newsletters and flyers.

Upon signing up and logging in, users are asked to identify what they are promoting and given seven options for templates (including one to start from a blank page):

StartOptions

Smore’s start options has considerably fewer options

For my purposes, I selected a news bulletin and the screen changed to the following:

StartOptions2

As a designer of the newsletter/flyer I could now click through to make changes to any number of things: the headline/title, a subheadline, additional text. I could also change (in the right hand column) the color, background and fonts.

Here’s where I find the greatest difference between Canva and Smore. Whereas Canva strives to help users become better designers, Smore seems to do the deliberate opposite.

The options for fonts, backgrounds and colors make it so that newsletter/flyer designer can change everything that detracts from the most important item on the page: the content.

Having worked with students on traditional papers, presentations and the like, sometimes giving an excess of options leads to a) wasted time and effort on selecting the fonts, backgrounds and colors that likely lead to b) a jumbled mess.

No bueno from a design standpoint.

However, there is a redeeming option of selecting a “minimal” design — which in essence wipes out all traces of backgrounds to your standard, go to white (or some form of light pastel).

Smore-Minimalist

Yawn. At least it’s readable, right?

My word of design caution when using Smore: Focus on your content, please. Make it readable and don’t try to “jazz” up your page with extraneous things just because you can.

Respect your reader.

If I’m being too hard on Smore, I will say there are some benefits to using it that I simply do not see with Canva. For example, Smore encourages you to add more stuff to your flyer and with one click, you have a set and targeted area where your content lives. (Canva employs a more haphazard method where YOU need to move said element to your desired location).

AddMoreStuff

Additional newsletter elements.

horizontal

…but adding photos can be misleading due to the placeholder image

Mostly, the spaces where you can add elements are arranged horizontally across the screen and as I plodded my way through creating my newsletter/flyer, I encountered additional obstacles that made the program less and less appealing.

The first was when I attempted to add two photos using the picture>photo album option. In the preview above, there is a placeholder image that rests on the page in the far right column.

It is a misleading image, because the image disappears when you go “live.” Nonetheless, it took me a few extra minutes to figure that out. I was looking for a way to remove the image, to no avail, thinking I had to rework my design and a simple note mentioning that it was merely a placeholder would’ve helped.

The next thing I found frustrating was the process of inserting photos. Doing so with Smore requires that you have an image that can be dragged from your desktop. In this day and age where images flourish on the web, I was disappointed there wasn’t an option to link to an image via url. Not having to save files onto the desktop makes me ecstatic as I save precious memory on my desktop. Having an option to link to image url would’ve also been nice.

Other morsels of frustration included the inability to change the alignment of text (or font size), buttons that didn’t look like buttons, embedded links that do not allow you to edit what’s shown, and my inability to preview certain features like the ones for event and payment—without having to first upgrade.

ButtonsQ

Buttons? Looks more like a banner. Can’t edit the width or shape.

EmbedLink

Can embed a link. Can’t change what appears if the link is text based. But great for videos.

RSVP-Upgrade

Event option shown, but not available w/o an upgrade.

Smore must be doing something right, as reviews for it are high amongst users and my brief look through the featured flyers shows some have garnered over 1000 + views.

Is there something that I’m not seeing?

Notwithstanding my above criticisms of Smore, I believe the reason why it’s so popular is because it uses the grid system (with columns and rows) to help present information in a formulaic fashion. Content is contained vertically or horizontally, eyes follow the larger items to other elements neatly organized in rows or columns. For a newsletter/flyer it works because it’s utilizing one of the oldest design principles.

Grids

Grids = structure.

What has me intrigued with Smore are some of the backend functions and what they have “coming soon” in the pipeline.

Understanding that not everything is meant to be live or for all the world to see, Smore offers unique privacy options that you can adjust for all manner of things:

Privacy

Note the custom domain and Google Analytics options on the bottom right. For the advanced user—possibly one who envisions directing users to their Smore page on a frequent basis—you can customize the domain so it reads something like smore.com/literacylibrarian rather than the automatically generated url.

Plus, you can even insert your Google Analytics code to easily track and monitor who is visiting your page, when, using what browser, redirected or linked from which website.

To note, there is a built in analytics function within Smore that tracks how many folks have viewed your newsletter/flyer. Alas, I was not able to preview what it looks like, but if I’m not mistaken, I’d guess it’s structured much like Google Analytics.

Also: a word here about analytics. I find it intriguing to take something used in the business world and apply it to education. NPR recently did a segment showing how analytics improved contact with students that would otherwise get left out/behind. The example was from a community college, but I can’t help and think, how does/can it apply to schools in general?

Other pluses: Smore provides a wealth of sharing functionality which segues nicely into our ever digital world. You can send your creation via email or social media, and as ever there’s the option to print and embed:

ShareOptions

Sharing options galore. If only I can permanently remove the Promoter pop up…

Finally, a feature I noticed dimmed out, but listed as “coming soon” was one for payment — it leads me to think about storefronts, small business, e-commerce. Perhaps, in the school setting, built in fundraising or purchasable  “wish lists” from classrooms?

AddMoreStuff

Payment: bottom right

It’d be interesting to see how that feature plays out, what types of payments are allowed: credit, PayPal, bitcoin, ???.

I’ve been creating newsletters/flyers since the 90s so the buzz for Smore had me more than perplexed. Does Smore help design and present information in visually appealing way? Yes. Does Smore make it easy to disseminate that information across multiple platforms? Yes.

Have I used it to create a final, finished newsletter that I would want to share? No.

If the minor limitations that I noted can be fixed, I’d be close to joining the bandwagon. For now, I’m waiting to see what develops with their payments feature and giving them a little more time to tidy up a few flaws.

Canva vs. Smore. Which is better, next time.

 

Tips on hosting an author

It’s getting grueling with design stuff at work and to bring the fun back into my world, I needed to remind myself why I love to do what I do:

Design + library = <3

As you may or may not know, I’ve been exploring different online design programs of late, and this comes on the eve of our school hosting two amazing authors on campus this year.

Each and every time an author agrees to come visit, I am so thrilled, excited, thankful and grateful. I know that not all schools have this opportunity and that we are able to get more than one author each and every year simply amazes me.

And so, I thought I’d put together this little infographic:

tips on hosting an author (2)

 

Canva walkthrough

In my previous post, I gave the background for wanting to explore the similarities and differences between Canva and Smore and in this post, I’ll be getting to the nitty gritty specifics.

I’m always on the lookout for good great tech tools and one of the things I’ve noticed is there’s a high likelihood of you needing to sign up first before being able to try out the said tool.

What I’ve noticed from my experience with (web) design is, a lot of times you get a visual or several screenshots of how an item you want to install works. This includes a quick look at the backend of how you as the coder/designer would get it to function and also shows what potential viewers will see, once the item is installed.

It’s too bad when new tech companies write up their selling points on how cool their product is, they often hold back on showcasing specifics. I get it, they don’t give away the farm, but a little detail can often go a long way for those with inquiring minds.

Anyhow, off the soapbox. I first heard of Canva back in May 2015 when I read about a yearbook teacher being frustrated with teaching design. There were foundational specifics that she noticed many of her students were overlooking and she wanted to reinforce them while at the same time, help people learn how to design better.

Enter Canva.

At first glance, Canva is all light tones and pastels, giving you the look of being simple and serene, but do not let that fool you. Since I first read about them in May, they’ve been working non-stop: they’ve increased productivity on iPads, created a work version for those looking to share consistent logos among team members. They even designed a holiday line of graphics for use during Halloween.

The types of things one can design on Canva are endless: from basic letter sized documents, to social media posts, banners or graphics, wallpapers, postcards, et. al. If you can’t find what you’re looking for, you have the the option to create custom dimensions for your project.

SocialMedia1 SM-Events4 Documents2 Blogging3 Ads-Help5

 

 

 

 

What’s more, the powers at be at Canva put together a Design School Blog that is filled with ridiculously great content on color choices, fonts, samples of great design and more. If you work with students and need a refresher, look here for valuable, sharable information.

So let’s say you want to create a simple 8.5×11 document. When you select that choice, you’re taken to a screen where there are six options given to you in a column off to the left: search, layouts, text, background, upload, zoom. (WordPress users, it looks quite similar to the dashboard once you log in). To the right is your blank page and depending on the options you pick, you’re given different choices.

Canva Main Screen

Canva’s main screen setup.

Have I mentioned the endless variety that is offered with Canva? It. Is. Amazing.

Search Text Backgrounds Upload

If the choices offered aren’t enough, you have two options: you can purchase an item for use for a nominal fee ($1) or you can upload your own items as desired. I opted for the latter route when I tried Canva at the end of the school year to make a few flyers: one announced our summer reading program, another provided a quick at a glance to our online databases, with links to them. The third simply promoted our school’s subscription to OverDrive. The results:

SUMMER READING

Summer Reading Infographic

MJS DATA

Database flyer w/hyperlinks

AUDIOBOOKS

Flyer introducing OverDrive

I found Canva to be simple to use and intuitive. It’s one of those online programs that gives you WYSIWYG (what you see is what you get) design. As with most new tools though, there are a few limitations. You can’t alter the colors or fills of all images. In some cases where pull down menus are offered, my smaller laptop screen could not get to those options without pausing to drag the vertical slider for viewing the screen down — an annoying extra step when you’re in mid design.

Options-Colors

Hit or miss with changing fill and line colors.

Options-Links

Option for hyperlinks.

Options-transparency

Option for transparency.

Screen shot 2015-10-31 at 4.59.37 PM

Smaller screens = blocked drop down menus.

Indeed, Canva seemed to work best on robust computers with lots of speed. If you’re on a slower, non-flash enabled computer you may run into glitches and be prepared to have some patience to get all items on the screen positioned exactly where you want them.

Minor hiccups aside, Canva is a good tool to introduce to those who are time and design challenged. I find myself using it to create library related announcements and flyers when I’m without my design tool of choice (Adobe InDesign). As well, when a document stares at me with a plain blank background, I know Canva will give me some texture and variety with a few quick clicks of a mouse.

For next time, I’ll look at the school promoted Smore.com.

 

How to videos

How to log onto email using any browser:

How to access the library catalog and search our titles:

Apologies if you can’t view on your phone: they are both flash videos. If you know of a work around, please share.

Originally, this post was created sometime around 2009 (that’s a rough guesstimate), when I first discovered Jing for screencasting and wrote a little something to share.

Ah-ha! My research abilities show that sometime was actually closer around July 17, 2009 as the post I wrote can be viewed courtesy of the WayBack Machine. Want to read?

https://web.archive.org/web/20130930060311/http://literacylibrarian.com/?m=200907

Thanks for archiving stuff!