Portfolio Resources

These are sites I’ve come across that may help someone building a portfolio. (Writing it also helps me remember!)

Yet another portfolio post!

Rather than go on about my own issues, I wanted to share a few resources. Before I begin, I’m going to make a little rant in case you’re feeling overwhelmed, like I am.

One of the sites emphasizes the importance the design a portfolio has on your job prospects. I feel this importance is overblown because the the design or tool seems to have such a big impact on how the portfolio is perceived. I can’t emphasize enough how many people use paid templates, plus the cost of a web domain. And I would be lying if I said it didn’t bother me that choosing the wrong CMS template is the difference between gainful employment vs not.

The fact that the portfolio makes a difference at all seems like the difference between showing up in a limo, BMW, Toyota, or SmartCar. I guess it really is like dating, which I admittedly know absolutely nothing about.

At the start of this review, my feeling is that people just want to be entertained. My thoughts changed somewhat, which you can read at the end.

/rant

 

Ok, now that I’m off my soapbox, here is my list. It’s organized like this:

  • Sites – Guides, essays, and portfolio collections
  • Tools – What people use to create their portfolio
  • People – A small handful of portfolios

1. Sites

A collection of essays, slides, and guides.

Article page: The Case Study FactoryThe Case Study Factory is about how similar so many UX portfolios seemingly look alike. The authors write:

“How the formulaic approach to UX case studies is numbing our critical thinking as designers, and how to bring a unique point of view to our work.”

Provides some pretty good tips at the end, however I recommend you read the whole article for context. Also because it’s a good article.

  1. Define your area of focus
  2. Align the story with the medium
  3. Set up the context of the project
  4. Focus on insights rather than process
  5. Design your case study reading experience
  6. Obsess over your case study visuals
  7. Make it personal

 

Article home page

Sometimes it’s just helpful to look at a big list. Here’s a list of 80 portfolios. I talked about 2 in the People section.

Guides and Slides
Article page, “Design a Winning Portfolio — Tips + Tricks from a Google Designer “

Design a Winning Portfolio — Tips + Tricks from a Google Designer  is a slide deck of tips and tricks. The slides are shared from Google slides (link).

This is a compilation of tips and tricks to improve a design portfolio. She states:

While each design discipline has slightly different project expectations (i.e. UX wants wireframes while Branding wants logo sketches), I’ve realized there is an overall universal set of tactics that, when applied, will automatically enhance and differentiate any design portfolio.

The Google slide deck is really big and there are videos, so keep that in mind. It loads a little slow.

 

nng.com’s recent article, “5 Steps to Creating a UX-Design Portfolio” is probably what kicked this whole thing off. Actually I talked about this in another post, so I won’t rehash. But I will point out that I’ve made a number of changes to my website and my portfolio at Cargo Collective, which at this moment is offline.

My Personal Bookmarks

I’ve had the following links bookmarked for a few years. These seem more geared to PDFs.

Portfolio Handbook [PDF] from the Class of 2012 Industrial Design, DAAP, University of Cincinnati.

This book was put together for the purpose of facilitating higher-quality portfolios. It will not cover project processes, but will act as a guide to documenting a project well for your portfolio. We hope the book will ease some of the anxiety around creating your first portfolio and then later exist as a helpful reference book to check a newer portfolio concept against

 

UX Portfolio Guidance, from Zebra People [PDF], London

We are fortunate enough to see some great portfolios, however there are still many UX practitioners who are selling themselves short. There are some absolutely brilliant and in-depth guides about UX portfolios out there. But our intention with this document is to provide a concise, visual hand book on what to include in your portfolio.

Your portfolio represents you. But you’re not always there to talk about your work. No one gets hired on their portfolio alone. The best outcome is a meeting. Tonight is about snap judgments.

2. Tools

What people use to create sites

From the list of 80 above, (plus a few others I found) I randomly clicked into about 3-4 portfolios per group and I took a look at the page source.

Many, many sites are built using Squarespace, WordPress, Wix, or some other type of CMS with either built-in or plugins for flashy animation, grids, and what-not.

Other sites were hand-coded, often with Bootstrap or Foundation. I took note of the many JavaScript libraries.

