Why Some Still Can't Find Jobs As The Economy Nears 'Full Employment'

To economists, the phrase means job seekers roughly equal job openings. Unemployment is at 5 percent, but depending on where you live, your race or your education level, you still might not find work.

The Federal Response To Oregon Occupation May Have Roots In Ruby Ridge

During the armed occupation in Oregon, many have asked why officers don't just storm the wildlife refuge. The answer may rest in Ruby Ridge, Idaho, where in 1992 a similar standoff ended in violence.

Petra Krausová's Cassia lamps for Lasvit form twinkling installation at Maison&Objet

Maison&Objet 2016: Czech designer Petra Krausová has used traditional glass-blowing production and finishing techniques to create a constellation of pendants for lighting brand Lasvit (+ movie). (more…)

Deezer Raises $109 Million After Postponing I.P.O.

The company's latest fundraising comes amid growing cutthroat competition from rivals like Spotify and Apple Music, which also are eagerly signing up new subscribers around the globe.

Influencing Web Layouts with Print Layouts

Jen Simmons has a compelling talk (video) where she calls out web design as being far too dominated by the HEADER CONTENT SIDEBAR FOOTER pattern we're all too familiar with. Print design, despite so often being dubbed "dead" or in massive decline by those of us in web design, still excels in quality and variety of layout.

Certainly we can learn from print design on the web, yeah?

Do we have the tools on the web to do it?

I'd say: yes. In the sense that we don't need incredibly fancy CSS abilities to do more interesting layouts than we are doing now. Old school tools like floats and absolute positioning are capable of doing pretty cool stuff. Especially combined with slightly more modern web technologies we readily reach for today, like web fonts, media queries, and flexbox.

What are some modern tools that take us further?

CSS shapes are pretty cool! Razvan Caliman has an article about them. You can force text inside and element to wrap along a specific path. Those paths can be things like curved ellipses, polygons, or even an image mask.

.element {
  shape-outside: polygon(0 0, 0 300px, 300px 600px);
}

Sara Soueidan has written about it for A List Apart. Chen Hui Jing has a great article about it too. Check out the demo right in that blog post:

Notice how it falls back well?

A great thing about CSS Shapes is that is has a natural fallback. No biggie. Have a square. http://t.co/u9D6y6Apfc pic.twitter.com/mfg8BFTMgP

— Jen Simmons (@jensimmons) February 11, 2015

Viewport units are pretty useful for print-style layouts as well. They make it trivially easy to, for example, size a container the exact size of the screen:

header.full-screen-hero {
  height: 100vh;
  background: url(/images/supergirl.jpg);
  background-size: cover;
}

Not to mention layout's-best-friend - flexbox. If you invest some time into learning flexbox, I think it gives you super layout powers in that your brain readily reaches for it to solve pretty much any sort of layout.

What is a shame we don't have?

The most significant is probably "CSS regions", which were close to being a real thing. Adobe put a bunch of work into it. There were use cases (magazine layout being a pretty solid one). There were polyfills. They allowed you to flow content from element to element. Those elements could be positioned and styled however you wanted. Super cool.

Then they kinda got the smack down (unfair, imho) and Blink pulled support. Sara Soueidan did an excellent job vouching for their importance in CSS Regions Matter, but alas, they seem off to history's junk pile.

I would argue :nth-everything would be pretty darn useful too.

Are there things coming in the future to help?

Perhaps:

@chriscoyier I think what will get us closest to print on web is CSS Figures + Regions combined w/ Overflow module https://t.co/UvcR97kiLi

— Sara Soueidan (@SaraSoueidan) January 13, 2016

The figures spec seems targetted directly at print layout!

This specification describes how figures commonly seen in print – e.g. tables, photographs with captions, and pullquotes – can be formatted with CSS.

The overflow spec seems to be working out a way to do what CSS regisons was trying to do (flow content):

The continue property gives authors the ability to request that content that does not fit inside an element be fragmented, and provides alternatives for where the remaining content should continue.

... although it doesn't sound like you can specify an entirely different element for the content to flow to.

Wanna practice? Buy or borrow a magazine and give it a shot.

I did that the other weekend. I bought a Gourmet magazine and replicated one of the layouts I found in it.

It doesn't mean you need to give up on what makes the web the web.

