Tiny Homes: An Introduction to a Big Movement

If you haven’t noticed, tiny homes have become really popular.

My theory is that the consumerist lifestyle advertised in capitalist societies have led to physical, psychological, and financial burdens, such as high-debt, overpacked garages, unaffordable McMansions. In addition, the financial crisis of 10 years ago and the resulting Great Recession left many people with a visceral fear of becoming burdened again. Given the dual rise in popularity of decluttering and minimalism — ex: Marie Kondo; “Goodbye, Things” — these events have clearly had an impact and many people are looking to avoid or escape this lifestyle. One outcome of this search for freedom is the rise of the tiny home movement.

One YouTube a series I’ve been watching features an extraordinarily good-natured New Zealand-based host, Bryce, and his talented videographer (girlfriend/partner who always remains offscreen). Together, they travel around the world to visit different individuals, couples, and families who are living in tiny homes. The pair don’t just visit people from New Zealand, although there are many people with tiny homes in New Zealand. The show also visits people from all over the world: Canada, Australia, Japan, the United States. It has some great theme music.

As a resident of NYC, I have been interested in small space living for a while.  There are a lot of different tips and tricks for small space living:

For small space living, I found another YouTube series a few years ago. Here’s a video where the tenant transformed her very small studio into a little gem.

 

In this next one, the tenant (or owner) has used a center storage unit to create zones in his studio. It’s pretty clever.

[Note: I do not vouch for their website!]

There are a number of different styles of tiny homes. Watching the show as an apartment dweller, I have fantasized about living in one. Could it be so different? Fewer neighbors? A garden? What would my tiny home be like?

I decided to share features from some of my favorite homes to look for patterns that would make a tiny home more pleasurable to live in.

Having looked at the YouTube channel on my computer and not just on my Roku, I can see there are other videos that aren’t just home tours. There are a series of videos about building a tiny home and building a tent (like a yurt). To be honest, I haven’t looked at those. Maybe I will; maybe not.

In an upcoming post, I’ll go through some of my favorite Living Big in a Tiny House videos!

Solving Design Problems like a Mathematician

While reading a forum discussion on FreeCodeCamp, I came across a reference to George Pólya’s book, “How to Solve a Problem”. In this post, I review Pólya’s problem solving strategy.

In a recent FreeCodeCamp forum, someone asked a question about journaling:

Hi coders,
While looking for the source for my project, I saw that some programmers or developers wrote a kind of diary to keep track of the code. I think it’s nice, but I was wondering exactly how you can structure a diary and if any of you use this to write code. Question here.

Good question. I’ve seen other people use diaries or online journals, or those things people use…writing logs or whatever. 🙂

Anyway, the only reply includes a link about using a “logbook”. On the link page, the author references George Pólya and his book How to Solve It. I had never heard of this person or his book, so I did a little research.

George Pólya, (1887 – 1985)

George Pólya was a Hungarian-born mathematician who was known for his mathematics work, as well as his work in heuristics. Heuristics is “any approach to problem solving or self-discovery that employs a practical method”.

“Examples that employ heuristics include using a rule of thumb, an educated guess, an intuitive judgment, a guesstimate, profiling, or common sense.”

He wrote a book about solving problems using common sense principles.

1st edition cover of “How to Solve It”, published in 1945, by George Pólya, a Hungarian mathematician.

The George Pólya Method of Solving Problems

The Wikipedia page shows that Pólya lays out some pretty good heuristics for solving problems. Although he intended for these strategies to be used for solving math problems, I think they could be used to provide a structured method for solving almost any difficult problem.

The Pólya problem solving method involves 4 principles:

  1. First, you have to understand the problem.
  2. After understanding, make a plan.
  3. Carry out the plan.
  4. Look back on your work. How could it be better?

So how does it work?

Principle 1: Understand the Problem

Pólya based the first principle, Understand the Problem, on the idea that math students struggled to solve problems due to a lack of understanding the problem in full or in part. His technique involved coaching teachers to prompt students with the following questions:

  • What are you asked to find or show?
  • Can you restate the problem in your own words?
  • Can you think of a picture or a diagram that might help you understand the problem?
  • Is there enough information to enable you to find a solution?
  • Do you understand all the words used in stating the problem?
  • Do you need to ask a question to get the answer?

Essentially one should not move past principle one until a constructive answer can be given. It’s not clear from the Wikipedia entry if a constructive answer is required for each question or the entire problem.

 Principle 2: Make a Plan

Basically he felt that a person gets better at selecting a good plan/strategy the more times they solve problems. Here’s a big list of strategies:

  • Guess and check
  • Make an orderly list
  • Eliminate possibilities
  • Use symmetry
  • Consider special cases
  • Use direct reasoning
  • Solve an equation
  • Look for a pattern
  • Draw a picture
  • Solve a simpler problem
  • Use a model
  • Work backward
  • Use a formula
  • Be creative – (“[Have] patience to wait until the bright idea appears”)
  • Applying these rules to devise a plan takes your own skill and judgement – (“Always use your own brain first”)

Principle 3: Carry out the plan

Simple enough, but the main problem people have with this step is giving up too soon. For that, the Wikipedia entry says:

“In general, all you need is care and patience, given that you have the necessary skills. Persist with the plan that you have chosen. If it continues not to work, discard it and choose another.”

Principle 4: Review, Reflect and Extrapolate

Take a look at what you’ve done, and evaluate how well it worked (or didn’t), and see how you can use what you’ve discovered for future problems.


Finding the book:

If you want to find this book, I recommend trying your library. I found it by searching for "how to solve it book pdf" (Google suggested the "pdf") and I found a copy.

Update:

An earlier version of this post included an account of how I applied Polya’s technique to my portfolio changes. A follow-up post will focus on that account.

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]

7 Web Design Articles

At some point, I came up with the idea that reading 10 articles on one topic was a good idea. Well, I only made it to 7. But these 7 articles, on LESS and 404 pages, were very helpful for me so I’m still glad I read them.


Learn LESS in 10 Minutes

Related:

  • http://tutorialzine.com/2017/04/15-interesting-javascript-and-css-libraries-for-april-2017/
  • http://lesscss.org/features/#features-overview-feature
  • http://less2css.org/

I really enjoyed learning LESS, although I think it would be easier to use with a task runner.


15 Interesting JavaScript and CSS Libraries for April 2017

http://tutorialzine.com/2017/04/15-interesting-javascript-and-css-libraries-for-april-2017/ 

 


34 brilliantly designed 404 error pages

http://www.creativebloq.com/web-design/best-404-pages-812505

Getting inspiration and a sense of best practices while creating my own 404 page. I have to say, Bloomberg’s is hilarious. (Creative Bloq, October 10, 2016)

 


How Do I Create a Custom 404 Error Page?

http://www.htmlgoodies.com/beyond/reference/article.php/3472591/How-Do-I-Create-a-Custom-404-Error-Page.htm

Yes, I did create a 404 page, which is located at alliwalk.com/404/. But given that my current website is only one page, it’s hard to get lost.


Should I use a video as a background?

https://css-tricks.com/should-i-use-a-video-as-a-background/

(CSS Tricks, Dec 2015)


Create Fullscreen HTML5 Page Background Video

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video


CSS Filters

https://css-tricks.com/almanac/properties/f/filter/

This is one of the coolest things I’ve seen in a while, but it’s still experimental so don’t use it for anything important.