WordPress and Adobe Portfolio

Semplice home pageFor WordPress, I came across a template called Semplice. It is advertised as a WordPress template for designers. The latest version is Semplice4. Price is $100. I wouldn’t be surprised if many people have upgraded to the Studio version for $140. Semplice does not seem to have options for blogging; I didn’t see it.

 

Salient Live Demo

Another theme I came across is Salient, although the site I found it on had a “Under Construction” label. It’s $60 and available on ThemeForest. It has over 5,500 reviews, over 95,000 sales, and is currently rated as 5-star.

 

portfolio.adobe.com

If you use Behance, you may be interested in Adobe Portfolio. It’s $9.99/month, paid annually (about $120). You get access to Adobe Portfolio, Photoshop, and Lightroom, as well as access to Adobe Fonts. You can get a free trial, but you need to upgrade to connect a domain/subdomain.

Free DIY Options

Startbootstrap.com offers free Bootstrap templates, themes, and snippets that you can download and customize. Basically everything is free, with the obvious exceptions that you cannot use Startbootstrap templates to create a competitive website serving free Bootstrap templates.

I have used Startbootstrap multiple times and I find them pretty easy to use and combine. Some have CSS or JS animations built in; mostly CSS.

It does require solid HTML and CSS knowledge.

 

Github Pages uses your own github respository to host a website. It’s 100% free. However, it will say username.github.io/yourproject. And your code will be online for all to see. I’m also not sure if you can use Google Analytics.

Again, this is for people who have experience developing websites.

Obviously, having a free site generator is great. If you want to have your own domain, you can get a personal email address, like yourname@yourdomain.com. And you can connect it to github. But all that is well beyond the scope of this post.

 

BlankSlate by TidyThemes allows you to completely customize a WordPress installation, by providing a theme with absolutely zero styling. Sometimes you use a nice theme, but end up undoing stuff you don’t really like. Needless to say, this theme is for people with a good amount of experience. I say no more.

JavaScript Libraries

If you code your own site, these were some of the libraries and plug-ins some people used. I thought tilt.js was pretty cool.

There are so many JS libraries, this list will keep getting updated.

Lightboxes & Carousels

Instagram Embeds

  • lightwidget.com – Embeds Instagram photos into a webpage.
  • spectragram.js – http://spectragram.js.org/ – Instagram API plugin

CSS

Obviously Bootstrap, Foundation, grid/flex, and icon font libraries also showed up.

Jekyll/Jekyll Themes

  • poole – http://demo.getpoole.com/ – the Butler for Jekyll
  • hyde – http://hyde.getpoole.com/ –  a 2-column Jekyll theme

Layout

If you are a PDF portfolio person, you might be interested in using a grid.

The Grid System

Grid System

“The ultimate resource in grid systems.”

You can download InDesign templates, at 8.5 x 11 and 11 x 17. Good if you want to create a print portfolio, or if you want to redesign your resume.

3. People

A few portfolios in use

I randomly came across the following people, either in context of this post, or when reading an article, or serendipitously in some other way.

Caveat: In no way am I promoting any of the following people. I have never met them. I don’t know if they’re the kind of people who cut in line or litter. Maybe they don’t pick up after their dog….

The one thing that is true is that I took a look at their websites and I have an opinion. If you disagree, there’s a list of 80 portfolios above to check out.

Antonio Carusone, creator of Grid System. A very simple website. No images. He simply links to his other websites, most of them photography sites. The site is made with Cactus, which is another static-site generator not using Jekyll. (The last commit was 2 years ago, so it may not be maintained.)

I viewed a few other personal websites like this: simple, text-only, with no images. I think this is a good way to connect disparate interests. He seems to have a lot of experience, which is also good to know if you’re looking for ideas and you’re not early in your career.

 

Hiroaki Ito has this project on Behance. I’m including this person because I attended a virtual recruiter session with Google. The three recruiters reviewed two portfolios, and this project was one of them as an example from a visual designer. (The UX designer was Simon Pan, who uses WordPress. It appears to be his own theme although it could’ve started from BlankSlate.)