Universal access, responsiveness, all that good stuff. My demo used some flexbox to make the layout easier and ultimately more rigid. I used a little background-size: cover; to make the burgers fit the space as best they could. A few media queries to top it off and this print layout translated pretty well to the web.

More Examples

Here's another one I did:

See the Pen Magazine Layout Attempt #2 by Chris Coyier (@chriscoyier) on CodePen.

This one was from a Scientific American:

It even had an SVG type lockup in it.

---

Stuart Robson created a layout based on an article he saw in Lagom magazine:

---

Helen V. Holmes is into the idea:

@chriscoyier I’m into that sorta thing (https://t.co/oPPnKAvvXR). Planning to do more. Really inspired by https://t.co/l07e3NHX9R.

— Helen (@helenvholmes) January 13, 2016

And she's right about The Great Discontent:

This is kinda like "Art Directed Articles" right?

In some sense. I thought of those as one-offs that were sort of intentionally different from one anothers. It seems like a bit of a trend, but in looking back over the last 5-6 years, it's maybe not so much a trend but just web designers stretching their arms once in a while.

Taking inspiration from print layout could be in the form of one-off articles, or entire sites.

Another thing attempted back-in-the-day: Treesaver. It was an attempt at automating these kind of layouts that was probably a bit before it's time.

There is some pushback on this whole idea.

Some folks straight don't like it.

@chriscoyier It's an excercise in futility that translates into non-productive burned hours and wasted $.

— John V. Petersen (@johnvpetersen) January 13, 2016

Ah well. You can't convince them all.

Further Reading

• DESIGN MACHINES How to survive the digital apocalypse by Travis Gertz
• The Web’s Grain by Frank Chimero

---

Influencing Web Layouts with Print Layouts is a post from CSS-Tricks

Architects "are never taught the right thing", says 2016 Pritzker laureate Alejandro Aravena

Exclusive interview: universities are failing to give architects the training that will enable them to find solutions for an imminent global housing crisis, says 2016 Pritzker Prize laureate Alejandro Aravena. (more…)

Daily Report: One Grand Experiment Ends for a Facebook Co-Founder

The decision by Chris Hughes, a Facebook co-founder, to put The New Republic up for sale is a reminder of the unusual places Facebook money has ended up, with unusual outcomes.

Designing Adobe Portfolio

In November 2015 I did a little talk at the School of Visual Arts (SVA) in New York City about designing Adobe Portfolio, and product design. You can watch the talk here. I originally wrote this article in preparation for the talk, but have since expanded upon it to publish here. It aims to introduce the product, share insight into the design process, scans from my sketchbook and some specs/designs from behind the scenes. I hope you find it interesting.

A little intro.

Hello, I’m Andrew. I am the lead product designer and creative director of Adobe Portfolio. I’m going to share with you what myself and a great team of developers at Behance (Adobe) have been working on this past year.

The Adobe Portfolio marketing site

What is Adobe Portfolio?

Basically it’s a product that allows you to quickly and simply create a website to showcase your work, and customise it to suit your style and needs. It’s not a new concept, there are dozens of products out there that do just that. But Portfolio has some key differences:

• It’s designed specifically for creatives to showcase their portfolio. Meaning it does what you need it to do, simply and quickly.
• It’s FREE with all Adobe Creative Cloud plans.
• You can access all of Typekit’s library of fonts, to use on your website.

Portfolio syncs with Behance.

The thing that makes Portfolio most unique is that it syncs with Behance. The idea being that you create a beautiful custom website with Portfolio, and sync your projects to your Behance profile. There you can gain invaluable exposure for your work on a creative platform used by millions of creatives, and people recruiting creatives! But you don’t have to use Behance if you don’t want to — you can use Portfolio on its own and choose not to sync with Behance. The choice is yours.

The photography of Matthias Heiderich — as seen on Portfolio and Behance

Responsive layouts.

Like any website builder, you need a starting point. So one of the many things we needed to design were layouts geared specifically for showcasing creative work, to act as a foundation that you can easily customise and populate with projects.

The layouts aim to cover a variety of styles to suit different creative fields. They can either be used as an off-the-shelf solution to quickly populate with your projects and publish a website (in minutes), or use the editor’s features to change the structure and appearance to suit your style.

Easily customise the same layout to look very different. Featuring photography by Bryce Johnson

Below are the layouts we’re launching with. The initial layouts (for the public beta and product launch) are very simple, focussing on project covers, galleries and projects. The product will of course grow to offer more features like fullscreen cover images, HTML & CSS editing, blog integration etc… in time. And as the features expand, so too will the variety and number of layouts to choose from as a starting point.

Layouts and the creatives they are named after: Lina, Sawdust, Matthias, Juco, Mercedes and Thomas

We chose to name the layouts after creatives on Behance. We shortlisted creatives whose work lent itself well to a particular layout, and of course was also visually stunning.

I should say, that these layouts were one of the last things to be designed (pre-beta), but I’m leading with them for the sake of this article, to introduce you to what the product does, or at least, its ‘end product’.

The editor.

The product (itself) must enable the user to quickly and simply edit their website, using one of the layouts above as a starting point. The UI is very minimal — it gets out of the way and allows you to focus on the design of your website. All changes you make happen live in the editor.

It sounds kinda corny, but I had three things in mind while designing everything from the brand, marketing site, and especially the editor:

Simple, clean and beautiful.

It should empower the user to:

• Easily edit anything they can see.
• Manage and add content.
• Responsively preview their website.
• Publish and update a live website.

Below are a range of editing scenarios from the product (editor):

Various screens from the editor. Featuring photography by Chris Burkard and design by Andrew Couldwell

The role of a product designer.

My own role as a designer on Portfolio changed pretty dramatically over the year, from concept to launch. As a digital product progresses, so too does your role as a product designer. So to go back to the start:

ProSite.

Portfolio is actually the evolution of an existing Behance product (being retired) called ProSite. It’s 5 years old, so there was a lot that we could learn from that product: What worked well? What didn’t?

Behance Network.

Also, what we’ve learned about the creative community and showcasing work, through designing, curating (and using!) the Behance Network is invaluable in understanding how to build a product like Portfolio.

Understanding your audience is a great starting point.

So I spent a good deal of time absorbing all this knowledge Behance had acquired over the years, and also studying their initial designs for the evolution of ProSite. Asking questions. Making notes. Sketching ideas.

The Behance Network, and ProSite

I always start with a pencil and a sketchbook.

Writing and sketching really helps me to focus, and ideas flow from there. Sometimes I simply write words I associate with the product, or list what it needs to do, just to get it out of my head. It helps to un-clutter the mind and focus on what’s important.

This sketchbook work naturally evolves into UI sketches. Sometimes I’ll sketch a feature, or a small UI detail, or a new approach to the UI entirely. It’s a quick way of purely and simply just designing and exploring ideas. Perhaps most importantly, you don’t get distracted by pixel perfection, fonts, colour, grids, guides etc… like you do while using computer software.

There’s always a point when you know you have enough to take it that step further, and actually start fleshing out these ideas. In the past I’ve used Adobe Illustrator or Omnigraffle for this, to wireframe. But time was tight on this project, so I went straight into Photoshop.

Below are some scans from my sketchbook. Some relate to the product (editor), some to the marketing site and brand:

A few scans from my sketchbook

An interesting image to point out above is the last one (bottom-right). You can see that my sketch is close to what I ultimately designed.

Concepting & prototyping.

All of these ideas and designs are informed and evolved by concepting, prototyping and discussing with the team. It’s good to chat through ideas with other designers and developers, and even the target audience when possible. For example: One particular idea came from me discussing an early (product) design with an MFA illustration student at SVA. A fresh perspective always helps, especially for a product of this complexity.

We were working to pretty intense timeframes on this project. There simply wasn’t time to build any complex prototypes. But what I did do was to create a series of PDF walkthroughs using Layer Comps in Photoshop, showing the mouse cursor move around the screen, demonstrating every interaction, feature and user flow within the product. These allowed developers (and other stakeholders) to critique and/or understand all functionality and the user flow — so they knew what was to be built, and also identify any potential flaws in the UI/UX, prior to the build and testing.

Below is (a video of) one example of these PDF walkthroughs:

Prototype/walkthrough showing global customisation in the project editor

Detail in design.

Simply put: Take the guesswork out of it for the developers. Your team needs to understand what needs to be built. It is not their job to fill in the blanks, make it responsive, or guess what happens in any given scenario. I can’t overstate this enough — I’ve experienced so many designers designing and considering 20% of a product, and not thinking things through.

In addition to the walkthroughs, user flows and prototypes I talked of earlier, I also like to create detailed specs for all the UI components, features and brand. I feel these are important when you have a large team, so everyone is on the same page, with one central point(s) of reference. The specs aim to cover all scenarios, from rollover states, to errors, active/inactive states etc…, and also cover px values and dimensions (I even go as far as including basic CSS).

Promote/encourage pixel perfection in the build. Lead by example, and set the bar high.

The more detail you include in your designs, the less questions the developers will have, and the less time you will spend managing the build. So you can focus on designing, testing and improving the product.

Also, the nice thing about taking the time to create these ‘UI kits’, is that it’s easier to update the product (design) in the future. There’s no need to update hundreds of mockups, you just update the specs.

Below are a few examples of these styleguides and specs:

Marketing and brand.

Months in now, with the product (editor) designed and being built, I re-focussed my attention to marketing, onboarding and brand. What is this product? How do you get started using it? It needed a voice. An identity.

The name.

When I first joined Behance, this project was somewhat jokingly being called “Prosite 2.0” internally. The ProSite product served its time, but its successor had grown into a different beast. Besides their connection with Behance, they were very different products and had no 1:1 correlation. This was not a re-design/launch. We were building an exciting new product from the ground up, and retiring ProSite. That was important to convey — and that starts with the name.

I went back to my sketchbook, and went through a word association exercise of writing down everything this product did, and also what language every similar product on the market was using. The natural progression of all these kept coming back to “Portfolio”. So after some thought, I concluded: ‘Why not?!’ — it does exactly what it says on the tin. It’s a website creator/editor designed specifically for creating a portfolio. The simplicity and boldness of the name married up well to the design and values of the product. And so we called it ‘Portfolio’, which soon became ‘Adobe Portfolio’ to fit with Adobe’s suite of products.

The marketing site home page featuring a photo by Tanya Timal

The brand.

Portfolio very much has its own identity and personality. Portfolio is not a corporate product (so to speak). It’s white label. It’s yours, to make your own. It’s friendly, simple and approachable. The brand, marketing site, onboarding, copywriting and messaging throughout the (product) user experience all attempt to convey this through the language used, typography, grid, imagery and colours.

Other scenarios include lighthearted messaging and humorous imagery. Project photo by dua — Alexander Esslinger

Responsive design.

Going back to my earlier point about detail in design: Web design, just like product design, should have the same attention to detail. In this case, it’s of course important that the marketing site is responsive, but it’s not the developers’ job to figure out how a website responds at different screen sizes.

You’ll be the developer’s best friend if you take the guesswork out of it for them. Believe me :)

