Slack, the communication tool goliath rebranded today. Personally, I think it falls short. The homepage re-design, more-so. I know, I know — I’m pretty contrarian on these topics, but hear me out. Gone are the illustrations, branding and web design by Ueno. Front-and-center are images mainly of people — which feels very Apple-esque. Could be worse I suppose.
The new logo.
Ta-da! From today, Slack has a new logo, the start of a general refresh of our look. A little simpler, a little clearer, and (we think) a little better. Read more about this change in the handy blog post we’ve written about it: https://t.co/LT1ju7kGxwpic.twitter.com/aceZMCb5St
It’s apropos though, given the news that Slack may just list directly instead of the traditional IPO route. Which is equally astounding and shocking. I suppose given the impressive amount of cash on hand, and imminent fundraising success Slack may ride in on the next couple of years — they decided it was a good opportunity to rebrand.
The Slack rebrand is a harsh abandonment of Slack’s IRC past, deep cultural chat roots of the 90’s and internet progeny. This smells of hubris, and if there’s some big software revision coming soon, I would be nervous.
Our first logo was created before the company launched. It was distinctive, and playful, and the octothorpe (or pound sign, or hash, or whatever name by which you know it) resembled the same character that you see in front of channels in our product.
It was also extremely easy to get wrong. It was 11 different colors—and if placed on any color other than white, or at the wrong angle (instead of the precisely prescribed 18º rotation), or with the colors tweaked wrong, it looked terrible.
Ok…
Many beautiful things—but without a sense of cohesion that you might expect. So here we are. Our in-house design and brand team, together with Michael Bierut and the team from Pentagram, worked to create a new and more cohesive visual identity. And we’re starting, today, with the logo.
I’m not discounting the design problem Slack’s branding had — I’m just discounting your reasoning. An angle adjustment and tightening of the brand colors? It took this long to do this? Was this mostly internal direction? Was only Michael Beirut of Pentagram involved? Were there other iterations? You couldn’t wait to publish a long-form blog entry on the steps you took as a company, as a culture, to decide upon this?
Isn’t that a bit… I don’t know — hasty? This rebrand is a hot-mess.
A document that advertises a product, service, venture, institution, or event for the purpose of attracting potential clients, investors, participants, etc.
A new and bold contemporary serif typeface, with optical sizes, designed by Dave Bailey, exclusively from The Lost Type Co‑op.
A lovely, light-hearted typeface. Full of spirit and originality. Glistening with nostalgia, but full of energy. Lost Type Co-op describes it as:
A recognizably crisp, bold, and contemporary choice for all of your editorial, fashionable, intellectual, and satirical typesetting needs. Designed by Dave Bailey, and available now, only from The Lost Type Co‑op.
Just wow. What an incredible website. The style of this sort of portfolio is veryDesigners Republic (now defunct agency RIP). Give Aristide Benois a round of applause because this is super cool and truly one-of-a-kind.
A while back, Dave Rupert wrote a neat post on some of the subtle issues with CSS Grid. The Big Kahuna is, CSS Grid doesn’t play nice with <input>s (for now I suppose). Long-story-short, I recently had a quick project involving a web-form and CSS Grid. As Puzzling and as frustrating as it was to hack a solution — I came up short. Enter Rupert’s FitGrid™️! It’s was a real lifesaver. So thanks, Dave!
I just thought it might be useful to share FitGrid in its entirety for posterity. It’s basically a small set of CSS Resets for all of CSS Grid’s form problemos. Enjoy!
Seriously. What the hell is a <div> tag? When I first got into web design, I had no idea how a web page worked. I had no concept of HTML elements, let alone the <div> tag. Unbeknownst to me at the time, developers were pushing the limits of CSS and Flash to make compelling, thrilling websites.
After sometime, it became clear that the web is made up of hyperlinked text files (and very clearly not Flash). That’s it. Plain and simple. Even to this day. At a fundamental level, servers powered by PHP, Ruby, JavaScript or whatever — all pump out text documents (encoded by a markup language called HTML) that browsers can understand and parse (despite minor rendering differences it’s amazing that it all works). These linked text documents or hypertext, are plainly speaking webpages.
Just some <div>s hanging around.
Learning how to write a valid HTML document took a lot of trial and error, considerable patience from my mentors, and fixing my mistakes along the way. So, if you have any hypertext mysteries let me know — I’ll pay it forward, leave me a note in the comments. ☺️ Onward!
HTML Content Categories
I never really was given an answer for such a seemingly simple question: what exactly is a <div> anyways? I mean there are some very obvious elements at our disposal:
The <p> is a paragraph tag.
The <blockquote> is a blockquote tag.
The <ul> is an unordered list tag.
All HTML elements have inherent uses, and belong to certain content categories. The <div> belongs to the flow content category. Here’s some other HTML content categories:
Metadata content (out-of-band information and meta)
Flow content (typically contains text or embedded content such as the <div>)
Sectioning content (headers, footers, or sections — organizational structure is important)
Phrasing content (these define the text and the mark-up inside paragraphs such as <em>, <strong>, or things like <span>s)
Embedded content (these are typically external resources such as <iframe>, <canvas> or even <svg>s)
Interactive content (these are your <button>, <textarea> or <label>s)
Palpable content (this one is a bit abstract, but these are elements who are neither empty nor hidden, important for script manipulated content)
Form-associated content (these are typically children nodes of the <form> element, or children of the form attribute)
This brings us just about up to speed to talk about the the Content Division Element, or the <div>.
The Content Division Element, or The <div> Tag
While some elements have a more obvious progeny, the <div> is a bit different. It’s something of a marriage between a generic container and an inline-container, but somehow… it’s neither.
The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS. As a “pure” container, the <div> element does not inherently represent anything. Instead, it’s used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.
There you have it. While the <div> has no stylistic weight, but it can turn some heads with a litter bit of CSS love. But it’s true purpose is one of organization. Take for example, the typical and highly sought after Holy Grail Layout:
A basic Holy Grail setup with proper sectioning content
Simple and empty for now, we can further sub-divide our sectioning content areas (<header>, <nav>, <main>, etc.). We’ll use <div>s to contain and organize the inner content:
The same sectioning content, with further divisions using <div>s
And violá! Inside your <div>s you put your heading, phrasing, or embedded content (or anything else for that matter). It’s all about organization. 👌
The <div> Soup Problem
It’s important we use sectioning content and flow content properly. Otherwise we’ll end up with <div> soup like Google:
Uh…
Look at that mess!
While it’s not the end of the world, div soup presents a readability and productivity challegne for humans. Let’s say you inherit a project built like the figure above. There will be a considerable amount of technical debt, learning the organizational structure, and possibly re-factoring the div soup for efficiency. Web Components may be a future solution, but I don’t think it’s a winner.
Anyways, thanks for joining me on this journey to the center of the <div>. The web’s most prolific flow container.
Further watching:
Professor Brailsford makes a guest appearance on Brady Haran’s Computerphile, and has some hot takes about HTML and programming. Brilliant fun.
Why do design trends happen in the first place? Armin Vit wrote in (the now defunct) Speak Up:
Where does it come from? Are designers in the various fields just tuned into the same wavelength? Is there data to be looked up that steers designers in the same direction? Do creatives look over each others shoulders in bars to see what’s developing on cocktail napkins? Or is there a “stand-out, new direction” one year that is being implemented by everyone else a year behind? Which of course could mean that the “creative” or “innovative” element in our respective fields is not that big after all.
Armin Vit is on to something here in that last sentence. The design world is so small. And the front-end world is even smaller. Between Dribbble and Twitter alone, the transmission of ideas between creatives never stops. It’s no wonder that when a web design trend starts, it spreads like a conflagration.
I would argue that getting caught up in trends can be a nasty habit to get rid of later. However, I also believe trends are great for junior designers. Juniors can get their feet wet on something “new” and can help a portfolio feel fresh and modern. It comes at a cost though, as the trend waxes and wanes away it can leave your portfolio feeling out of date. But I think the long-term advantages of selectively “breeding” trends into your portfolio is overall, a net-positive.
I don’t think all trends are bad either. Most trends in web design crop up as a response to a design problem.
Gradients for example, became a huge hit when Webkit added linear-gradients in 2008. First arriving on background‘s and then later in typography. Previously if you wanted gradients, you had to use a background-image. Eww.
An interesting emerging trend nowadays is softness and harmony in compositions. Which I have to say are not terrible things to come across on the web. Easy to come by with a triad color palette, some box-shadows and background gradients and presto!
All joking aside, trends can guide your path forward (in any line of work for that matter). While I was attending university, trends in design anchored me. I was flying blind without them. And furthermore, reading about what came before me, was even more important. It was all boring stuff — sure. Inspiring? Meh. Trends may be boring, but mastering them will keep you employed. There’s no denying that.
I’d argue that mastering trends can lead to greater, more important self-discoveries in future work. Trends get a bad rep, but they’re pretty important to foundational skill-building.
The state of Web Design continues to evolve every single day. It has always been in a constant state of flux — pretty much since the iPhone was released in 2007. The iPhone was a doozy, because it forced developers and designers to find workarounds with Flash. Steve and Apple were not intent on bringing flash to mobile users. However, the web really became an exciting place when Google Chrome overtook Internet Explorer sometime in between 2011-2012. It signaled a shift in usage, technology and design thinking — and that just about brings us to now.
Layouts
When designing a layout, it’s important to keep an objective in mind. For example, Stripe is a product for developers and web-stores so their main objective is to completely wow developers from all walks of life (Stripe.com has some insanely cool cutting edge Front-end CSS). Another example is Lyft, whose primary goal is to convert visitors into users. What it really comes down to, what is this layout supposed to do for us and for visitors?
First, we figure out an objective: e.g. convert visitors into customers, signup users for a newsletter, or maybe there is no objective at all. Second, we need to figure out a design strategy. This is where the Z-Layout comes in.
Z-Layout Design Variations
Let’s take a look at some classic examples. If you are the head of product for an app, or wish to drive visitors to a specific page elsewhere on the website — chances are you want to go with a Z-Layout optimized to move customers around. Let’s look at some variations on this theme.
Slack – The E-mail replacement app has a lighthearted design, and aims to convert visitors into users.
Lyft – No paragraphs of copy, just high contrast, a simple form to become a driver and that’s it. If half of your visitors just want to become a driver, or a customer — make it easy for them.
Asana – Project management can be a hard sell, but communicating a simple product can be more effective than talking about bells-and-whistles.
Southwest – This airline gets an honorable mention. It’s not very sexy, and booking a flight itself is not fun here. But it is important to note that a vast majority of visitors here probably go straight to the booking form — so at the risk of being annoying to repeat users, it seems Southwest values their reward program over actual ticket sales. In fairness, this Hero area above the form likely changes all the time for various promotions and deals.
Coinbase, Caviar, Medium and Blue Bottle Coffee – more examples of Z-Layouts (yeah yeah some are stretching it) that promote engagement (e.g. interacting with a form or scrolling down). A single input on the form is key here. If there’s more than one, such as First Name and Last Name… forget about it. Medium is the exception because the product is reading. If you’re not into scrolling and reading, you’re probably not an ideal user for the platform.
Various – Above are some examples of heroes that are designed to convert visitors into customers. Key takeaways here on these, high contrast, elements along a “Z” path for eyeball scanning, and a button. The button is very important to driving engagement. It is 100x easier to just click a button than fill out a form.
Conclusion
Before I get destroyed in the comments, a layout is not a blueprint. If you’re a product designer looking to spice up your homepage or wish to drive customers to a sale happening at your webstore — look to the examples above for inspiration. The basic rule of this layout is this: simply align elements along a Z-shaped path above-the-fold. The secondary objective is: keep it simple. The less copy, the better. High contrast helps a lot. Make sure to check your colors for accessibility’s sake. And lastly, add your objective last along the Z-path (e.g. a button, form, or link). I hope this helps anyone in need of inspiration or direction!
—
If you have any questions, feedback or comments drop me a line below 🙂
.svg){kind=link}