The project above is a combination of several very long images, stacked one on top of the other. This designer has a job at Google. He does not seem to have as much experience as the first guy.

 

Johna Paolino is someone I came across on Medium. She wrote an article on using CSS grid. Then I found her website, which is hosted on github. So that’s another – FREE – option. Looked like an interesting site and she seems to be employed at the NY Times.

That big font is BungeeShade.

 

Pendar Yousefi is the only person I came across in the list above that used Adobe Portfolio. It was pretty nice looking, so I’m including that here. He also appears to be employed at Google. He also seems to have many years of experience, which is another good data point.

To be clear, you cannot create an Adobe Portfolio account and link it to a personal domain without becoming paid subscriber. He does a good job of connecting his web properties. For him, he’s getting his money’s worth. But I just want to make sure it’s clear, according to the website, money appears to have been exchanged.

 

I came across Sharon Tsao‘s portfolio above, too. She does NOT appear to be employed. But I thought her simple site was an interesting example, and she seemed to explain her background particularly well.

She built this herself, or at least she did not use a template or CMS.

Foot imprints on sand near a beach
Photo by Matteo Kutufa on Unsplash

Thoughts & Reflections

I wrote this post over the course of 1-2 weeks. Right away, my initial thoughts for my own portfolio when the time of this post were to create a simple site that links out to other websites or to just expand my current WordPress installation (this blog). I also considered installing a separate WordPress instance altogether, which is still a strong possibility.

Yet after writing the majority of this post, I continued to investigate the list of 80 portfolios. I kept finding new CSS and JavaScript libraries. And, I wanted to dig a little deeper into some of these to find out more about how they were made and other details that the guides above don’t really get into.

Despite my rant at the top of this post, I have started to change my opinion a little on the importance of portfolios. I think there is something to be said for trying to display your work in as good a light as possible.

I’m still collecting more data about these 80 portfolios, so there will be another post. And I’ve found more items to add to the Tools section (Webflow, anyone?), so I’ll probably continue making updates to this post in addition to simply posting again.

[Featured image credit: Photo by Pierre Bamin on Unsplash]

Notes from “Career Management for Introverts”

I recently attended a 90-minute talk on career management for introverts, held at the Science, Business, and Industry Library in NYC. Here are my notes.

Overview

A review of the speaker and the talk

The speaker was Win Sheffield who is a career coach. He speaks at the NYPL on job hunting and career management. He’s giving an upcoming talk on networking in October.

For this talk, an overview on the NYPL website says:

Do you feel you shouldn’t have to sell yourself? Are you uncomfortable around people who are talking about their accomplishments? Do you find yourself looking for ways to get out of conversations rather than into them? Perhaps instead you find yourself coming up with the answer while the person you are listening to goes on and on or maybe you like to take time to consider your answers. If you have had any of these experiences, you may be interested in this talk.

This talk is part of the NYPL Career Services series. You can read about the talk online: https://www.nypl.org/events/programs/2019/09/11/career-management-introverts.

I also included a link to the Facebook Live video at the end. But, if you don’t want to watch a 90 minute video, you can read my notes below.

My Notes

Ok, let’s get into my notes.

First we discussed the difference between introversion and extroversion.

  • Remember that introverts are hired for skills related to being an introvert — such as reading, working independently, and deep thinking.
  • The US is NOT an introverted country, but the UK and Japan are.

Phone Conversations

Turns out, no one likes talking on the phone.

We discussed why phone calls are annoying:
  1. The expressions and body language of the person on the other line are hidden.
  2. It requires an immediate response; you cannot mull over your answer.
Some tips to help make phone calls easier:
  • Put up a mirror by the phone, to help you remember to smile.
  • Stand up while on the phone, to project more energy.

Small Talk

Despite the stigma, small talk is good for introverts.

Although we kind of hate it, small talk is a good way to make connections.

It can help if you think of ideas in advance. Good topics can include the weather, food, transportation.

We also discussed talking about decorations or photos someone has on their desk or office. That can help put the other person at ease.

Tips on Meeting People

Show empathy

I can help to put yourself in their shoes. For instance, if you see someone is wearing new shoes…. Imagine they still need to break in their shoes. Their feet are uncomfortable!