Below are a few examples of the responsive designs, delivered to the developers to build myportfolio.com:

Responsive designs for the marketing site, showing an early version of the brand identity

View a full case study of the marketing site here

Responsive designs for a couple of the layouts, covering different scenarios

View a full case study of the layouts here

User testing.

A digital product should evolve to suit the people using it, accounting for user behaviour, to give the best user experience. Ideally, products will go through an alpha/beta phase (limited releases) before they launch to everyone. We did this with Portfolio. This helped us to weed out issues, learn if the UI/UX ‘worked’ and gain real user feedback with the intention of improving the product. It’s best to test, learn and refine with a limited user group, than to launch to thousands/millions of people and discover problems when it’s too late.

Test. Learn. Revise. Repeat.

This is important in product design. You learn so much from people using the product.

The best way to know if it works is to use it.

You’ll be amazed what you discover:

…People don’t always use a product how you anticipated they would!

• You learn,
• You improve,
• You iterate on the product,
• You keep testing,
• And repeat this process.

And honestly, sometimes it does feel a little like this:

…But the product will be better for it.

In conclusion.

If I was to take anything away from this it would be:

Slow down.

Get inspired. Understand your audience. Make notes. Sketch ideas.

Concept.

Work with your team. Explore ideas. Think it through.

Detail in design.

