Sarah Mills

About Sarah Mills

Sarah brings more than 12 years of design experience to her position as Web Designer with the Matrix team. She has a background in design, branding, and social media strategy, as well as illustration; she also stays active in the design community, keeping up with trends and new solutions.

Photographing our staff: some lessons learned

photos

To preface: I am not a professional photographer. I recommend hiring one, especially if the images will be used on your website: beautiful imagery makes a world of difference towards your brand. However, there are occasions when it is not feasible to do that—budget, time, frequency of need.

Here at Matrix, we need to update our photos every time someone joins the team and we needed a way to get consistent looking images for use on our site and client extranet. We want people to know who we are! Also, the world needs to know how good-looking the Matrix team actually is.

I set about taking our staff photos—regular shots and a few fun ones to show some personality. Here is what I have learned about shooting people on a white backdrop so far:

1. Photography equipment is not as expensive as I thought it would be. We were able to purchase a backdrop and lighting equipment from Amazon that fit our needs. PS. Lenses are ridiculously expensive.

2. Light the subject and background separately. Recheck it for each person—people are different heights and values, which will change the results.

3. Have people wear dark clothing. They need to stand out from the background.

4. Google your camera model’s settings. There are so many things that will help your results—definitely Google how to set your custom white balance. Experiment with the aperture settings and ISO speed.

6. Take a TON of pictures. People blink. A lot. Setting the camera to multi-shot (3 frames per second) mode helps, too.

What photography tips have you discovered?

GOV.UK Design Principles

Recently Gov.uk won design of the year, which is discussed on Design Observer. I love that Government Digital Services decided to publish their design principles that clearly lay out how they tackled such an enormous project. Gov.UK home page

Start with needs*

Do less

Design with data

Do the hard work to make it simple

Iterate. Then iterate again.

Build for inclusion

Understand context

Build digital services, not websites

Be consistent, not uniform

Make things open: it makes things better

As a huge fan of open source in general, I feel designers (and PM’s, devs, etc.) do their part when they publish lessons learned and case studies. This list of principles applies to everyone working on the web now, and it is something our clients should read to understand the process. Honestly, I am pretty sure these principles (and handy examples) apply to more than just web nerds. For instance:

Government should only do what only government can do. If someone else is doing it — link to it. If we can provide resources (like APIs) that will help other people build things — do that. We should concentrate on the irreducible core.

We’ll make better services and save more money by focusing resources where they’ll do the most good.

In the future I am going to do more to document my process—not only to share, but to improve and grow. My biggest takeaway from this list was the last:

Make things open: it makes things better

We should share what we’re doing whenever we can. With colleagues, with users, with the world. Share code, share designs, share ideas, share intentions, share failures. The more eyes there are on a service the better it gets — howlers get spotted, better alternatives get pointed out, the bar gets raised.

What principles and best practices in your line of work apply not only to your industry?

Using Icon Fonts in Web Design

Recently I was reading Paul Boag’s “Breaking free of the print design mentality” blog post where he asks the question, “How can you create a compelling design that works just as well across all of these canvas sizes? To many this sounds impossible.”

One way I try to create designs that will work anywhere is to use icon fonts. You are probably already familiar with regular icon fonts on every machine, like Wingdings or Webdings, but icon fonts can do so much more on the web.

Some of the icons in Wingdings, an icon font on most machines

Some of the icons in Wingdings, an icon font on most machines

Because they are fonts and essentially vector information, these icons scale perfectly at any resolution—making them worry free when it comes to designs seen on retina displays. Designers don’t have to worry about 2x pixel sizes or spend extra time making separate images for different displays.

Another advantage of using icon fonts is that you don’t have to make new images if you want to quickly change the color—it is all done in CSS. For a client site that allows the user to change the color of text, they are also able to change an icon’s color with no hassle.

A List Apart discusses even more advantages to symbol fonts, from ligatures to increased accessibility. Roger mentions Stately in a previous Snack O’Clock post—an icon font of states you can use for an interactive map.

The best part about icon fonts is that it is simple to make your own! I use Icomoon, which lets me upload an SVG and make a font of the glyphs I want to use.

Some icons from Icomoon

Some icons from Icomoon

Here at Matrix, we have launched several sites using icon fonts: NECA‘s responsive site uses icons in the page headers, so they are perfect at every size. The American Counseling Association’s main site and conference site both use icon fonts for social media images and small icons. FMI2014‘s colorful site uses icon fonts not just for social media, but as an overall part of the branding in the headers.

While icon fonts are becoming more popular because of design trends like “flat design“, this is just the beginning of uses for scalable images on the web.

What are your favorite responsive design techniques and tools?

HTML5 vs. Flash: The home game

The opening screen of Waste Creative's Flash vs. HTML5 site.

The opening screen of Waste Creative’s Flash vs. HTML5 site.

Last year, two of our front-end designers gave a great talk about HTML5 and CSS3 to DC Web Women.  Let’s just say we’re fans.  That’s not to say that we hate Flash, but with mobile use getting bigger and bigger all the time, and with some platforms not supporting Flash, HTML5 is just going to get more important.

These guys at Waste Creative built a game in Flash called Waste Invaders; then they ported it to HTML5.  They compared the two and released their findings on this beautiful parallax scrolling site (made with HTML5 and laid out in Flash, actually!).

The site’s beautiful, and the game’s pretty fun! Go look!

How do you feel about these two tools?

Design Tools: Web Typography (aka fonts)

If we were type I could kern U and I closer together.

It’s no secret I love fonts.

I am kind of required to love them as a designer, but you should too. Typography does more to communicate your content than any other design element. With the growing popularity of responsive web design, the visual trend is becoming more and more minimal—less dependent on heavy graphics, and more dependent on typography to convey voice and tone. In fact, it is possible to create a beautiful and compelling experience with no images or graphics at all—typography is that powerful. It is not dependent on resolution, especially important in this day of retina displays.

Continue reading