Send questions in advance

It can also help to send questions in advance, particularly if you’re job hunting. This is a low-pressure method to ask for support. For instance, you can say:

“I’m not seeking a job from you or anyone you know, but I’m looking to move into [name job area] and I’d like to get your opinion about [the information you’re looking for].”

When having conversations with extroverts:

Extroverts can have a tendency to dominate the conversation. Sending questions in advance can be helpful, to help keep them on track.

Remember to talk to people with whom you feel comfortable:

  • People who’s job it is to talk to you and provide help (help desk, customer support)
  • Friends
  • People in a non-authority role

The most important thing when meeting someone is talking about what you’ve already done.

Telling Stories

Tell people what you’ve already done by telling your story.

There’s a formula to telling a story about one of your accomplishments. It goes like this:

  • Setup: What is the context of the story.
  • Trigger: What changed to get the story going; aka “the challenge”.
  • Plan: What was your plan.
  • Unplanned outcome: How did things go off-track
  • Chaos: How did that lead to chaos/unplanned expectations.
  • Success: How did you resolve the chaos and get things back on track.

Where to use this method:

  • Cover letters & resumes
  • Elevator pitches
  • Anytime someone asks you about yourself

It helps to practice though. (Tips below!)

But, what if the story is negative?

Someone asked if you should tell stories even if they’re negative. The answer is Yes. The reason is that without conflict/chaos, the story doesn’t show growth.

Q & A / Pro-Tips!

A technique to improve your storytelling.

Someone who identified herself as a writer asked a question. She said she worked from home alone so much that she was often surprised by the sound of her voice.

A suggestion was to make a video of yourself talking, or telling a story. Then you can see how you come across to others. But you have to do this at least 6 times, and watch it, if you want the best outcome.

A tip for extroverts

Another person asked about being an extrovert. She said that during an interview she becomes very extroverted. She wasn’t sure how to handle that.

As the speaker mentioned, introversion and extroversion is a spectrum. Not everyone is always introverted or always extroverted.

His suggestion for extroverts is to always take a breath before giving an answer. That helps them slow down.

Final Tips

Planning Ahead

  • Conduct a job campaign, not a job search. A job search is you fitting yourself to the company. A job campaign means creating your own opportunity. Network, make small talk, etc.
  • Be aware and optimistic
  • Know your stories

Take thinking breaks

Smokers go outside to recharge with cigarettes. As an introvert, you should go outside to recharge and collect your thoughts.

Facebook Live

Here’s the Facebook Live stream. I may end up watching this again to refresh my memory. You get the handout / agenda here.

BTW, I was the one who said food is a good topic for small talk. 🙂

They recommend using headphones, if you have difficulty hearing.

Win Sheffield presents Career Management for Introverts. #SIBLEvents #WinSheffield #Introverts #JobHunt #JobHunting #CareerAdvice #CareerCounseling #Free #FreeLecture #LibraryProgram #NYPL

Posted by Career Services NYPL on Wednesday, September 11, 2019

I also published this on Medium: https://medium.com/@alliwalk/notes-from-career-management-for-introverts-from-the-new-york-public-library-c6c4f59f5b3

Portfolio and Website Updates: Incorporating Feedback

An update to a previous post on the feedback I received from friends and acquaintances on my portfolio, and ongoing work.

I’ve been making updates to my portfolio and website, and I have even more updates to report. In this post, I want to go a little deeper on some of the feedback I received from friends and acquaintances, and how that has influenced some of my updates.

I’ll continue to make updates, of course. These are just changes I’ve made so far.

My Initial Reaction

I asked most people to review my portfolio, which is on CargoCollective. When I got the feedback, my emotions ranged between feeling overwhelmed and disappointed.

I was overwhelmed with what I had received, which was not all negative, because I felt that I’d wasted so many first impressions.

For months, I’ve been sending out links to my portfolio and not getting anywhere with it. Despite my hard work with updating my resume, including the time I spent gathering tips, I felt I had ultimately been short-changing myself by sending out a lackluster portfolio. It felt like a huge waste of time. I even felt like a fraud, giving out tips at the NYC UX Camp 2019.