Someone (else) needs to build what you design.

Test and improve.

Does it work? How can it be improved? It can always be improved.

Learn.

Always. Every experience in design is a good learning experience.

[– This article was originally posted at Medium.com, republished with the author’s permission –]

Amazing Flame & Light Effects with Flame Painter 3 – only $9!

Source

Usability isn’t just for users

A lot of web developers are making me angry. Why? Because they’re literally trying to make it harder for me to build websites. Well, they’re making it harder to use their latest and greatest inventions, in any case.

Take a look at some of these new content management systems for example. Especially take a look at the ones based on Ruby, or Node.js. What’s at least one thing they all have in common? You install almost all of them via the command line. Content management systems are supposed to make building websites easier. I should not have to install them via the command line.

Let’s put this into perspective: the only reason I’ll ever touch a terminal emulator at all is because I got into Linux at the age of 15. Since then, I’ve spent years distro-hopping, learning the ins and outs of various architectures, and loving the idea of the rolling release.

This is what I did instead of socializing. This is what I did instead of basically everything a kid could do at that age. CMS programmers, take note:

If I’d had a normal childhood, I wouldn’t be able to use your software.

Not only that, when it comes down to it, your software will never catch on. Not in a big way.

Why not?

I've lost count of how many times I’ve had programmers tell me about how WordPress is an slow, bloated piece of software. They tell me it doesn’t scale well, that the plethora of plugins is actually a bad thing. It’s too big. It’s too popular. It’s too old.

