AMA: Brad Frost, Web Designer

over 1 year ago from , Brad Frost Web

Hey there! My name is Brad Frost and I’m a web designer, speaker, writer, and consultant located in beautiful Pittsburgh, PA. I’ve been spending my last few years talking about responsive design, design systems, pattern libraries, process & workflow, amongst other things. I’m the author of the upcoming book, Atomic Design, which I’m writing in the open. I’ve also helped create several tools, sites, resources for web designers, including This Is Responsive, Death To Bullshit, Pattern Lab (with Dave Olsen), Styleguides.io (with Anna Debenham), WTF Mobile Web (with Jen Simmons), WTF QR Codes (with Craig Villamor) and Mobile Web Best Practices.

I'm happy to answer any questions you may have, especially around atomic design, the role of frontend design in the design process, responsive design, bullshit, music, art, and whatever else. Fire away!

81 comments

  • Kevin KwaKevin Kwa, over 1 year ago

    How about a picture of your workspace (either physical or digital)?

    Always interesting to see how other designers work...

    5 points
    • Brad Frost, over 1 year ago (edited over 1 year ago )

      Here's what my workspace looks like right now:

      Brad Frost's workspace

      That's my brother Ian working beside me. And that's my bulldog, Ziggy.

      13 points
      • Art VandelayArt Vandelay, over 1 year ago

        where'd you get the hot soup sign?

        0 points
      • Renan Romero, over 1 year ago

        Is a warwick bass! What is your favorite music?

        0 points
        • Brad Frost, over 1 year ago (edited over 1 year ago )

          Close! It's a 6-string Spector bass. It's crazy heavy but it's a lot of fun to play.

          I love a ton of different types of music: funk (Vulfpeck, Parliament, The Meters), hip hop (Outkast, Beastie Boys), alternative rock (Dr Dog, Cake, Gorillaz, Franz Ferdinand, Modest Mouse), electronic (Daft Punk, Ratatat, Chemical Brothers, Girl Talk), classic rock (Neil Young, Led Zeppelin, Talking Heads, The Band), and others.

          I'm on Last.fm and Spotify if you want a better idea of what I listen to. Also, I love good music recommendations, so feel free to give me some suggestions!

          1 point
      • Amit Patel, over 1 year ago

        Why are you guys sitting so close together?

        0 points
        • Brad Frost, over 1 year ago

          Hahaha we're brothers! I dunno.

          My brother recently made the switch from being a meteorologist to being a web designer, so I've been guiding him through a lot of things. It helps to sit side-by-side so that we can talk about coding best practices, work through design decisions, and laugh at funny videos & GIFs together.

          1 point
      • Alejandro DorantesAlejandro Dorantes, over 1 year ago

        Where did you get those drawers?

        0 points
  • David Steelcart, over 1 year ago

    What do you think of that new Kanye?

    4 points
  • Catalin CimpanuCatalin Cimpanu, over 1 year ago

    I was wondering if you had any time to look into the upcoming CSS variables spec? I am curious to hear your thoughts on the matter.

    3 points
    • Brad Frost, over 1 year ago

      I haven't looked at the actual spec, but from what I've read on the subject it seems really exciting! I think the most exciting thing about them is that they're live variables, versus precompiled variables like Sass. That means you can dynamically change values during runtime to accomplish some really cool stuff.

      Obviously, these custom properties can help maintain stylistic consistency across a site, but it seems like they can do more than that. Jake Archibald recently talked about how to use these properties to more thoughtfully load in CSS partials. That's just one example, but I have a feeling we're just scratching the surface of what can be accomplished with them.

      3 points
  • Joshua McCarthy, over 1 year ago

    I saw you speak about Atomic Design in Austin last year. The designers and clients I work with still want to pursue multiple visual styles (2-3 designs) early on before deciding on what creative path they want to go down. Does the atomic design process have a place in this type of workflow?

    2 points
    • Brad Frost, over 1 year ago

      Great question. Visual exploration is crucial, especially in the early stages of the design process. I just wrote about tactics for establishing visual design direction in my book. Here's the issue:

      Historically, visual designers have gone about this by creating full comps — often many comps — to feel out the aesthetic values of the organization. Throw some comps against the wall and see what sticks. As you might imagine, generating a slew of comps from scratch takes an immense amount of time and effort, and unfortunately much of that work finds itself on the cutting room floor. There must be a more efficient way.

      In a successful pattern-based process, you're able to get a sense of what aesthetics the stakeholders value and what they don't value without having to do a ton of work. Using exercises like The 20-second gut test and creating artifacts like style tiles and element collages can help the client get a feel for the aesthetic direction without having to burn a bunch of time developing a slew of full comps.

      There's no substitute for real collaboration and communication. Artifacts like style tiles and element collages won't be effective if they're not coupled with real conversations about the goals of the project and aesthetic values of the organization. In short: more talking, less blind comping.

      3 points
  • zee welc, over 1 year ago

    Padding and Retina: For some time i couldn't find the reason why some (but just very few) elements on my project appear slightly different on PC and Mac. Same browsers. Finally I fixed that by applying retina media query that divided at least my mac from rest. Could you explain maybe why it happens? I found it specially happens with padding.

    The scenario is like this, say I have padding-top:5px; on element. Same element would display good on one (PC/Mac) and will be few (but not neccesarily 5) pixels shifted on others..

    So padding and retina.. :) IDK, if that interests you I may do a PoC for this.

    2 points
    • Brad FrostBrad Frost, over 1 year ago

      Hmmm, interesting. It's hard to comment on your specific scenario, but from a broader perspective I'd say it's why I gravitate towards relative units like ems and rems over fixed pixel units.

      When I first started designing mobile web experiences in 2010, I quickly learned that a pixel is not a pixel is not a pixel. Mobile Safari would render something wildly different than Android 2.1 (yes that far back) which would render something way different than Blackberry 6.0 (yes really that far back). When I switched from px to em-based units, those differences normalized.

      So my advice would be to explore using relative units to see if that helps your situation. And remember, do websites need to look the same in every browser? Click here to find out.

      4 points
      • Nathaniel PeralesNathaniel Perales, over 1 year ago

        I completely agree that websites don't need to look the same in every browser! Also, love relative units.

        2 points
      • Mattan IngramMattan Ingram, over 1 year ago

        As far as I know this isn't as much of an issue anymore: https://benfrain.com/just-use-pixels/

        I think you have to manually change browser settings to recreate the old undesired text behavior when set in px. Every app that I look at that is set in pixels resizes just fine with user zoom settings across multiple devices and browsers.

        However ems and rems do give you benefits otherwise that still make them useful.

        2 points
        • Brad FrostBrad Frost, over 1 year ago

          Thanks for this; glad to hear some of those issues have smoothed out. At this stage in the game, I'm so used to ems and rems that it would be a big mental shift to go back to pixels haha.

          Related: I thought this recent article on ems and rems was good.

          0 points
        • Weston Thayer, over 1 year ago

          The comments in that article bring up that there's a user setting to scale only the text. For the history, read: https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/

          Respecting a legacy setting just because it exists is dogmatic though. The accessibility scenario is simple. People with low vision need:

          • Things to be bigger (at a minimum, text)
          • No horizontal scrolling (it's very hard to read quickly while panning back and forth)

          Normal browser zoom + responsive design meet those requirements without issue. There's no need to support the large text settings as well.

          0 points
  • James Williamson, over 1 year ago

    Hi Brad! Long time listener, first time caller. What's your favor flavor of Alamo Drafthouse milkshakes?

    1 point
    • Brad FrostBrad Frost, over 1 year ago

      SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL SALTED CARAMEL . I have a picture of one on my bedroom ceiling above my bed.

      6 points
  • Joacim NilssonJoacim Nilsson, over 1 year ago

    Hi Brad!

    When do you usually wake up and when do you usually go to sleep? :)

    1 point
    • Brad Frost, over 1 year ago

      Ha! Good question. I do a lot of traveling so my schedule tends to be all over the board. But if I'm lucky enough to be home for a week, I'll try to get up at 6:30AM, head to the coffee shop to do some writing before my workday starts around 10. I used to be a late-night worker, but that's changed in recent months. No idea why!

      1 point
  • Ian MortierIan Mortier, over 1 year ago

    Hey Brad!

    What are your favorite style guides? What do you think makes a great one?

    0 points
  • Vincent OrbackVincent Orback, over 1 year ago

    So many side projects, keynotes, books and blogging. Do you still do work for clients, and if so, what are you working on at the moment?

    0 points
    • Brad FrostBrad Frost, over 1 year ago

      Yep, I'm still doing client work! I'm currently working with a client that's been around a long time and has the chance to build something from the ground up for the first time in a long time. Part of my role is helping them actually make the thing, but the other part involves helping their team evolve their process. It's been so much fun to help the team collaborate more effectively and establish a solid, pattern-driven process!

      0 points
  • Tom Capossela, over 1 year ago

    Just wanted to say love your podcast!! :)

    0 points
    • Brad Frost, over 1 year ago

      Thanks a bunch! It was so great to have Anna as a co-host. She's a seasoned podcasting vet and has been thinking about style guides for ages. And it helped that all of our guests were incredible.

      I'm also happy we decided to keep it "small batch" so we didn't feel the obligation to make hundreds of episodes where we're simply rehashing the same concepts over and over again. It was a great experience.

      0 points
  • Paul Stonier, over 1 year ago

    Have you seen any cases of "Style APIs" in the wild other than Lightning from Salesforce?

    0 points
    • Brad Frost, over 1 year ago

      I have a small role advising a company called Brand AI that makes a living brand style guide that hooks into tools. The cool thing is that you change a color value centrally and it will update in tools like Sketch, PowerPoint, Photoshop, and more while also spitting out a new Sass file for web developers. I like the idea of having centrally managed styles. I'd be curious to hear if they have plans to integrate with native mobile platforms and other tools as well, but the general concept is there!

      0 points
  • Catalin CimpanuCatalin Cimpanu, over 1 year ago

    I ask this question when I talk to editors/developers/designers or any other person that sits "way too much" in a chair. Do you have any secret tips, besides the "eat your veggies" stuff on staying healthy?

    0 points
    • Brad Frost, over 1 year ago

      I invested in a good chair. And since I work from home, I find myself getting up from my desk quite a bit to tend to things other than a computer screen. At my old job I used to have a standup desk, which was a lot of fun. I also used to use programs that deactivated my computer screens at regular intervals (sorry I can't find a link anywhere) that would force me to stand up and leave my work area for a while.

      0 points
  • Carlos SantiagoCarlos Santiago, over 1 year ago

    Hey! great article about front-end design, reading that, made my career decision clearer (was in lombo not knowing what to do, i wanted more) so many thanks for that. now, how did/would you plan the plan to achieve this? sass over less -sass for sure ;) but things like grunt/gulp and in what order to learn (or ow far down the rabiit hole) languages like js, jquery and such. skip jquery for js only? and out of curiosity, whats your favorite editor, mine in Atom. thanks!

    • a wanderer designer that found the path to self-righteousness
    0 points
  • Thomas Hoadley, over 1 year ago

    what are your thoughts on responsive typography in web development. were there any libraries or frameworks that did it particularly well, or was there any bits of advice you can think of that may help create websites with better typography across all devices?

    0 points
  • Taron GhazaryanTaron Ghazaryan, over 1 year ago

    Hey Brad,

    I know you're a big proponent of web styleguides, but I haven't read your thoughts on the following. Our styleguide has enabled us to build and design pages relatively quickly. We've also seen huge usability and egnagement gains thanks to it. The trouble I've been running into lately is updating fundamental elements of the styleguide.

    Simple things like buttons and forms are easy to update visually. Where I run into trouble is in things like our grid, type sizes, etc. Any change to those fundamentals requires a redesign of a lot of our pages. For example, bumping the default font size from 14px to 16px would break a lot of pages. Changing the grid width from 960px to a fluid grid or even a wider grid will break a lot of pages.

    How do you deal with updating a design system while dealing with engineering constraints?

    0 points
    • Brad FrostBrad Frost, over 1 year ago

      Hey Taron, Thanks for your question.

      For example, bumping the default font size from 14px to 16px would break a lot of pages. Changing the grid width from 960px to a fluid grid or even a wider grid will break a lot of pages.

      Yeah I mean those are big changes that impact the entirety of the experience. Making changes of that scope will no doubt take time, thought, and effort. But I'd say those types of changes should rarely happen. If you find yourself making such significant changes frequently, I'd say there's probably something bigger going on that's worth exploring.

      0 points
  • Travis Arnold, over 1 year ago (edited over 1 year ago )

    I'm very interested to know how you handle one-off css? So I've built up patterns at my current job to use throughout our site and they work great. I'm able to get things a lot done faster, but I always hit a snag where something is different and doesn't necessarily fit a pattern. At that point do I do an inline style? Do I try to figure out a class name then add the two styles I needed? Do I add an id to the top level page/component and add modifications as needed? That's my biggest trip up when styling UI's.

    0 points
    • Brad Frost, over 1 year ago (edited over 1 year ago )

      That's a great question, and of course the answer is "it depends."

      I'd probably advise against inline styles, ids, and the like. I probably would advise having a conversation with the team about what you're trying to accomplish, and adapting the pattern to accommodate the variation.

      Design systems are a living, breathing entity, so constant tweaks, extensions, and improvements should be encouraged. If the design system isn't doing what you need, I don't think the answer is to go rogue and make exceptions. That's a fast track to making the design system obsolete. The better approach would be to make the system more flexible so it works across the board.

      Quick example: one thing I always struggle with is stuff like this: section { margin-bottom: 2em; }. In most cases, I want there to be some room in between major sections of the site. Except when I don't. Sometimes there are cases where I want the sections to be flush together (say if I'm applying background colors to the sections). I could hard-code <section style="margin-bottom: 0;">, but that would become unruly pretty quick. A better option would be to make a modifier for the pattern called .section--flush or something along those lines. That way the pattern becomes more versatile and can address similar scenarios in the future.

      If you do have to go the hacky route for whatever reason, I'd recommend following Harry Robert's advice about having a shame.css file or something where you can put all your knowingly-hacky code. It's a place you can put things and say "heeeeeey, so I know this goes against the design system and is all sorts of hacky, but the deadline is looming and I needed to get this done!" With any luck, you'll be able to revisit that issue down the road and solve it properly.

      Good luck!

      0 points
  • Gen Uine, over 1 year ago

    Hey Brad!

    How would you recommend introducing the concept of atomic design as a way of approaching design problems to both creative and account members, in a work environment where design culture is limited... & workflows & human interactions are very, mm, ... waterfall, deliverable-driven, anxious, & anti-agile (amongst other issues) ?

    (Not to boat-float, but I sometimes crush those stykeguide podcasts @ the gym to give Spotify a break. Thanks!)

    0 points
    • Brad Frost, over 1 year ago

      I just wrote about Pitching Patterns in my book.

      I've found it's a bit easier to sell these concepts to the teams actually doing the work. People tend to appreciate working faster and smarter. But for the people holding the pursestrings, you may need to approach things differently. Tie the benefits of a pattern-driven process in with financial savings, and you'll be more likely to convince them to bite on it.

      I've also found it's helpful for the organization to feel the pain of an inconsistent experience. That's why I think conducting an interface inventory is a great idea. You don't need to be a designer to understand having 150 button styles is probably a bad idea.

      And even if they say no, do it anyways. Ask forgiveness, not permission.

      0 points
  • Aubrey JohnsonAubrey Johnson, over 1 year ago (edited over 1 year ago )

    Hey Brad! I enjoyed death to bullshit.

    Question for you regarding specifically Popups, junk mail, tracking scripts, marketing spam, unskippable ads, clickbait, linkbait, native advertising, etc.

    These are digital sales tactics (I realize you identify them as attention grabs), what do you presume is better? Specifically when creating content costs non-trivial amounts of money and paying for content is usually funded by these bullshit tactics.

    It's also true (via data*) that people don't want to/literally do not pay for content.

    Some recent example data I found: * 11 % of US (10% globally) are paying for online news * 41% of world gets news from Facebook and 11% from Twitter (ad supported/free models)

    0 points
  • Brian KrallBrian Krall, over 1 year ago

    Hey Brad! I'm working on a project right now where we want to apply various skins to a componentized UI structure. Say, you have a default set of buttons and then you apply a separate stylesheet and those buttons have a new color palette, new spacing, etc. But you have a lot more components than just buttons, obviously.

    Your buddy Dan Mall wrote a great article about this, talking about content patterns vs. display patterns (http://danielmall.com/articles/content-display-patterns/).

    I'm interested in your perspective from the CSS side of things. How do you apply atomic design to a UI that is going to have a different look/feel basic on a new theme? Do your group all your skins in with your component styles? Or bigger picture, how do you decide what the default style looks like?

    0 points
    • Brad Frost, over 1 year ago

      I'm in the midst of these conversations with a few clients right now.

      I see the relationship between the over-arching design system and each implementation as a two-way street. The global design system obviously influences each implementation of it, but each instance should also influence the global system.

      How do you apply atomic design to a UI that is going to have a different look/feel basic on a new theme?

      Yep, I think you have it right that there would be a global.css stylesheet and a theme.css file to go along with it. Snook's SMACSS addresses this pretty well.

      Do your group all your skins in with your component styles?

      One thing we've done is build some functionality into the pattern library that allows you to toggle the themes. Have some form of dropdown or radio button that swaps out each theme's styles so you can see what each theme-flavored component looks like.

      Or bigger picture, how do you decide what the default style looks like?

      I would take a step back, extract the shared properties, and bake those properties into the system. If for instance one implementation uses a bunch of crazy textures and drop shadows on their buttons, then great! But those don't necessarily need to be included in the global styles. If however, the properties are more structural in nature (flexed items, absolute positioning, etc) then those should probably be addressed in the global styles.

      1 point
  • Maxwell LindMaxwell Lind, over 1 year ago

    Hey Brad - thanks for joining us!

    • You have a lot of upcoming speaking events...how many specific talks do you have and how do you tailor each to their respective audiences? (if applicable :)

    • I dig your mantra, "Work hard. Don't be an asshole. Share what you know."... specific to the latter, how do you notice yourself sharing what you know? (i.e. website, twitter, blog, other...) And on the opposite end of that, where do you recommend people to follow you for the latest and greatest?

    • You're no doubt busy!... where do you find the majority of your time/work being spent as of late? (design, writing, speaking, consulting, workshops...)

    0 points
    • Brad Frost, over 1 year ago

      Hey Maxwell, thanks for having me! This is a ton of fun.

      how many specific talks do you have and how do you tailor each to their respective audiences? (if applicable :)

      Great question, and I don't really have a great answer. My talks seem like ever-evolving blobs of content, and topics tend to bleed into each other quite a bit. As much as I'd love to have a handful of done-and-dusted talks that I could automatically deliver, it never seems to work that way. I do try to pepper in audience-specific references when I can, but I often find it's helpful to introduce audiences to ideas that may be bigger than their specific industries.

      I dig your mantra, "Work hard. Don't be an asshole. Share what you know."... specific to the latter, how do you notice yourself sharing what you know? (i.e. website, twitter, blog, other...) And on the opposite end of that, where do you recommend people to follow you for the latest and greatest?

      Thanks! I try to share as much as humanly possible, and lately that's taken quite a few different forms. I'm writing my book in the open, I tweet a lot, I blog a lot (a little less so lately because I'm writing the book), I help make resourcesites, I helped make a podcast, I shareexamples, I sharetools, I sharetalks.

      My philosophy is that it's not about the work you do, but rather what you enable other people to do. It's been so incredibly fortunate to learn from the creative exhaust of others, so I want to do what I can to contribute. It's so incredibly inspiring to see people take my little nuggets of ideas and turn them into truly incredible things.

      You're no doubt busy!... where do you find the majority of your time/work being spent as of late? (design, writing, speaking, consulting, workshops...)

      All of the above :) I'm currently in the middle of a client project while scampering around the world giving talks, workshops, consultation, amongst other things. I try to fit writing my book in between all of that, which I've found to be challenging.

      0 points
  • Mulenga AgleyMulenga Agley, over 1 year ago

    What do you think of Monese (www.monese.com) and the customer experience challenges of having a bank that operates entirely over a mobile app?

    0 points
  • Michael SchofieldMichael Schofield, over 1 year ago

    Oh oh oh. Not to double-up on the questions, but I have to know your favorite Bone Thug album.

    0 points
  • Michael SchofieldMichael Schofield, over 1 year ago

    Hey there! I am curious about where you fall on the progressive enhancement spectrum with regard to javascript-heavy front-end frameworks.

    0 points
    • Brad Frost, over 1 year ago

      This probably comes as no surprise to anyone, but I'm a big advocate of progressive enhancement as a sound principle to follow in order to create for this incredibly-diverse Web landscape.

      That being said, there's a time and place for everything. I won't say there's never a sound use case for rendering things on the client-side, but I think "render everything on the client-side" is dangerous as a default mentality.

      Thankfully, I see things trending towards server-side-rendered, "isomorphic" JavaScript. That means we can make use of all the benefits of server-side rendering while still taking advantage of the dynamic aspects of client-side manipulation.

      0 points
  • Weston Thayer, over 1 year ago

    Do you think that using ems/rems is still an accessibility requirement today? Or are they just nice to use from a design perspective?

    0 points
    • Brad Frost, over 1 year ago

      I think there are a lot of benefits of using ems and rems (see this answer. Having seen a lot of situations normalize across devices because of relative units, I still think there are accessibility benefits from using them. That being said, maybe every browser has advanced enough where it's no longer an issue. I dunno!

      0 points
  • Alexej D,Alexej D,, over 1 year ago

    Hey Brad! Do you know AMCSS and what do you think about the principle of using custom attributes as namespaces for your styles?

    0 points
    • Brad Frost, over 1 year ago

      Interesting! I have not seen this before. I won't cast too strong an opinion on it just because I haven't had a chance to read about it, but generally speaking it seems like a lateral move. Styles and style modifications need to be articulated somewhere, and whether it's classes or custom attributes doesn't really matter. Or maybe it does; I dunno!

      If teams find this way useful, then I'd say go for it. But I'd say to tread lightly simply because it's a pretty big departure from current conventions. I'm not saying that all new things are bad, but it would be worth weighing pros and cons before adopting a new approach like this.

      2 points
  • Scot Angus, over 1 year ago

    Hi Brad - first of all, thanks a million for giving back so much to the community. If you don't already have it, super hero status awaits!

    Okay, here's my question: what are your thoughts on baseline grids for use in a layout grid, and how do you go about creating them? Gridlover seems to do it all for you, but I want to understand it more deeply. Seems like you could manipulate several values to do it, but which do you find the best?

    0 points
    • Brad Frost, over 1 year ago

      Oh jeez. I tend to avoid conversations about grids. I don't really feel strongly one way or the other on grid systems. If grids work really well for your team or you have a tool you gravitate towards, then cool! Go for it.

      Personally, Don't Overthink It Grids by Chris Coyier really resonated with me. In my own work, I tend to establish a few layout patterns that lets me do what I need to do. I want to put things side by side, in thirds, in quarters. Sometimes I'll have a two-thirds/one-third thing going on. But yeah that's about it. I don't tend to apply any crazy grid systems to my work. To be quite honest, I still don't understand them, and this is as somebody that basically lives at web design conferences.

      While I'm not a treasure trove of knowledge when it comes to grids, I will say to check out Rachel Andrew's new book, Get Ready for CSS Grid Layout. And if you're interested in responsive grid systems, I've rounded up a bunch of them here.

      0 points
  • Angel Velazquez, over 1 year ago

    This might be a silly question but what defines a web designer? I ask since the title seems so broad and people expect you to be an expert, from design to back-end developer.

    0 points
    • Brad FrostBrad Frost, over 1 year ago (edited over 1 year ago )

      "Someone who makes things for the Web." That's probably how I would define "web designer." What "making things" actually means will no doubt vary from person to person, and that's OK.

      I recently talked about the notion of frontend design to highlight my own experiences as someone who's had a hard time fitting into any one bucket on a team. But some people do have clearly defined boundaries in their skill set; I call those people "bricks". But there are other people who straddle the line between a bunch of disciplines; I call them "mortar" people. Both bricks and mortar are necessary to build a stable wall, so whether you are a brick person (i.e. love doing backend work and don't want anything to do with UI code) or you're a mortar person (i.e. love UX design, semantic markup, and color theory), I hope you're able to thrive and excel in your work.

      0 points
  • Doug OrchardDoug Orchard, over 1 year ago

    Where do you think future frontend design and development is heading? ( kept the question very open on purpose )

    PS. Your frontend design article helped me at my workplace. Too many developers asking what my role was in the company as I kept stepping on "role" toes. So, thank you for clarifying it as a role. Finally I have some ammunition on the next time it gets brought up.

    0 points
    • Brad Frost, over 1 year ago

      Ha, that's a tough question! I dunno, really. JavaScript seems to be getting more robust and capable all the time, so I'd anticipate a that part of the frontend universe to continue to explode with all sorts of new developments.

      And also, I think there are so many techniques and technologies out there right now that we have yet to really sink our teeth into. While there have been some opinions that we need to slow down, I personally think all these tools are really exciting. No one person can get their head around every Web technology available, but I'm looking forward to continue seeing people latch onto some nascent and/or obscure technique and do something amazing with it.

      So the future is unknown, but I think so long as we continue to embrace sound principles we'll be alright!

      1 point
  • Prakhar BhardwajPrakhar Bhardwaj, over 1 year ago

    I think I am pretty late here but will try in hope that you might see this someday. What would be your advice to an engineering student, who is in love with design and web and frontend in general, dreams studying design academically and is from a third-world country?

    0 points
    • Brad Frost, over 1 year ago

      First of all, I think it's amazing you have such ambitious dreams!

      I wrote up some advice for people who want to get into the industry, so hopefully some of that is helpful for you.

      Regarding your comment about studying design at a university, I'd say that's a fantastic plan. I went to a university and found the experience to be very valuable. However, I don't necessarily think it's a prerequisite for doing great work. Many great designers and developers didn't attend university and are at the top of the field. There's no substitute for getting out there and doing work. That's why I think it's so valuable to set up your own website and play around with it:

      The best advice about getting started in web design/development is to buy yourself a domain name and create your own website. Your own website is the ultimate playground, where you can have fun, experiment and break things. You don’t have to worry about doing things right, impressing anyone, disappointing clients, or anything. It’s the ultimate freedom.

      Also, I think it's helpful to ask around to see if people could use some design/development help. Some of my earliest work was for friends and family, and I think projects like that are a great way to dive in and get some experience under your belt.

      Again, I think formal studies can be helpful for the right people, but don't think it's the only way to be successful. Work hard and have some fun!

      1 point
  • Anwar ChoukahAnwar Choukah, over 1 year ago

    What's your favourite CSS selector pattern?

    Mine is the lobotomised owl. * + *.

    I've only used it once for a personal small project, but I was smiling for at least 10 minutes afterwards.

    0 points
    • Brad Frost, over 1 year ago

      Ha! I've seen the lobotomised owl but have never used it.

      Personally, I've been loving Sass's & feature that allows you to nest things quite elegantly. For example:

      .block { &__title { } &__body { } }

      I think it's a nice pattern that saves you having to repeat yourself.

      (Funny thing is though, in the back of my mind I can see myself reading this a year or two from now and wincing at this advice.)

      0 points
  • danilo vargas, over 1 year ago

    How do you deal with spacing in style guides, do you separate between spacing for components and spacing for sections of pages. Do you use reusable helpers classes or apply padding or margin properties on the components selectors itself.

    0 points
    • Brad FrostBrad Frost, over 1 year ago

      That's a great question. I attempted to answer a similar question here. Here's the relevant part:

      Quick example: one thing I always struggle with is stuff like this: section { margin-bottom: 2em; }. In most cases, I want there to be some room in between major sections of the site. Except when I don't. Sometimes there are cases where I want the sections to be flush together (say if I'm applying background colors to the sections). I could hard-code , but that would become unruly pretty quick. A better option would be to make a modifier for the pattern called .section--flush or something along those lines. That way the pattern becomes more versatile and can address similar scenarios in the future.

      So to answer your question, I typically add a modifier to a pattern that allows me to adjust the spacing of a component based on its usage. That being said, there's more than one way to skin this cat and I'm sure helper classes and other techniques could also be valuable.

      0 points
  • Lucas Cerro, over 1 year ago (edited over 1 year ago )

    Sorry I'm so late to the conversation. I recently came upon your open design initiatives, and paying specific attention to the timeline got me thinking.

    How do you define your deadlines? I mean, to me it seems like an impossible challenge to—at the moment of signing the contract—know that it will take 14 months (or what have you).

    Are deadlines usually written in the contract or defined as you go?

    What about in case of mandatory deadlines, e.g. "our site needs to be ready for the holidays"? Of course you set out on meeting it or outright say it isn't possible. But what about when the deadline is 8 months away, and you think it will take 7 months, but as it draws closer you realize you'll need 9-10?

    In sum, how do you preempt these problems in the beginning, and how do you deal with them if when they appear?

    • EDIT

    One last question: if you do not have a predefined deadline on some projects, how do you decide on cost?

    0 points