It was disappointing that other people weren’t seeing my vision or hadn’t understood the history how this site came to be. But, you know, people only reviewed what I asked them to review. They weren’t providing holistic direction on how to reframe my image as a designer. And they weren’t evaluating anything a hiring manager wouldn’t evaluate, either. In other words, it wasn’t personal.

In any case, after a few days (or hours), I started thinking about how I could make changes. My personal website, alliwalk.com, actually went through a whirlwind of changes, large and small. And then I started focusing on my portfolio.

So let’s go through some of the top feedback and how I addressed it.

The Feedback: 1-2-3

The 3 biggest areas of feedback centered on:

  • Domain: Using a real domain name, instead of a third party site.
  • List of projects: Feeling overwhelmed by the number of projects; not sure where to start; emphasizing the projects.
  • About: Adding a tagline or a paragraph to the home page to give a sense of who I am.

Now I’ll go through these top 3 pieces of feedback and give my thoughts, and what I did (or didn’t) do to address them.

1.Personal Domain

Jared Spool gave a talk at BostonCHI in Jan 2019, about the difficulty of hiring designers. In the talk, he called out employers who discriminate against candidates who use third-party sites like Wix or other CMS tools.

Specifically, in his example, he recounts an encounter with a design leader who felt that “good designers” should be able to code and would have coded their own websites. The video is linked to this point in the presentation.

If you’re reading this on my blog, it’s clear that I do have my own domain. I also have own website and I did code it myself.

The reasons I coded my own site were not to prove myself as a “good” designer. They were due to: a) cost, and; b) exploration/personal expression. Let’s review:

A. Cost: It’s cheaper to code your own website on your own domain than to pay a 3rd-party site to do it. A site that costs $12/mo is $112/year, which is over $500 after 5 years, assuming you keep it running all that time. Many sites cost more than $12/month. About five years ago, when I first created my site in Bootstrap, I needed to find areas to cut back on my expenses. This was an easy choice to make and I’ve stuck with it.

B. Exploration: As mentioned above, about five years ago, I started seriously learning more about front-end development. I used building my portfolio and a few side projects as opportunities to learn. I like designing my own website. So why am I also using Cargo? Because updating a domain can be a small project but updating a CMS takes a few minutes.

I could use my own domain to host an external website, but it feels like giving up control of my own website. And, I’m not sure that the external template available is what I want to use on my own site. Plus I get control over my own analytics.

Ultimately, I won’t be moving the Cargo portfolio to my domain. But, I did update my website to more prominently point to the portfolio.

2. List of Projects

I admit: I do have a lot of projects. I’ve heard that using 3-5 projects is a must. I don’t know if that’s a max of 5, but I’d definitely heard a minimum of 3.

Even the NN/g article that prompted this redo suggests 3-5 projects:

Step 2: Choose 3–5 Projects as Detailed Case Studies

But I want to share an image from the NN/g article on UX portfolios. It depicts a gallery of projects.

Web PortfolioHow many projects do you see? I see 8. Clearly the maximum number of projects is not hard-limited to 3-5.

At the moment, I may have too many at 11. However, the first 3 projects are the same as from my website. And on my website, I used analytics to narrow the list from 6-7, to 3 based on visitor traffic.

Most people view a website in an F shape. Using that logic, my most popular projects are placed first. This doesn’t mean I shouldn’t continue trying to narrow the list. But there’s clearly some discrepancy what’s too many, and my choice of projects and the order they’re presented have some thought behind them.

Providing Signposts with the Writing

To help address the feedback that people might be feeling lost, within each project page, I have been working on improving the writing. As mentioned in my last post, I’m updating the writing make it easier for people to scan.

I’ve made changes such as:

  • Incorporated images at the top of projects, when appropriate. (Suggested by feedback.)
  • Organized the writing a bit better. The format is now: a) description; b) images.
  • Included additional promo information, like videos, for people to find more information if wanted.
  • Used more headings, lists, and bold text.

My hope is that even if people feel like they don’t know where to start, once they do, they will feel more directed.

3. About

I used to have an About Me page on my website, alliwalk.com. I removed it because analytics showed that very few people ever visited the page.

