stephen.news

hypertext, words and more

Design Tools

  • Big news yesterday in the tech world. Adobe likely minted a few millionaires with this deal. Figma was snatched up by Adobe for $20B

    For years, Figma stood headstrong in its’ resolution that collaboration in design tools begins and ends on the web — and they’re right. Productivity tools such as video creation, document collaboration, email, and even cloud storage (Dropbox) have had tremendous growth.

    Adobe’s humble beginning began way back in the 1980’s at Xerox PARC long before Tim Berners-Lee’s proposal on the web in 1989 was published. Ever since Sketch entered the market, the design tool market is becoming increasingly crowded. Adobe was once was a Goliath organization. A looming tower so large that no one dare take them on. Well, Figma gave them a really good run for their money.

    Chances are, Adobe was forced to make such a ludicrous offer, the board (and the founders) couldn’t refuse. For years, Figma has been eating Adobe’s lunch. They’ve been on buying spree building a moat around their Creative Cloud garden. Make no mistake, this deal will be bad for knowledge & design workers in the long-term, as design tool choices begin to dry up, and users are forced into Adobe’s suite of creative tools. If past is precedent, Figma will be slowly rolled into their brand and ecosystem and we’ll all be worse off for it. They’ll slowly raise the pricing, and lock us into expensive yearly plans to get access to Figma’s effortless product.

    How is the design world feeling about this? Well, this kind of hits the nail on the head:

    This won’t be the last we hear about Adobe + Figma. For now, pricing will remain unchanged, and educational account will continue to be free.

    This won’t be the last acquisition we’ll see from Adobe, but it might be last one that tops $20B.

  • From Lost Type Co-op:

    pro·spec·tus: noun

    1. A document that advertises a product, service, venture, institution, or event for the purpose of attracting potential clients, investors, participants, etc.
    2. 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.

    So much fun. Get it here, pay what you want for personal use.

  • The Memory Remains

    Frank Chimero, is a Brooklyn-based designer and author. He has a captivating blog and an incredible resumé. I'll spare you his backstory, but it's worth checking out. Thanks to Austin Kleon I discovered he recently interviewed with Milanote  (a fantastic blog) regarding his design process on various projects. At Chimero's own admission, this process probably won't work for everyone and every project but it's really something:

    I’m a big proponent of ‘once through, cleanly’. You think about your idea, sketch, then put some glue in your chair and bang it out in one sitting. All of my best work happens this way: posters, collages, essays, outlines for talks, and so on. The work seems to be more cohesive and the energy more concentrated and palpable. If you sit down and what you make is bunk, you walk away, come back later and start over. You don’t keep any of what you’ve done before, you only retain the memory of what went wrong. It’s a silly method, but it works for me.

    I work in a pretty similar way. The most exciting work happens in quick sprints and explorations. Most of the time, it ends with good work and that's the end of that. But, if I'm forced to revisit the work at a later time and find myself frustrated or burned-out — I start over, tabula rasa. Literally re-building a project from the ground up can be really cathartic for me. I've never given it any thought before until now, but the memory of the failures or problems remains, even after the work is gone. This is how you become a better writer, designer, developer or better person in general — retaining some record of failure, frustration or inspiration.

    That's what pushes us forward.

    @jerin1405 on Unsplash

    As a side note, when I was in college, there was a sort of saying that went around and I'm certainly paraphrasing my mentors here:

    Technology has sped up the rate at which designers produce work, but it has not sped up the rate at which designers produce great work.

    It's true. Technology has sped up our processes. But it doesn't speed up great work. The time it takes to reach good work can still vary tremendously. Mainly because creative problem solving depends on different conclusions from different processes.

    While some may have messy or complex processes, others have simple and iterative processes. Technology has allowed us to go lightspeed with briefs, projects, and deadlines. But creativity, inspiration, design processes and learning new things — these all have an unknowable trajectory. And that's okay. It's important that others understand that too. Jeez, no wonder it's so difficult to plan for anything.

    It's okay to sit there, staring at the screen and say, "I dunno about this. I don't know what to do." Just table it, trash it or come back later. Start anew if you have to. But no matter what, the memory remains, even after the work is gone.

  • 3D for Designers

    I’ll admit it. I overlook 3D design tools.

    Chances are you do too. Let’s be honest, they’re bulky large applications, whose interfaces often look like CNC Machine interfaces. They’re cumbersome to learn, and yield unrewarding, unconvincing 3D works. *Sighs*

    I don’t work with 3D art very often, but it would be nice to know best practices. Until last week I had no idea where to start. Enter 3D for Designers.

    Devon Ko (@3dfordesigners), a Github, Dropbox and Codecademy alumnus, is the proprietor of 3D for Designers. It’s an awesome resource for anyone wanting to pick up free tutorials on the Cinema 4D Lite application (which by the way comes FREE with Adobe Creative Cloud). Don’t let the “Lite” fool you. It’s a full-fledged 3D rendering application, and it comes “bundled” with export capabilities to After Effects. Which could potentially improve your 3D workflow.

    Ko offers paid course, but there’s a waitlist. In the meantime, check out some of her free tutorials, here.

  • The other day, a friend of mine asked me if I could help design a fun little website that emulate's macOS. I thought it would be a fun project, and looked around for some design resources to get a head start. Low-and-behold, I came across this amazing gem (get it?! 🤣):

    If you're not familiar with Sketch, it's a design and prototyping tool. Totally worth checking out their free trial. Sketch makes a good habit of releasing these, but for some reason the macOS UI Library didn't get any notoriety on their blog.

    At any rate, it's a badass resource for rapid prototyping. You can install the maOS UI Library here or click on the image below.

    A screenshot of the Sketch website showcasing the macOS UI Library

    If you don't have Sketch installed, clicking on the big orange button to install won't do anything. If you do have it installed, it will open Sketch and prompt you for installation. At which it will be available in your Sketch Preferences.

    Sketch app preferences on the library tab

    Once it's here, you're done! The biggest upside to this Library is it works with Sketch Runner out of the box (a must have for you Sketch users out there). You can quickly plop any macOS component by pressing command-apostrophe (⌘ ') at any time and it should bring up the Sketch runner dialog. Search for a component and:

    Sketch Runner dialog search query

    Press enter, and drop the component onto your artboard.

    Sketch App running with a macOS window component

    Congratulations! You’ve're ready to start prototyping! Enjoy! 🎉

  • It’s a pretty loaded term. Web Design… whoof. Let’s dissect this, because it encompasses a very wide range of disciplines. Heres’ just a sampling of what is expected of a typical web designer in no-particular order:

    • Overall Website Styles (style guides, typography, uniformity, continuity, etc.)
    • Wire-framing / Prototyping
    • Components Styles (UI such as forms, headers, buttons, templating, etc.)
    • Website Layout (how do these components fit together?)
    • Writing CSS and Javascript (most, if not all web designers can write CSS)
    • Cross-browser testing
    • Designing / Developing email templates
    • Designing / Developing web banners
    • Animations (CSS, GIF, or even video)

    Crazy right? That’s a lot to ask of one person yeah? Well, that’s what happens when you work with hypertext. What is hypertext? Wikipedia has a great one-liner about what hypertext is.

    Documents that are connected by hyperlinks.

    When your work focus across multiple disciplines via hyperlinked documents — things get complicated. Despite the challenging chaos, it is very rewarding making anything that lives on the web. Be it a webpage, banner or even this post.

    So where do you start as a novice?

     

    Learn to plan.

    Planning takes many forms. Draw diagrams. Draw blueprints. Sketch out wireframes. Make your drawings as granular or as defined as you like. Do this. Over and over again. Many times. Get comfortable using an eraser. Get comfortable starting over. Learn to plan. Looking to make your first web design project for a portfolio? Some ideas:

    1. Start REALLY small. Design a simple landing page, with a Z-Layout hero. Very common nowadays. Head over to BriefBox for inspiration or ideas.
    2. Don’t know how to draw? Use what you know. Microsoft Word? Pen and paper? Draw on your iPad? Photoshop? Doesn’t matter. Like at all. Just get your blueprint written down for later. More on Tooling below.
    3. Take notes, document your process, and question everything. Can this be simplified further? Will this be on every page? What devices are we planning to see this on? Is the client/brief married to these colors? How will photography be handled?

     

    Know your tools.

    When your sketch/blueprint design feels like it’s in the right place — it’s time to move your design into production. 

    Literally you’ll be producing a refined visual representations of your design. But what needs to be in this representation? How do you get from your blueprint into production? Most would argue that a Photoshop file is a good document for production. Mainly because you can group layers not unlike components. You can also export artboards as images which is handy for presentations or gathering feedback from clients. I would say, use what you know. I typically use Photoshop or Sketch. Other times I utilize UXPin or InVision as well — which are great for prototyping larger web projects.

    Photoshop is a great go-to tool for designers. Just know that it is rapidly becoming out of date in response to other tools such as Figma and Sketch. Photoshop is a dope photo-editor, but it also produces massive file bloat. Just four artboards filled with assets can be nearly 150mb large if you’re not careful. Also, Photoshop etiquette really is a thing and it doesn’t just apply to Photoshop. Some tips (assuming you’re designing in Photoshop):

    • Watch tutorials on designing in PS
    • Download example files, and starter kits and templates (starting from scratch is ambitious, no need to re-invent the wheel on your first project)
    • Name all your layers properly as components (header, button, footer, main-form, container, etc.)
    • Use high quality assets when possible
    • Design based on viewport max-width, not per device
    • Don’t be destructive. Use linked artwork, icons and photography
    • Hand-off a file that is organized neatly
    • Write a README document that communicates additional design notes (such as hover events or interaction)

     

    Gathering feedback and refining.

    Once you have your Photoshop file produced and you feel it’s in a good place — take the file, share it and gather feedback. How can it be improved? Refine the edges, add that extra layer of gloss. Iterate your design further. Iteration is a very healthy step in the design process. If you skip this part, it will be painful later on.

    The real truth of design is, no one can tell you what is bad or good (despite the fact many will continue to voice a opinion on what is good or bad). In design, all that really matters is effectiveness. No one cares about your style, your flourishes or your ego in design. An effective design is timeless and useful. Obviously there are trends in design, and from time to time I even indulge in partaking. Just don’t go overboard. Check yourself on trends you see on sites like Behance and Dribbble.

     

    Move your design into development.

    Development is the stage where your Photoshop artboards are transformed into actual code. A typical web designer should be able to write CSS and HTML. But, not all designers can do that and that’s okay. If writing code isn’t your bag, you can always shop it out to a front-end developer. You may not need a back-end dev for your project but it should be noted the two can be different.

    A front-end developer is a developer who focuses primarily on CSS and front-facing technologies (could be PHP or HTML or even Ruby).

    A back-end developer primarily focuses on server maintenance, provisioning, database management, and more.

    Not all front-end devs have back-end experience, and vice versa. But, some do.

    Pro-tip: Do not waste your time on PSD to HTML companies. The code they produce is awful, not well maintained, and good luck if there’s documentation. Take your time and find the right front-end dev to make you something beautiful. You can for example, hire me. Can’t afford a freelancer? Head to Reddit or even try visiting your local university or junior college. There’s always someone looking to make something cool for their portfolio.

    If you aren’t satisfied with any of those options, you’re left on your own bud. So if you’re looking to learn how to convert your artwork files into CSS / HTML, you’re going to have to take some time off to learn. I’d recommend visitting Codecademy and enroll in a course today! It’s totally free and it’s a great place to find mentors as well.

     

    Wrapping up

    So all-in-all, your process for getting started in web design looks like this:

    1. Learn to plan, figure out your first web project
    2. Know your tools, produce artwork files
    3. Iterate, improve your design
    4. Get into development, make your artwork come to life (become a CSS master!)

     

    Appendix

    A few great resources for front-end development:

    1. CSS-TRICKS : probably the best resource for all things CSS and front-end water cooler topics
    2. Codepen : a menagerie of web things
    3. DesignersList : vast resource list of brushes, sites, themes, stock photos, inspiration, etc.
    4. Muzli : Design inspiration, news, and trends.
    5. Hacker News : the pulse of computer science and the web, skeptical vibe and breaking tech news
    6. Reddit – /r/web_design : probably the most annoying place to read about web design

    Some recommendations to follow on Twitter:

    1. @conrfrmn : my personal mentor and friend, web developer at Apple (shoutout thanks for all the late nights hacking and showing me the ropes 🍻 )
    2. @adamselby : another friend of mine, designer and partner at 88oak
    3. @levelsio : creator of remoteok.iohoodmaps.com and much more
    4. @vanschneider : creator of , and has a dope-as-fuck newsletter
    5. @taramann : designer at @basecamp, and pretty much offers the best comedy relief from #DesignTwitter
    6. @chriscoyier : creator of CSS-TRICKS
    7. @davatron5000 : 1/3 of Paravel, also podcast hosts with Coyier on shoptalkshow.com
    8. @trentwalton : 2/3 of Paravel
    9. @raygunray : 3/3/ Paravel
    10. @paravelinc : the company Dave, Trent and Raegan runs, alway tweeting good things
    11. @sarah_edo : contributor at CSS-TRICKS, Senior Dev Advocate at Microsoft
    12. @brad_frost : web designer, speaker, consultant, cool guy
    13. @littlenono : visual design lead at @ustwo
    14. @smpetrey : the guy that wrote this article, overall good dude, enjoys the web
  • Chaker Bejaoui, writing for Prototypr:

    The ecosystem that Sketch has built around it is impressive. If you put Sketch together with Craft, InVision and Zeplin, the package suddenly becomes very competitive and attractive. You can go from designing, prototyping, to testing and shipping the ideas. And if on top of that you add simultaneous collaboration, a better shared revision history and a browser app allowing Windows users to play with Sketch, you are still ahead of Adobe.

    Currently there are 3 tools facing each other to win the love of designers: Sketch, Adobe XD & Figma.

    There is not enough space for 3 big players. Only 2 at the end will remain to hold most of the market share (e.g. Windows/Mac, Android/iOS, Uber/Lyft). Other smaller competitors will share what is left behind.

    For sure XD will be one of the two.

    If Sketch wants to remain one of the biggest player, it has to buy Figma.

    He’s completely in the right. There’s just simply too many players on the field. If Figma and Sketch knows what’s good for them, this sale will happen sooner rather than later.