Sarah’s career so far

Sarah’s career and the online presence she’s developed based on it are good examples for anyone with a design-based career in web development to look at and emulate in his or her own career path.

Sarah was an honors student at California State University, Fresno, graduating in 2008. She studied mass communication and journalism. While still at CSU Fresno, Sarah worked as an assistant to a photographer, helping with both photography and marketing. Her work included photo editing, the use of filters, and touch-up — basic skills for a designer.

Also while still in school, Sarah worked as a production assistant at the local city magazine, Fresno. She did graphic design and page layout, with lots of work in the Adobe suite of design tools, using Photoshop, Illustrator, and InDesign.

After graduation, Sarah worked as a graphic designer for Logos Bible Software in Bellingham, Washington for more than four years. She helped create a new brand identity for that company, and she implemented it in site content, email marketing pieces, web-based ads in Flash (remember, this was way back in 2010), and even in videos she helped produce. Sarah was also developer-relations coordinator for the company. She worked in PHP, AJAX, and the Big Three of modern web development: HTML5, CSS3, and JavaScript.

Sarah then returned to the Bay Area, where she took contract positions and worked as a freelancer for two and a half years.

Recently, Sarah took a position as a web developer for Asana, a company that makes communication tools for teams to use. Its slogan is “Teamwork without email.” Web development is crucial to the product itself, not just to the company’s website that describes what it makes and how to buy it.

You can see Sarah’s LinkedIn site in Figure 13-1. You can also visit it yourself at www.linkedin.com/in/sarahrudder .

Sarah’s LinkedIn page is a good example of how to handle periods of contracting and freelancing in your portfolio. She gave each of the longer contracts (between 6 and 12 months) a brief, separate entry in her online resume, and then combined smaller jobs into a period of contracting about a year and a half long. For these smaller jobs, she just listed the client names, without any detail about what she did for each.

Sarah’s portfolio site, above the fold

For an example of a good portfolio site, check out Sarah’s site at www.sarahrudder.com. The home page is shown in Figure 13-2. Sarah has chosen to put everything on a single page.

Single-page websites have become popular as a way to quickly get across a focused idea or set of information, without inflicting the complexities of creating and maintaining navigation between pages on the site’s owner, nor inflicting the complexities of finding things located at different spots on the website on users. The user just has to scroll up and down, and everything in the single-page website is revealed.

Using a single-page website doesn’t excuse you from the need to do web design, though. Like any good web developer, Sarah knows that a well-designed site makes a visual statement.

This means that the home page of the site (which is the entire site in this case) and, in particular, the area above the fold are important in setting expectations for the site as a whole. People look at the web on all sorts of devices these days, but generally, above the fold refers to content in the top 350 to 400 pixels of a web page.

Take a look at what Sarah has put above the fold on her portfolio site:

• Her name: Her name, in all caps. The upper-left corner of a web page is where the user’s eyes go first and return to again and again. So that’s where you should put your brand — or, in this case, your name.

• Links: Sarah’s page contains icons that link to her LinkedIn page, Dribble (a site that hosts designers’ images), Twitter, and email. Including these links helps Sarah keep her portfolio page simple because users have other places to go for additional information.

  Although Sarah did not, many developers include on their portfolio site a link to GitHub, a website that publicly shows the code you have written. GitHub is an effective way for anyone to review, modify, or improve the code for your programs, and for others to see the overall progression of your coding ability.

• Photo: Sarah has a high-resolution photo across the top of her page — much like the big photos that Facebook has added to its pages. Note also that the photo, while friendly, obscures enough of Sarah’s features that you wouldn’t recognize her in public from it.
• Statement: It’s good to have some brief statement summing up what you’re offering. Sarah’s career is varied enough that this is not easy. So she says, “Hi. I’m Sarah and I love to make.” This statement covers all her many different skills and is also a subtle reference to maker culture, associated with Burning Man, 3D printing, and other cool stuff.
• Descriptive header: This initial header describes what Sarah does, at a high level: “Website Design & Development.” People looking at the page, and perhaps hoping to get help with a project, can easily make an initial decision as to whether to keep looking.
• List of key skills: Sarah then lists her key areas — basically, things for which someone might want to hire her: UX and visual design; semantic HTML, CSS, JavaScript, and PHP; custom themes for WordPress; mobile and responsive sites; wireframing and prototyping; and content strategy. Sarah probably could have added other things here. A list like this usually contains not just the kind of work you’ve done but also the kind of work you’d like to do.

The part of Sarah’s home page that’s above the fold conveys many powerful messages, and even offers a fair amount of functionality, with just a few words, icons, and a single large image. Visitors can definitely figure out immediately if they want to scroll down and learn more, or go somewhere else — and that’s one of the key things that all web developers try to accomplish with their page.

The rest of Sarah’s page — and site

I can describe the rest of Sarah’s home page and the entire site at the same time because the entire site is only one page. Figure 13-3 shows another screenshot of the home page, from farther down on the page. However, the entire home page is about a dozen screens deep. To scroll down through all of it yourself, go to www.sarahrudder.com.

Here’s what you’ll find on the rest of the page:

• Cepheid site: This is a medical products site, and the Sarah Rudder websites shows both an extended screenshot and an iPhone screenshot of the site (cleverly overlaid onto a picture of an iPhone).
• Natera site: Also shown are three pages from the site for Natera, a genetics testing company.
• “HTML, CSS, WordPress, & .Net” subheader: This subheader is followed by thumbnails for Faithlife Bible, Faithlife Women, and Vyrso, a site for Christian-themed ebooks.
• “Marketing Collateral” major header: The specific skills listed under this header are HTML emails, landing pages and takeovers; web banner ads; and print advertisements. Following this is an HTML email with a lot of content, carefully laid out. Again, potential clients can quickly see whether Sarah has the skills they need.
• “HTML Email Design & Code” subheader and “Content Design” header: These areas provide additional depth on the remainder of the skills that Sarah is promoting on her portfolio site.
• “The Story So Far major header: In just seven paragraphs, Sarah tells a few pieces of her life story, along with a brief description of her philosophy for web development.

These pages clearly show Sarah’s graphic design expertise but also feel light and open. In addition, she uses color and photographs effectively.

By providing so many examples, Sarah also helps those who want a designer with expertise in a certain kind of content. Someone creating a medical-oriented site, for instance, would see lots of examples from that field here, while someone creating a sports-oriented site, not so much. Sarah doesn’t make any broad claims about what she is or isn’t good at; she lets her work speak for itself.

Sarah’s work leaves a strong overall impression: If you had a medium-sized web project, you’d certainly feel assured that Sarah was someone who could lead the project or, if you already had a lead in mind, be a big contributor.

And of the extent of the examples provided, you get the impression also that Sarah might be a good person to bring on board if you needed something similar to her previous work done quickly, yet with polish.

Showing an entire home page on your site implies that you were the lead person for creating or extensively revising the site. If not, make your role clear. If you played a supporting role in creating a site, go ahead and show it on your portfolio site but provide an explanation: “Provided UX services for a team of 12 that created the Vickenlooper website,” for example.