But, two respondents mentioned making About info more prominent, like right on the homepage. They asked about adding a heading sub-title or adding a paragraph above the project.

Unfortunately, those are not options I can pursue due to limitations of the CMS template. There are other changes I can make:

A. Using a Landing Page: The template does allow me to select any page as the landing page, even if that page is not public. (Public pages do not show in the nav in the template I’m using.) So I am working on creating a landing/about page, but it’s not something I can easily test without it immediately going live. So, I’m being very cautious.

B. Improving “About”: While working on the writing and updating images, I have updated how I described myself on both my website and my portfolio. I used a combination of my resume and cover letter. I also provided answers to a few questions I tend to get in interviews, like:

  • Are you more of an information architect or visual designer?
  • Do you typically work full-time or freelance?

I just wove that information into the writing itself, and then I put the same information on both my website and my portfolio.

Still more to go. I haven’t made much progress on my website regarding the responsive images, semantic HTML, or migrating to Bootstrap 4.

And, coincidentally, I recently participated in a virtual session with Google, on their design review process. I learned a few things…which is for another post.

Portfolio and Website Updates

After reading a Nielsen Norman Group article on UX Portfolios, I recently began a process of updating my own portfolio and website. Here is a recap and plans for the future.

I have begun a process of updates for my website at alliwalk.com and an additional portfolio at cargocollective.com/alliwalk.

Here are changes in mind for the portfolio and the website.

Portfolio Updates

Changes for my portfolio began after I read a Nielsen Norman Group article on UX Portfolios. The article is called 5-Steps to Creating a UX-Design Portfolio. The 5 steps are:

  1. Take Inventory of All Your Projects
  2. Choose 3–5 Projects as Detailed Case Studies
  3. Choose Your Desired Format
  4. Create Your Portfolio
  5. Get Feedback and Iterate

Implementing the Tips & Other Updates

Take Inventory

Given my work on improving my resume, I’ve already taken some inventory of what I feel I’m good at and what differentiates me from other designers.

3-5 Projects

But I do have a lot of projects. Far more than 3-5 as recommended. So that’s been difficult to evaluate objectively.

Writing

I also took a second look at the writing and how I described my projects. And I’ve decided to focus on improving the content so it’s ideal for the web.

  • Hemingway App helped to simply sentences and eliminate long words
  • Lists help get points across in an easier to scan format.

A short course I’ve been referencing is available on Lynda.

Styles

Styles aren’t part of the list, but I made a few changes:

  • I used Coolors to use find colors that complement each other
  • Use HSL instead of HEX values

Feedback

I’ve asked a friend, a new contact, and an acquaintance for feedback on my portfolio. Not everyone has responded with their take, but I’ve already begun making edits.

Upcoming

I plan to continue making more changes and improvements, to the order of each project and the writing.

Also, Website Updates

Some big changes here….

I recently made some pretty drastic updates to my website.

Style, Images, Content

  • Using Coolors to get a complementary color palette
  • Adding SVGs from UnDraw.co
  • Updating the content: Removed CSS projects; Added an “About” section

That’s it for now, but there are more changes I still want to make.

More Changes I Want to Make

Remove IDs

3-4 years ago when I first made this site, I didn’t know the difference between IDs and Classes. Now I do and I want to update the HTML to use the correct tags.

Add Responsive Images

The technique now is to use responsive images, using srcset and sizes. A how-to is available on MDN.

Update to Bootstrap 4

Although I think I’m OK with Bootstrap 3, it would be a good idea to update to the newest version. Bootstrap 4 uses Flex by default and possibly Grid.

Optimize the SVGS for Animation

In order to add animations to SVGs, the different paths and shapes need to be given names. Moving the styles out of the code means colors and other styles can be animated.

Animate the SVGs

After optimizing the SVGs, I can add some animations.

Create a CSS Experiments page

The site used to have a section for CSS animations. But I took that out to focus the page on just one message. I plan to put everything I removed onto a new page/section.

Domain Email

I’ve got a domain but I’m not using the email for it. This isn’t really a website thing, just a professional thing.

Happy to report, this is done!

I plan to write another post about some of the feedback and ongoing changes.