And indeed, that may all be true, to some extent. Likewise the complaints about jQuery. Talk to a lot of the experts now, and they’ll talk about it like it was the worst thing that ever happened to them. There are other frameworks, now. New, better frameworks that are so much… less like jQuery, I guess?

Then you get the arguments about application platforms compared to plain old regular hosting, and that’s another thing altogether.

But there’s one very little thing about these “older” tools that many people seem to ignore, nowadays. It might seem like an insignificant matter, compared to the beautiful new code that developers are writing now, but it’s important to me: this software gets s*** done!

Once upon a time, people were putting together early content management systems, and giving them away to the world. Some, like Blogger and others before it, restricted you to their servers, their platform. Others gave the code away and expected you to figure out how to install it with little documentation.

Then WordPress came along. They began to market themselves and their “five-minute” installation process. They may not have been the first to do something like this, but man, they did it right.

All of a sudden, your average semi-knowledgeable computer user could install a blogging platform on the host of their choice! Later on, they created wordpress.com, so people with even less experience could experience that PHP and MySQL-based joy.

You see, not everyone who makes a website is a programmer. Lots of us are building our own sites because we don’t have the budget to hire someone. Others are designer-types: good at the front-end, not so great with actual programming.

While efforts to “teach everyone to code” are noble and all that, they’re not realistic. Most of us aren’t going to put in the time and effort required to learn the basic principles of programming because we have other stuff to do. We have other work. We have hobbies.

And hey, remember how I spent my teenage years playing with Linux all the time? Well I have friends now. I don’t want a CMS that requires me to code in half the functionality myself. That’s not what they’re for. They’re supposed to make building websites take less time.

Give me a system that lets me use my knowledge of HTML and CSS to make sites faster. Give me one that does that while leveraging new technologies and embracing new best practices, and I’ll love you. Give me one that works well on disgustingly expert-level, but beautifully engineered, platforms like Heroku with a minimum amount of fuss, and I might marry you. (I said might.)

The point is that your beautiful software isn’t going to go as far as it could if us mid-level users can’t use it. There are people who won’t even touch stuff like SquareSpace, and they want a custom solution for their site. Or they actually need one… and they often come to us.

They might not go to you because you’ll charge them upwards of ten-thousand dollars. Maybe they don't know enough about computers to know that a “web developer” is a thing. Maybe they just want a really simple site, and the ability to update information once in a while.

You might think newer generations are more technically savvy, but they’re not. They’re better at tapping on interfaces. Ask them how those interfaces are designed and built, and most will give an unconcerned shrug. They’re too busy using them to care.

I believe that the consumer market of website-building will, for a long time yet, be at least half-driven by those of us who know just enough technical stuff to get into trouble. Us, the power users. Us, the professional muddlers.

So write that awesome code that’s been bouncing around your brain. Write the software that takes us into the next decade, or century. But as you build your next big thing, as you engineer your next great platform, and as you architect the future of web technology, please don’t forget about us.

Featured image, software image via Shutterstock.

Illustricons: 500+ Scalable Vector Icons/Illustrations – only $12!

Source