2017 Web Roundup, Gratitude, and Looking Ahead

On a macroscopic level, 2017 was not the most favorable year in terms of morality and humanity in my opinion. However, I try to look at the glass as half full. I have seen people care more about what is going on in the world and about the rights of other human beings. I hope that continues, because at the end of the day, humanity should come down to feeling loved, happy, and healthy and wanting that for others, too. In order to do that, we need to help and care about others. Keep doing that.

On a more personal scale, 2017 has been a great one. It has been another year of learning in the world of web design. I am fortunate to work with wonderful people on some amazing projects. Here are some of those accomplishments from the year:

  • Celebrated my 2 year anniversary switching from meteorology to web development working with my brother, Brad Frost at Brad Frost Web.
  • Finished up building my first design system for ExxonMobil in early 2017. Probably the experience of 2016-2017 where I learned the most, felt the best about our code after building it, and really enjoyed working with their team and my team.
    Screen Shot 2017-12-15 at 11.35.46 AM
  • Redesigned the Harvard Business School Digital Initiative website and style guide. I built the front end of the site and the corresponding style guide. It was an honor working with their fantastic team and very humbling to be surrounded by so many interesting and intelligent people. It gave me a better perspective of the Harvard brand and how truly welcoming and down-to-earth the folks were there.
    Harvard Business School DI site
    Screen Shot 2017-12-15 at 12.10.18 PM
  • Built my first Shopify site for a friend and local company in Pittsburgh called Puzzle Pax. I had worked with Jekyll before so using Liquid was fairly straightforward and it was the first site taking on the design, development, and CMS work without another person to back me up. It was a great learning experience and favor for a friend.
    Screen Shot 2017-12-18 at 10.38.58 AM
  • Built a Jekyll site in twelve days with Brad for the Brian Forde For Congress campaign. It was the quickest project turnaround I have had and to be honest, was fun to build and put the pressure on. It was also great meeting Brian and reading about his views on the country and his accomplishments.
    Screen Shot 2017-12-15 at 12.06.48 PM
  • Started building a design system for a company that eventually didn’t use anything we helped build and went in a separate direction.
  • Other various projects and tweaks. Pattern Lab demo development. Frost Finery website tweaks. Helped a tad bit with the redesign of bradfrost.com. Helped Brad build out a few components from several different sites the day before a workshop on design systems. A few other personal/internal projects that tend to get pushed to the side when bigger projects come to fruition and then returned to later.
  • Took more than 100 trips to the post office and fulfilled well over 1,000 Atomic Design books (also helped redesign the shop page to its current state in Shopify). Very proud of Brad’s success with the book, but man, a week without going to the post office would be great.

It has been a fairly busy year. It has been a year where I feel like I have finally settled into web development, while still feeling like I do not know enough about it after looking at the incredible stuff other people are creating. That being said, I am looking forward to my current and future work in 2018:

  • Redesigning a larger company’s websites and building a design system alongside these sites. I am enjoying working with my team and we are doing some really awesome things with implementation of patterns into the actual site.
  • Redesigning a friend and local company’s website. The current site needs a lot restructuring, love, and responsiveness, so I am looking forward to helping him out and hopefully improving his user experience, ability to write content using a proper CMS, and business in general.
  • Potential web site and design systems projects are in the works, but nothing is set in stone at this point. I’m always looking forward to helping people out with a website redesign, style guide, or design system work. I learn something new from each experience.
  • I hope to redesign this website, because I haven’t had much time to dig into it and it hasn’t been designed since Brad set it up for me when I was a meteorologist. I started, and like many other lower-priority projects, it got pushed to the side. I really wanna get this done so it doesn’t look terrible.
  • I hope to share what I’ve learned with other people somehow. I’ve thought about teaching a basic WordPress class or the way we build websites, but I’m not sure what I want to do yet. The web community has been great to me the short time I have been involved in it and I want to do the same for others. Helping people is one of the reasons I got into meteorology and I want it to continue with web design as well.

I have been very fortunate to work on some pretty amazing projects, but they wouldn’t have been as amazing without my teammates. I also want to thank the speakers at Clarity Conf. Thanks to these special people:

  • Brad Frost – Always thankful to have him at my side (literally, since we sit next to each other in the office) building great things on the web. Always grateful for him allowing me to work with him after I moved back to Pittsburgh. It has been a cluster of fun, mistakes, learning from these mistakes, lunch break jamming, late nights, and organized, thoughtful web work. Over 2 years working together and we still haven’t beaten each other up. I guess the 18 years of sleeping in the same room helped with that.
  • Dan Mall – An amazing designer, project head, colleague, and, most importantly, friend. I’ve had the honor of working with him on several projects and he never fails to amaze me with his designs and knowledge in general. Whether we are in a project meeting or playing basketball north of Philly until 2am, he’s a great guy to be around and I am thankful for that.
  • Josh Clark – An awesome project manager, facilitator, project politics absorber, colleague, and friend. He’s the guy who could make your worst day into the best day. He can turn the mood of a bad meeting into butterflies and rainbows by the end of it. I am grateful for him for allowing me to work on projects with him as well as picking me up when I my confidence slips in the wrong direction. You da best.
  • Jesse Gardner – A fantastic WordPress and backend guy who I worked closely with on the Harvard Business School Digital Initiative project. A guy I can now call my friend after working with him. I appreciate his willingness to help me out when I needed it and for putting up with my requests when I was feeling a bit behind or confused. Definitely a guy I would like to keep around since he is a positive influence on people’s lives and knowledgeable about WordPress and SEO stuff. Thanks for the good work!
  • Kevin Hoffman – The guy that I had heard a lot about from lots of people but never had the opportunity to work with until the Harvard Business School Digital Initiative project. He is a magician with UX, strategy, and pulling people into his very organized methods for working together. He’s a guy who I could talk to about random, goofy subjects when I was feeling a little out of the loop when conversations turned to the topics like Bitcoin. You know you will be friends with him when you pull a Lady and the Tramp with a donut in Boston. Thanks for your help!
  • Abby Fretz – An awesome producer who would make sure to DM me in Slack to make sure I got my shit done on the Harvard Business School Digital Initiative Project. Super down-to-earth and very professional, she knew how to keep everyone on the same page during the project. I am happy to now call her my friend. Thanks for always keeping me on my feet and keep making that honey.
  • Octavius Newman – A great designer and comic book/movie guru. Was a pleasure working with you on the Harvard Business School Digital Initiative project. You have such a thirst for knowledge. I envy your ability to ask questions and speak up when you don’t know something or when you have an opinion. Thanks for being a good dude and friend.
  • Jamie Kosoy – What can I say about him? He’s a ridiculously talented developer who has been building web stuff since the 90s but somehow manages to take the time to teach someone like me who is newer to the game. I am thankful to get to work on our current project together and hope to learn more from you. I’m glad that we can goof around and do incredible work together. I’ve thoroughly enjoyed it.
  • Crystal Vitelli – Am awesome person to handle the politics of a big project like the current one we are working on. Great with strategy as well as making sure our team knows what is going on from all of the angles information is flowing in from. While we haven’t talked much, it has been a pleasure getting to know her and I look forward to building great websites and design system with you. Thanks for all you do.
  • James Hall – A very talented backend developer who somehow managed to understand what we were writing on the front end and implement it into the actual website. I’ve appreciated the random movie/television quotes and GIFs as well. Glad our humor is on the same page. Thanks for the help with this current project.
  • Jon Jackson – An up-and-coming designer who I had the chance to meet before we even worked on this current project. He is someone who wants to learn from anyone he meets and has done a great job on this current project. I can relate to him since he is newer to the web design world, so it is great to see the parallels there. Thanks for helping with the design of this current project.
  • Mary van Ogtrop – Fantastic copywriter who seems insanely busy but somehow manages to make time to talk to you about writing copy. While I haven’t talked to her too much during the project, it is great to work with a copywriter to see some of her process and I look forward to her continuing work. Thanks for helping with the project.
  • ExxonMobil Team – Working with them was awesome. It was a great experience building the design system along with them, hearing their questions and concerns, and transforming our project plan based on their feedback. It was also great eating Torchy’s and listening to Journey together.
  • Harvard Business School Digital Initiative Team – I can say nothing but kind words about them. They are all some of the smartest people I have met, but they also are some of the nicest, down-to-earth people I have met. They didn’t make themselves out to be more important than anyone else on the project and were a fantastic group to work with (especially since they brought in delicious donuts…twice). Thanks for being a wonderful and cooperative group to work with.
  • Clarity Speakers/Organizers: Jina, Cameron Moll, Debbie Millman, Una Kravets, Abi Jones, Cap Watkins, Diana Mounter, Elyse Holladay, Henri Helvetica, Isha Kasliwal, Josh Silverman, Linh Yao Pham, Mina Markham, and Miriam Suzanne – Thank you all for a great conference and for sharing your knowledge with me. I learned a lot. It was a pleasure getting to know some of you and I look forward to seeing what great stuff you continue to build and talk about in the future.

Thanks to these folks and everyone else who made 2017 a fantastic year. I don’t know what will happen in 2018 but let’s keep creating, building, and making the web great! May everyone have a safe holiday and a happy and healthy new year!

2 Frontend Designers. 12 Days. 1 Website. How We Did It

Brian Forde screenshot

  1. Stock up on La Croix.
  2. Make sure another big project is going on to make things even more challenging
  3. Make a great website using guidelines we have used in all projects starting last summer as well as quick and efficient design themes.

The Client: Brian Forde. Who is Brian Forde you ask? He worked under former President Barack Obama as the Senior Technology Advisor. He helped launch President Obama’s Climate Data Initiative and, as a former practicing meteorologist, I think that is fantastic. He’s running for Congress in southern California and after talking with him, he seems like a good, down to earth guy with a positive message.

The Site:  forde.com.

The Start

On Friday July 7th, the project began. When I say the project began, my portion of the project began. Brad got contacted by the client a couple days before and agreed on a launch date on July 19th. For those who don’t understand web design, most projects I’ve worked on take about 3 months with more than 2 people doing the design and frontend development work. Brad agreed to do the work with the deadline in mind. As for me, I am currently involved in another big project and thankfully it was in a bit of a lull period from the development side of things, so I agreed to help Brad out. Like with most projects we do anymore, Pattern Lab was the tool of choice. Why use Pattern Lab when we could just crank out everything on the actual site?

  1. Brad and I do our best and fastest work in Pattern Lab. Mustache is a great thing. Gulp tasks are great things. Build fast; build efficiently.
  2. Doing your work in Pattern Lab allows you to create pages and templates as well as a pattern library/pattern playground for your client.
  3. Atomic Design. Brad knows a little bit about that.
  4. Pattern Lab is where I learned web design. Yes I took codecademy classes and read books to learn too, but getting my hands dirty in Pattern Lab allowed me to fail and learn from my mistakes.

A little nervous of the timeline, I dove into the project with Brad. We cranked out components based on one comp with colors and a few grayscale comps that we received from the client. Did we use these comps? Sort of. Did we use the colors in the one comp? Only for one of the theme options to see what it would look like. Why? Because every site we make we care about the identity of the client and, frankly, the colors in one of the comps weren’t working for what we wanted to build him and how the public would perceive him solely from the website design.

We built a collection of components in Pattern Lab and the general IA (example of it below included between a header and footer) of what content should go where. Grayscale components nonetheless, but these grayscale components are the foundation of iterative workflow. These would change a bit over time and that is okay. Our process starts with building the foundation. Then we add styles. Iterate. Massage styles. Iterate. Massage. It’s a great workflow, and it all happens within code, making it easier to get the ball rolling and easier to import into the actual site.

Screen Shot 2017-07-20 at 12.21.04 PM


The Design

We now had the components and some sort of wireframes set up in PL. We needed a design direction quick. Brad set up a short 20-second gut test of sites for Brian’s team to look at and react to. I took notes on their reactions, especially Brian’s. After that we had an idea of some of the key desires they were looking for in their website. Bright colors, strong calls to actions, clear forms, as well as other points. We had their input. We just needed the design direction, which brings me to my favorite part of this project: building a theme and logo switcher with Brad. How did we do that? 6 buttons (5 themes and a logo button), some JavaScript, and two-tiered Sass variables that could be overridden depending on the 5 separate theme-CSS files we activated. We built it out, chose some color schemes, called the Brian Forde For Congress team. We were able to switch through different colors, fonts, etc. with the click of a button and we were able to switch through some of the logo designs they had sent over. I recreated the process below (obviously we used actual logos and font-sizes were better executed during the meeting, but you get the idea).  Brian was fortunately sold on the one theme and we had an art direction in a half hour meeting.


Bringing It All Together

Grayscale components. Check. Art direction. Check. The good part about the theme changer was that I could kill all the other themes and implement the theme they chose right into our Sass variables. Quick and easy. We replaced the placeholder blocks in the wireframes with actual components. We used CSS Grid Layout and Flexbox for layout-specific elements, making this the first project we used CSS Grid Layout on. I have never used floats in a project (aside from a text passage image), which shows how new I am to the web design game. For someone who is progressive like Brian and former Senior Technology Advisor in the White House, it only made sense to use the latest and greatest in CSS. The pages in Pattern Lab looked good enough to start implementing into a CMS.

After many iterations, this grayscale hero component…

Screen Shot 2017-07-20 at 12.05.58 PM

would eventually become…

Screen Shot 2017-07-20 at 12.06.12 PM

Building the Actual Site

The great thing about Pattern Lab is it all renders as HTML, CSS, and JS. The other great thing is while we built patterns in Pattern Lab, we could copy some of the key patterns into the Jekyll site, the CMS that would be used to spin up the website. Why did we use Jekyll instead of WordPress? Mainly time. Jekyll spins up static sites quickly and easily, and that’s what we needed with the website MVP. Is WordPress easier to use from a content management standpoint? Probably, but it is much slower to build out components and pages for a project consisting of mostly static pages anyways with only a little bit of functionality.

Most of the production work took place in Pattern Lab. Once the pages were built, we took some of the organisms (aka more complex components) and manually copied them over into the Jekyll site’s includes folder. This way we could include the same pattern on multiple pages. We built out the templates from Pattern Lab in the layouts folder of the Jekyll site. We managed the content of the pages within markdown files located at the root of the Jekyll site. With some help from the liquid templating language and some placeholder content, we were able to scaffold out the site. We would use Pattern Lab to massage the CSS further (adding box shadows, background bands, and spacing to add dimension). I then added a gulp task to copy over the CSS, images, icons, and JavaScript from Pattern Lab into the Jekyll site. All looked good in Chrome. But Safari, Firefox, and the dreaded IE/Edge were next to test.

Testing and Finishing Touches

Brad did the majority of the IE/Edge testing. I took on a bit of the small screen tweaks as well as Safari and Firefox testing. We included fallback CSS so browsers that don’t support CSS Grid Layout would look solid, but there were still some tweaks with the forms and other grid items. He realized that there needed to be wrappers around items within a grid component for them to render properly in IE/Edge. All the bugs were fixed. We had a site built! A day was left until the potential soft launch. Hoor…oh no…icons. IE/Edge does not like external source SVGs for some reason. We used a script called svg4everybody but that wasn’t working. Brad spent hours on it. We slept on it (sort of). I came in the next day and had to use my own personal site to test the SVG icons being included within the project. I ended up changing the script in the head to the one we included in another project. Refresh. Voila! Icons were showing up! We jumped for joy when we saw this. Were we done? Not yet. Brian and his team had to replace our placeholder content in markdown within Jekyll and we had a few content additions and design tweaks. By Wednesday afternoon, we finally finished the MVP site. Wednesday evening we launched the site with their team. Finally we could say, “Hooray!” I am hoping that all of the hard work we put into this project so far leads to a win for Brian.


Learning the Web Using Atomic Design

As many of you web designers and developers know, my brother Brad Frost’s book Atomic Design has recently been released into the wild. As many of you may also know, I work with him. What many of you don’t know is the way I learned web design was through Atomic Design. After packaging up tons of Atomic Design books over the past month and a half, I have realized how important it is to developers and designers.

The way you learn HTML, CSS, and JavaScript is not by jumping into processes like atomic design, but learning the actual languages first, which is what I did. After learning the languages via codacademy and Brad’s tips here and there, I only worked on one small project without atomic design before learning the process of it. I put it to use in the website for my sister-in-law’s jewelry company Frost Finery. Since then, I feel like most of my projects (both websites and design systems) have dealt with some sort of breakdown of components into the categories of atoms, molecules, organisms, templates, and pages. I have definitely grasped the benefits of what it has meant for me early on in my web designer/developer career.

Benefits of Learning Through Atomic Design

Although it is perfectly acceptable to learn web design in many different ways, I feel atomic design has a lot of benefit. The way I learned was through Pattern Lab, an easy-to-use prototyping tool that you can clone from GitHub. I use the mustache version because that was one of the only versions before the new version of Pattern Lab and I feel like it’s the easiest to understand for a beginner. You can also use the Node.js versions (using Grunt or Gulp). Pattern Lab helps paves the way for easier web development.

Without further adieu, here are the benefits of learning atomic design early in your career:

  • It organizes your components from small to large, making it easier to understand the structure of your site’s contents
    1. Here are some examples of each:
      • Atoms = Button
      • Molecules = Search input containing that button
      • Organisms = Header containing that search form
      • Templates = Homepage with that header at the top (“wireframey”)
      • Pages = Homepage with that header at the top but with the data and actual images included on the site
    2. I spent my early days of atomic designing (weird to say that) components caring too much about whether a certain form is a molecule or organism. Answer is, it doesn’t matter as long as your team agrees that the component’s location makes sense. No need for 500 stand-ups to decide where each component goes.
    3. Within atoms, molecules, etc., we also add additional folders in our recent projects (forms, blocks, messaging, etc.) to compartmentalize components by type. This also helps with trying to find the correct pattern in your directory.
      Screen Shot 2017-02-03 at 7.41.34 PM
  • Adds consistency across your site by reusing components.
    1. Atomic design is based on reusability. Say you build a button in your atoms folder. You can place that same button on another page or within a header and still have the same class name. This will keep a consistent theme across your entire site.
    2.  You can add a modifier class like .button--blue to .button (using BEM CSS syntax) to give the button a different background color instead of specifying where exactly the button is located in your HTML.
    3. If you are building a design system for a giant corporation like we just did, you can add theming into your CSS a lot easier by targeting less patterns since most of your base styling takes place within one class instead of multiple classes.
    4. The brand of your company’s site or client’s site can be represented across the board by keeping with consistency.
  • With reusability comes thinking about reusability
    1. Atomic design allows the designer/developer to think about each pattern and how it will get used within other components or pages in the site
    2. You can easily code a button on each page with different class names. However, if you think about how you are using the buttons you can consolidate these buttons into 1 class name and a handful of modifiers. Less CSS = better performance.
    3. You can learn more about the structure of the code with each pattern, rather than building it and then setting it and forgetting it (in the wise words of world- renowned Ron Popeil).
  • With thinking about reusability comes thinking about CSS structure
    1. CSS is another area that can turn into a rats nest if you bury a lot of class names within one another via Sass. I don’t suggest breaking each Sass partial into atoms, molecules, organisms, templates, and pages (although you could do that I guess). You should break down each Sass partial by component name (the same goes for JS before concatenation). That way it is easier to navigate to where you need to change CSS.
    2. Being that your HTML is based on component, you can do that with your CSS with classes. Start off with your base .button component. Then you can say, “Hey! I like headers and I like the color blue. Let’s put a blue button within the header.” You open up button.scss and you can either:
      • Make a modifier class called .button--blue if you use the button in more than just the header for example.Screen Shot 2017-02-07 at 10.27.16 AM
      • Or you can add a parent selector to the base button element. Using a parent selector like this allows you to focus on the button itself, rather than going to the header.scss Sass partial and sifting through all of the nested items before finding your button. It’s organized a a lot better since nesting child elements can get out of hand So the code would look like this:
        Screen Shot 2017-02-07 at 10.26.38 AM
    3. And remember, commenting is a wonderful thing. It’s an annoying task to do, but it is totally worth it when it comes to comprehension. We just finished a big company’s design system, and I will tell you that commenting on our CSS allowed two of our colleagues to write documentation on components that were mostly built by Brad and me.
  •  Atomic design stretches its hand out to visual designers
    1. If there’s one thing that helps a lot with a project is a visual designer who knows how to code. Atomic design (and specifically Pattern Lab) allows a designer who wants to code the ability to learn it without the intimidation of a large mass of code. I know a couple folks who are visual designers at heart but know how to code and have used Pattern Lab to help out with projects.
    2. If you know how to code as a designer, you can just go straight into Pattern Lab and prototype what you would’ve comped out in Sketch or in a PSD. It decreases the amount of time it takes to go from image to code.
  • Pattern Lab is designing in code. Once prepped, it’s ready to bake.
    1. Once you have your templates and pages built with all of your components in Pattern Lab, you can import the code into your WordPress project or Drupal project and tweak the PL code to fit whatever language you are using for your CMS.

Atomic design is a great method to pick up (I swear Brad did not tell me to say that). It’s easy to learn it whether you are 10 years into creating the web or 2 years into it. The web is becoming a more and more modular place to work in and less so about big “pages.” We literally went to a JavaScript workshop the other day that taught similar aspects of using a modular workflow to organize JavaScript. There’s a reason I packed and shipped a bunch of Atomic Design books across the world. Atomic design is a great thing and will only get better with the help of all designers and developers out there!

Just Wanted to Say Thanks

Mr. Feeny

There’s not a day that goes by where I don’t think of how grateful I am for things in my life. I know it can be tough to appreciate things when life isn’t going the way you want, but it definitely helps to take a step back and reflect. I recently tweeted my 5 ways to living a happier life:

  1. Be grateful
  2. Challenge yourself
  3. Laugh
  4. Stop comparing yourself to others
  5. Respect/help others

With Thanksgiving coming up, it is a time to look back on your past year or your entire life to appreciate the small and large things in your life. There’s always something. Here are things I am grateful for over the last year:

Life. I am grateful to be able to breathe and enjoy life.

My wife. Honestly she is one of the hardest working people I know and she goes the extra mile to make sure I am happy in life. She pushes me to be a better person and supports most of my decisions. After being apart for 8 years, I appreciate everyday I come home to her.

Family. I am thankful to be living closer to my family now so I can be a part of my nieces lives as they grow up and have my family’s support or support them if needed. Whether a family member is still here on Earth or have gone, every member of my immediate and extended family has had a genuine impact on my life.

My brother, Brad Frost. Without him I probably would be working some shitty job that I didn’t enjoy. Thankful to be able to work with him and enjoy it, whether it is building websites, design systems, or workbenches.

Friends. You guys inspire me everyday, whether you are getting your PhD or successfully trudge your way through a rough patch in your life. Keep the positive attitude and always do the right thing.

Travel. I am grateful to have visited some amazing places over the past year. I took a road trip with my wife from LA to Seattle in 8 days, visiting a bunch of breathtaking national parks along the way. I got to go to the Outer Banks with my family. Seeing the world makes you a better person.

Work that I enjoy. I moved to Pittsburgh 3 days before my wedding 2 summers ago, scared shitless that I wouldn’t find a good job. It has been quite the transition from meteorology to web design, but I have enjoyed every minute of it. It’s pretty awesome to say you’ve built a website with a client in the center of Times Square and that you’ve helped build a design system for one of the largest companies in the world after such a short time in the field.

Basic needs. I have an apartment, food, clothes, and a mode of transportation. Some people aren’t so lucky. After getting back from San Francisco recently, it was sad seeing how many people don’t have these basic things.

Education. You never stop learning. I am thankful to have gone to college for a subject I loved. I am thankful for the books I have read that have helped me transition from meteorology to web design.

Failure. Weird to be thankful for it, but failing in life has allowed me to become a harder working individual.

Open mind. I am happy that I am laid back and respect someone for who they are as long as they respect me. With the recent escalation of hate, I am happy to be raised in a manner where race, gender, sexual orientation, religion, and disability do not make a person any less important.

Ability to listen well. I suck at talking. I mumble and take a while to spit out a story. But I am a good listener. If you try to teach me something, I will likely listen hard. If you have an opinion different than mine I’ll listen. If you are struggling with something, I’ll listen and try to help.

To these web people who have taught me a lot about web and life this year:

  • Dan Mall – Friend, coworker, and smart dude. Honestly privileged to have worked with you and hope to continue to work with you. Thanks for putting up with me.
  • Josh Clark – Friend, coworker, and smart dude. Privileged to have worked with you and hope to continue to work with you. Thanks for putting up with me.
  • Matt D. Smith – Friend, coworker, another smart dude. Privileged to have worked with you and hope to work with you again. Thanks for working with me.
  • Dave Olsen – Friend and collaborator on Pattern Lab 2 (PL PHP guy). One of the nicest guys who seems to enjoy hiking as much as I do. Thanks for being a good and helpful dude.
  • Brian Muenzenmeyer – Friend and collaborator on Pattern Lab 2 (PL Node.js guy). Super nice and bright guy. Just don’t ask him where he’s from. Thanks for your help and being a cool guy.
  • To all authors of books/articles I have read about the web, thank you for sharing your knowledge.
  • To all speakers at conferences I have gone to, thank you for your web and life lessons. I learned a lot from you. I have written about those speakers here at Web Design Day and An Event Apart San Francisco.

An Event Apart San Francisco 2016: Lessons Learned

After Web Design Day in Pittsburgh, I wrote about my personal takeaways from the web conference. So I am going to do the same thing with An Event Apart San Francisco.

This is my second time to San Francisco and, I must say, it feels weird. My first time here was for a research meteorology internship with Naval Research Laboratory, when I rode a research vessel out of San Francisco Bay into the Pacific Ocean. This time I come back as a front end web designer/developer. After seeing the sights on Sunday, it was time to sit back and absorb as much information as possible from the speakers.

My general takeaways were similar to the those I had at Web Design Day (maybe since a few talks were similar), but with additional ones. Here they are:

  • Empathy and respect towards a user keeps coming up as a very important topic. We should treat the experience we are creating on the web as an experience that leaves both the developer and user satisfied. After all, we are designing and developing for humans and humans have emotions.
  • Accessibility remains a relevant topic within designing and developing a website. Even though a designer or developer might not have a disability, designing and developing for someone with a permanent or temporary disability is vital for them to have a good user experience.
  • Diversity in who creates the web is very important. Everyone has a different story and a different perspective on issues just like every user.
  • The user’s opinion can matter more than the opinion of the company/client. After all, the user can represent the audience better than the CEO, developer, designer, etc.
  • Technology continues to evolve and allows for more opportunity in the years to come. Embrace this and create with these in mind.

These are only some of the lessons learned, but by using these in your web work, you can improve your own practices and your website’s user experience.

Here’s a more in depth look at each each speaker’s talk:

Jeffrey Zeldman

Jeffrey started off the conference by explaining how the web used to be and comparing it how the web works now. He specifically went into the book he wrote back in 2003, Designing with Web Standards (3rd Edition), and compared it to how the topics brought up in that book stand up to the standards of today’s web. For the most part, the standards discussed 13 years ago are similar to today’s standards, with only a few tweaks here and there. This just goes to show you that although the web is ever changing, concepts we come up with now can continue to be relevant in the future.

Sarah Parmenter

Sarah went into depth about branding, a process many people link to only the logo. There is a lot more that goes into branding, including the voice and tone, guidelines, consistency, and others. It’s the way the company represents itself as a whole instead of just slapping on a logo that has nothing to do with the message of the company. She used examples like Airbnb to show how they rebranded once they became more than just a “couch surfing” organization. There were a lot of points that you don’t think of when you look at the branding of a company.

Krystal Higgins

Krystal discussed the importance of creating a separate experience for new users, but one that works with the consistency of the brand. One of the most important things she mentioned was to cater the experience in way that efficiently explains or shows the user what to do. Getting first-time users to subscribe/register for your product is important, but retaining them down the road is just as important. She also went into detail about how to create these onboarding processes, mentioning ways like guided interaction, free samples, and personal focus. Guided interaction helps the user follow along with the new process, free samples feel like this new product will be worth it, and personal focus feels like this product matters to you personally. A lot of these are things I never thought about more than just slapping a few alerts on a new user page.

Jen Simmons

I had the opportunity to listen to her at Web Design Day in Pittsburgh and many of the concepts were the same. Jen describes how web designers and developers have fallen into web layouts that are quite boxy and very similar to each other. She went into the design of books, magazines, and objects we see in everyday life and mentioned that there is a lack of this creative design in web work. Jen then went into layouts and how the way we layout websites over the years has changed and that it is about to change even more with CSS Grid Layout. Grid will allow flexibility with design (moreso than flexbox) that can take us back to the creative designs we have seen in old magazines and patterns we see everyday. Grid is on track to come out sometime next year and in my opinion, is a very exciting new adventure since CSS layouts have always been a little fuzzy to me.

Jen also presented a workshop in CSS Grid Layout, which was very helpful in the specifics that we will need to know when Grid officially arrives. A lot of the layouts reminded me of Microsoft WordArt (in a good way), formatting titles in a way that can be positioned vertically and to the left of the rest of the content with no problems. She also went into the history of language and the layouts used to portray these languages.

Rachel Andrew

Rachel went into CSS Grid Layout a bit more in depth, showing more technical aspects of it and taking layouts from everyday items and creating them using Grid in experimental browsers. She also went into ways we can use Grid in a way that has fallbacks that will look solid still when Grid isn’t supported in an older browser. Very insightful as to what to expect when working with Grid in the future.

Brad Frost

The first time seeing my brother speak in person was a good one as expected. After a long day of absorbing information from brilliant minds, he presented in a way that was both educational but funny to keep the audience’s attention. Brad went into the depths of Atomic Design, a process in which smaller components make up larger components that make up even larger components. For the short time I have been in this field, this is the way I learned and have approached many of the projects I have done. This talk solidified the reasoning as to why I have built websites using the principle of Atomic Design.

Jeremy Keith

Jeremy’s talk dove into evaluating technology, going through a history of technology and how the best technology isn’t solely created from nothing. It evolves. Technology is built on prior technology and so on and so forth. That is how technology improves. He showed us how certain technologies can be cool but not necessary and included a picture from the 1990s of a selfie stick with a camera well before the explosion of the smart phone and well before the selfie stick became popular over a decade or two later. One of my favorite quotes from his talk was one from Grace Hopper stating, “Humans are allergic to change.” I feel like it not only represents how humans struggle with change in technology, but with life as well. Jeremy went into detail about service workers and web components and how these are great tools. He also discussed the importance of “how well do tools fail,” since this is important in web development when browsers don’t support certain tools. All in all, I learned a lot both in web development and life from this talk.

Val Head

I have listened to Val talk about animation before at a local meetup since she is based here in Pittsburgh and she definitely knows her animation. Val went into the proper way to use animation in web design and development and how to persuade your company to use animation. She also discussed the tools she uses to design animation as well as the pros and cons of these tools. Val also emphasized the importance of storyboards and sketches and how these can be portrayed to the company rather than just describing the animation and having an opinion on it. She made me realize that showing something to a client speaks volumes compared to just saying what you want to do.

Jason Grigsby

Jason’s talk was about how responsive web design has helped to change the way we interact with content. The content changes in response to the viewport size, but when it comes to a click, tap, swipe, etc., the web has a harder time differentiating these. Jason went into the future of the web and how we may adapt to these different input changes in the best way possible. With the addition of virtual reality and other impressive technological advances, the web will have to continue to change and folks will need to get out of their comfort zone to adapt. A very insightful talk that made me think about the future and how things are ever-changing.

Derek Featherstone

Derek discussed the importance of accessibility. He included the audience by having them read a form with only the use of a straw sized hole in their hand. I, personally, find that it is difficult enough dealing with form fields let alone doing it with low vision. This was a perfect example of how to design for folks who are dealing with everyday or temporary handicaps. Derek also described how design can even look better when you have accessibility already in mind. It doesn’t even take a diagnosed handicap to get frustrated with the web as I’m sure we all know. Designing for ease of use for everyone is very important and decreases this frustration. After creating a design system recently with accessibility in mind, this talk definitely was relevant to me and a solid one.

Eric Meyer

I had heard much of Eric’s talk here in Pittsburgh when he came for Web Design Day, but there were some new topics discussed. Eric went into depth about how designers and developers need to stress test ideas and sites. Although we may have a picture of who the user is in our heads, we will likely have some in an audience that don’t fit this persona. Eric gave several personal examples of this and explained how it can deter people from returning to your site or using your application. Empathy is a huge part of web design and development and by thinking about the user we can design and develop our sites and applications better. By speaking the user’s language and catering to their mood, we can create better experiences.

Gerry McGovern

Gerry’s talk was the funniest of the talks as I was almost in tears during it. It was like a stand-up comedy routine, but with very important lessons included as well. Gerry went into detail about how companies’/clients’ hierarchies of tasks are most times different than the users’ hierarchies, and usually the user is who you want to pay attention to. He showed surveys that he helped with where companies had one idea but the users had another. When the company changed its mindset, the user not only had a better experience but the company itself did better. My favorite quote was “if you solve the customer’s problems, they’ll solve your problems.” After all, it is the customer who uses what you create and if they’re frustrated or delighted, that’ll reflect on the company. A brilliant talk and a great way to end the main part of the conference.

Thank you to all the speakers for all of your hard work and sharing it with us!

1 Year Anniversary Working For Brad Frost Web

Exactly 1 year ago today, I started working for my brother, Brad Frost. It could’ve gone two ways:

1) I fall into place in the wonderful world of web design and development.

2) I crash and burn trying to figure out how to build websites.

Thankfully, I fell somewhere in between. I get the general gist of HTML, CSS, and JavaScript and try to do good work, but I can sometimes crash and burn along the way to get there.

You would think transitioning from my childhood passion and eventual career of meteorology to the land of web design and development would be difficult, but it has been easier than expected. Not easy, just easier than expected. Thankfully, I get to sit beside an intelligent individual most days who is willing to help me out when I can’t find an answer online (Stack Overflow, Codepen and CSS Tricks, I thank you). I get to read articles and books by other witty web folks who are also willing to lend a helping hand. All in all, I thoroughly enjoy front end design.

What is it like to work for my brother?

It has been great. Not to say that there hasn’t been the occasional butting of heads, but it comes with the territory. I don’t have to go into work at 3am anymore and I work from home when he is out of town. We can work outside if we want and the Deli on Butler Street keeps us energized with sandwiches and Turner’s Iced Tea. I also realize how busy him and his wife, Melissa, are. Not sure how they get everything done. I’m not sure they know how they get it all done.

What projects have I worked on this past year and what am I currently doing?

1) Learned web design/development

Used codecademy, books, and tips from Brad and others to learn web design and development. My experiences with the projects I have had the opportunity to work on also really helped. I feel like getting thrown into the fire is the best way I have learned web design and development. I continue to learn everyday.

2) Death to Bullshit

deathtobullshit.com was my first actual project that I helped work on with Brad that involved CSS, HTML, and JS. It’s a website that essentially addresses what not to do when it comes to popups, advertising, and all of the other bullshit that takes the user away from the content he or she is actually there for. The site intentionally loads as a vanilla black and white page, but there is a lovely “Turn bullshit on” button that first pops up an alert making sure you want to turn it on. If you dare turn it on, the fun begins as popups and absurd bullshit populates your screen. I learned what to do when building websites by creating what not to do on websites.Screen Shot 2016-08-03 at 11.54.10 PM

3) Frost Finery

My first client just so happened to be my sister-in-law, Melissa. She had started a jewelry business and needed a good looking site to market her jewelry. Brad set up the bones of the project and allowed me to do most of the lifting when it came to the rest of the development. This was my introduction to Pattern Lab (PL), which I didn’t completely understand at the time but eventually got the hang of it.  It was also my introduction to Mustache, JSON, PHP, WordPress, and Grunt. I used PL to set up the structure of the site and PHP to actually build the live site that sits there today. I learned a lot about lazy loading images as well as flexbox and grids. I also learned that SVGs can be tons of fun to work with…Screen Shot 2016-08-03 at 11.55.24 PM

4) Styleguides.io

I didn’t create the site styleguides.io, but I am the one continuously adding articles, tools, podcasts, and examples relating to style guides. Brad sends me the link and I write the YAML and Markdown to include it on the site. If you are building a pattern library or style guide for your own or client’s site, this is definitely a good place to start to see examples.

5) Pattern Lab 2

Started working on redesigning the website (1st image) that the new Pattern Lab would be available on in the fall which ended up getting redesigned another time or two until we felt it was right when we launched it last month. This was my introduction to Jekyll and how it differed compared to WordPress sites. This was also my introduction to Dave Olsen and Brian Muenzenmeyer, two very intelligent web developers and brains behind the functionality of PHP and Node versions of PL2. Along with the website redesign, I also built most of the demo (second image below) of PL2 as well as a few of the starter kits that will come out at a later date I believe.Pattern Lab Website

Screen Shot 2016-08-03 at 11.57.07 PM

6) Verywell

Verywell.com started in the winter and carried into the spring. It was my first time working with a client outside of my family. Verywell is a health site by about.com based out of New York City. I had the opportunity to work with their designers and developers both remotely and in Times Square to build the site. I also had the opportunity to work with Dan Mall and Josh Clark, two cool cats who are also super friendly (pun intended for Dan’s company) and super smart with the web. I learned a lot about XML and Java as well as search engine optimization and what it takes to launch a larger site. I am thankful for the opportunity to work on Verywell.
Screen Shot 2016-08-04 at 12.02.16 AM

7) Atomic Design 

A little design work and tweaks for mainly the edits branch of Brad’s book Atomic DesignThe yellow highlight was my doing. Nothing big, but thought it should be mentioned.

Screen Shot 2016-08-04 at 10.35.10 AM

8) Hometown Business

I am currently finishing up the new website for a business back near my hometown of Oil City, PA. This is my first project building everything on my own. I am learning a lot about domain names, web hosting, and the amount of work it takes to build a site by yourself. I have also learned more recently how I should’ve used BEM CSS structure instead of SMACSS.

9) Large Company Design System

I am also currently helping to build a design system for a huge corporation. Can’t say much, but I can tell you I’ve learned a lot about thinking carefully about flexibility of components and front-end markup and CSS structure. In these early days of the project I have learned so much and am looking forward to learning more.

10) Web Design Day

I got to attend my first web design conference this year and it just so happened to be in Pittsburgh. Was a pleasure learning so much from web experts and meeting new people. Here’s what I learned.

11) Yard work, cleaning, errands, etc.

When working for your brother, you tend to get sucked into doing some grunt work. While working for Brad Frost Web, I have helped close in basement stairs, built 2 tables out of an electrical spool, rebuilt a brick patio, rebuilt a raised garden bed, planted grass seed with the help of Scott’s PatchMaster, built barriers so groundhogs couldn’t get into Brad’s yard, and other things. I also help watch Ziggy, the bulldog who gets treated like a king. The little free time we do have, we are constructive with it. I enjoy taking a break from the computer screen to get some fresh air and help out.

12) Jamming

If there is one thing a work day should end with, it is music. Yes, Brad and I played in a band together when I was 13 and we get the opportunity to after many work days. It is a good stress reliever and just a good time.

What I plan on doing this next year: 

1) Finish my current projects

2) Read more web design books and articles, because I didn’t read enough this past year

3) Redesign my website, because I know it is hard to read this without wanting to redesign this site

4) Other projects that eventually pop up on the radar.

5) Ask less questions and continue to work hard

6) Figure out what makes me most passionate about web design and development. Figure out where my place is within this field.

Thanks to all who helped make my first year making web stuff a fantastic one!

Pattern Lab 2: The Next Generation

Spread the word! Pattern Lab 2 has finally been released after 2 and a half years of progress. While working for Brad Frost I have had the privilege of working on parts of this project for a little less than a year, including building out a few of the starterkits, assisting with the patternlab.io website redesign, and the PL2 demo. I’d first like thank Brad, Dave Olsen (the PHP PL man), and Brian Muenzenmeyer (the Node PL man) for allowing me to work with them on this. Without further adieu, here is what is so hip about Pattern Lab.

What is Pattern Lab?

Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles. It was originally created by Brad and Dave for PHP, but has since been transformed into Node thanks to Brian. From personal experience, it is a tool that really makes you think about what you are putting into your website instead of adding a random component or pattern here and there and really losing consistency throughout a site. Reusability is one of the great things with this system.

View All section of Pattern Lab

Screen Shot 2016-07-13 at 11.33.06 AM

Dashboard Page built with compnents from above in Pattern Lab

Screen Shot 2016-07-13 at 11.34.26 AM

What is new with Pattern Lab 2?

Lots of stuff, really. I’d say one of my favorite parts to Pattern Lab 2 is the ability to add documentation, something which has really increased in importance over the past couple years. You simply add a markdown file with the same name as the component and feel free to write whatever you want about the pattern, but I suggest the description of the pattern, explaining why you use it, and why it is important to the site/pattern library you’re creating or the client.

Screen Shot 2016-07-13 at 11.22.18 AM

Annotations also add a great way to document each pattern.

Annotations and code displayed on Dashboard Hacked page

Screen Shot 2016-07-13 at 11.38.00 AM


Other features include plugins that extend the ability of Pattern Lab, support of YAML in addition to the original JSON, and the power to use pseudo-patterns, pattern parameters, pattern states, and styleModifiers. Starter kits of tools also allow for a more comfortable experience while building your pattern library and/or website.

Finally, you can customize the skin of the actual pattern library as well as change the names of the atomic elements (i.e. atoms) to whatever works best for your company, client, or workflow.

Why use Pattern Lab?

  • It’s FREE (Hooray!)
  • It is a quick and thorough organizational tool that can help you not only build websites, but a pattern library itself.
  • You can have components living and breathing in code within minutes rather than strictly writing comps over and over.
  • It keeps your website consistent and decreases the amount of code you use with a reusability factor.
  • PL2 is more than just a pattern library, but a great starting point to creating a style guide.
  • It is customizable so one PL2 user’s site and pattern library can look totally different than another user’s site. Flexibility is key and can allow for a unique design instead of the same old website you see everyday.
  • You can contribute as you find new ways to improve Pattern Lab from your personal experience.
  • I’ve only been doing web design for about a year and I can use it efficiently. That is saying something.

Where to Download PL2?

You can download PL2 for free from the Downloads page on Pattern Lab’s website.

Lessons Learned From Web Design Day 2016

I finally got the opportunity to attend my first web design conference in my short career as a front end designer. I had been to several weather conferences as a meteorologist, so I was interested to see the difference. This was definitely different and I was not disappointed.

Web Design Day has been put on by the awesome Jason and Val head in Pittsburgh for the past 7 years. I am thankful to them for giving new web designers, like myself, the opportunity to dig into the web world in a laid back and comfortable environment. I met some good people and I learned a lot about the web community and about myself on Friday.

My main takeaways from all of the talks:

  • Communication is key to any project
  • Use empathy while communicating/expand your perspective
  • Be passionate about what you are doing
  • Patterns/Design systems have become more important
  • The web is ever changing. Find the most efficient/logical ways to design/develop

Here are my thoughts on the individual talks:

Jen Simmons

Jen Simmons started off the list of speakers with an awesome talk about designing web layouts in CSS. She discussed the evolution of layout and showed examples of how this evolution has improved and will improve. She also described how the web has become a very “block-like” form of media and how we should look at print media to shy away from this uniform look. Jen did a great job going into various tools and upcoming CSS that will help to accomplish this. One of these CSS methods was the CSS Grid Layout method, which won’t be out for a little while but reminds me of flexbox on steroids. Instead of thinking of columns like layout in the present and past, it’ll focus 2 dimensionally. This talk was explained so a web designer without a year of experience could understand. What a fantastic talk.

Sharon Steed

Going from Jen’s talk to Sharon’s talk was fitting. Jen’s talk was more technical going into actual code on how to design the web, but in a way where the audience could understand. Sharon’s talk was about talking to humans, something that is very helpful to know how to do both as a web designer/developer or as a human being. She used her personal experience to show how she realized what ingredients go into good conversation, including the biggest ingredient: empathy. Thinking of the other person in the discussion as important as thinking about how you portray your story. I learned a lot about myself and how I need to communicate better in everyday life and within the web community. After attending weather conferences in the past, this would be a great talk for those since much of that material went way over my head. A very inspirational talk, indeed.

Aaron Irizarry

Aaron spoke about the good, the bad, and the ugly about managing design teams. He tied this into project management as well. A lot of what he discussed came down to communication with teams, which was fitting after Sharon’s talk. This talk made me think about my personal experience with project managers and how communication makes a huge difference. Some of the project managers I have dealt with are very good with this while others are poor. Aaron discussed how being a design manager is a battle between sticking up for your design team’s decisions and being open to ideas from the other teams in the project. It gave someone like me who is less experienced a better understanding of what goes into good project and design team management.

Kate Daly

Kate went into detail about how to design websites using a story. It is easy as a web designer/developer to think about a website as just another project when you should think about it as a story. Story mapping allows you to find out the message you want your site to portray while also asking questions about what is motivating you to be a part of the project. Exercises include using Post-its and asking questions that would give you a better understanding on your audience and how to communicate your site’s material with your audience.

Eric Meyer

Eric went into detail about designing with the thought of the user. The Internet is not just a place that people visit, but it has become a part of their everyday lives. Eric used his own personal experience to show that you need to think of your audience while designing a site, including the minority of users that may use your site. He explained that you need erase the tunnel vision of seeing that one user and expand your spectrum into the users that will stress test your site. This along with compassion for the user will help the message of the site better communicate with the user. Definitely a very touching and a very educational talk.

Caitlin Steinert

Caitlin discussed the coalescence between her love of knitting socks and the rigors of JavaScript. She explained how CSS and HTML came to her fairly easily when she started as a designer/developer, but JavaScript posed more difficulty. It wasn’t until she wanted created a tool to measure socks for knitting when she finally found motivation to learn JavaScript. From then on, she learned more JavaScript to continue to improve her tool. This definitely hit home with me since JavaScript is one of the more difficult of the languages to work with. It also struck a nerve since I’ve talked about how getting down and dirty with coding helps you to learn, and motivation to do that also helps.

Smitha Prasadh

Smithia discussed the relationship between classical music and user experience/teamwork. She explained how her love of music has helped her with web design and how there are similarities with teamwork in orchestras and web projects. She also related classical music to web design with the fact that finding patterns in classical music is helpful like finding patterns while designing your own websites. This not only was a brilliant comparison but really spoke to me since I have been helping a little bit with Pattern Lab and saw the similarities. Like Caitlin’s talk, Smithia’s motivation made it easier for her to understand web design.

Bridget Reed

Bridget discussed her experience within the design world from when she got fired from her first design job to her current recent hiring. It was an inspirational talk about the obstacles she had to go through during her career in order to find success within the design world. Her drive and willingness to strive for success allowed her “unlucky self” to finally find a contracting job at the end. Despite her trials and tribulations, she made the talk positive, funny, and inspirational for those of us starting out in this field.

Robert Jolly

Robert explained the importance of accessibility within the web. He discussed his own personal experience of how a temporary injury increased his need of accessibility with websites. Even if we are the healthiest person right now, we won’t know if injury, disease, or a disability will impact our lives in the blink of an eye. The best idea is to incorporate accessibility in all websites to help those who need assistance at all times or just for a temporary amount of time. It is easy to overlook that sort of thing while making a website, but hearing this will definitely make me pay closer attention to accessibility with the web.

Karen McGrane

Karen discussed the difference between responsive design and adaptive design and the when to use each. Responsive design is just a manipulation of the current content on the page depending on viewport size while adaptive design uses the server to figure out the best information to deliver to the viewport size. She also described the ways that adaptive content can be served a certain design type, but that it usually isn’t necessary. It was a good talk showing that while adaptive design is nice, it rarely needs to be used. While our world dives deeper into different devices, it is good to hear how the web continues to become more flexible.

Jina Bolton

 Jina went into depth about her experience with designing a design system. As the web continues to get faster, reusability of patterns continues to grow in importance. Jina not only went into the various patterns within the Salesforce Lightning Design System but elaborated with documentation behind why they used the patterns that they did. While clients may care about the patterns that are used within the site, they are more concerned about why these patterns are used and how they may improve their business. It was great to see a breathing design system and how it functions compared to Pattern Lab which I am more familiar with.

From Weather To Web Design: 6 Month Front End Design/Development and Working With Brad Frost Anniversary

Februrary 4th marked my 6 month anniversary of working in the web design/development field. I would have waited for the 1 year anniversary, but in the web field you realize that things develop very quickly (no pun intended). February 4th also marked the anniversary of working with Brad Frost, my older brother and one of the faces of today’s web. I am forever grateful to him for giving me a chance to work in this field that I had little experience with before. Here’s the scoop with how I got here, what I have been doing, what I have coming up, and my advice for those of you new to web design/development.

How Did I Get Into Web?

I got my B.S. from Penn State University in meteorology. I graduated and got a job with MDA Information Systems in Gaithersburg, MD as an operational meteorologist, forecasting for stock traders, utility companies, and agriculture companies. I worked there for 4 years and decided my girlfriend at the time was worth marrying. I left my job, moved to Pittsburgh, and got married to my wife all within a 4 day period. I looked for meteorology or any related jobs in the field for 2 years in the Pittsburgh area prior to moving and realized 1) weather jobs in Pittsburgh are few and far between and 2) anything related to meteorology you needed a more specific degree (i.e. environmental engineering). I also went as far as taking civil service tests in case all else failed. Time was running out before the wedding and I needed something.

Enter my brother, in Germany at the time, at 2am on Facebook one night while I worked a night shift at my weather job.

Brad: “Hey. Have you found a job yet?”

Me: “I’m waiting to hear back from a few places. Hoping something comes up”

Brad: “Well you get married in like a month. I might need some help so you could possibly work with me for a bit.”

Me: “Thanks. I’ll keep that in mind in case I don’t find anything.”

The interviews I waited on or had failed in various ways. Being the type of person who would rather get bailed out by family or friends, it was tough accepting my brother’s offer, but it was an opportunity I was willing to try. I had some programming experience in Visual Basic, C++, and Fortran from high school and college and thought about going to college for computer science. But coding in the real world was frightening to think about. I had 3-months to test the waters. Something must have gone right since it is 6 months later and Brad hasn’t kicked me to the curb. The good news: I enjoy web design/development. Do I miss forecasting weather with good people? Yes. Do I miss waking up at 2:30 every weekday morning to get paid so-so in a place I didn’t want to live that was 3 and a half hours from my wife? No. Do I think there is more opportunity in web design/development? Absolutely.

What Have I Done So Far?

What do I do exactly? I basically help create websites by coding the structure, style, and functionality of what the user experiences. My brother wrote a good article about what I help do. How did I start and what have I been working on?

  1. Codecademy. I worked my way through HTML, CSS, and Javascript classes.
  2. Brad’s advice in addition to Codecademy also helped.
  3. Death to Bullshit. Brad’s brainchild of a site that has simple black text, clunky blue links, and a simple design. Turn bullshit on. I helped make that annoying content you see now. We used vanilla Javascript which is good and probably allowed this site to load quicker than most sites despite having more ads. Yes, my first website I had a hand in coding was how not to make a website look.
  4. Frost Finery. My sister-in-law needed her jewelry company’s site redesigned. This was the first project that I developed mostly on my own with some assistance, clean up work, and tips from Brad. This was also the first full-site redesign I ever did. This was my first experience using WordPress in-depth, PHP, Mustache, JSON, JQuery, and Pattern Lab. I learned a lot from this site.
  5. Pattern Lab. I’ve been in an on and off relationship with this website redesign for a little while now. I’d imagine this site will get done before the end of the year. It has allowed me to get more practice in with straight up HTML, CSS, and JQuery. Also, I got experience with writing YAML and markdown. I have also assisted with adding some features that Pattern Lab 2.0 will come out with when the new Pattern Lab tool is released.
  6. First client project that isn’t a family member. Currently working on a site for a company out of Times Square in NYC. Can’t disclose details, but I got to visit their office where it always feels like the afternoon thanks to the bright (and annoying) lights of Times Square. First project with a bigger client. First time working with their designers/developers/project managers in a team. First time working in XML and Freemarker. First time with a legitimate deadline.
  7. Brad’s personal projects. For those of you who know him, he always has something brewing. I have been helping with the design of one of his personal projects. Need to learn more about Node.js to help with more. Brad’s other personal projects include helping him reseed his lawn, redo his brick patio, build hammocks, and shovel dirt. It’s a good break away from the computer screen.

What Do I Have Planned?

I have felt like I have done a lot in 6 months and it looks like there are some potential bigger client projects ahead to help work on. Finishing the new Pattern Lab site redesign is also something that needs finished. I also really need to redesign this site.

My Advice If You Are Newer To Web Design (Like Me)

  1. Use Codecademy or some type of tutorial/class to get started in a language. I suggest starting with HTML, then moving to CSS, and then Javascript. If you are looking to get into Ruby, Python, etc., more power to you (Codecademy also has these tutorials).
  2. Read books. Read Articles. Follow Successful Web People. Reading books is good, but can be a little out of date with web design. Articles are usually more up-to-date and following smart web folks on Twitter can be helpful.
  3. Dive in. Fail. Learn. Fix. Remember. My best advice is to just dive into a project, make mistakes, learn from your mistakes, and fix these mistakes. I have learned that the more projects I do, the more I remember certain best practices. If you want to test something out, Codepen is a great place to design and develop quickly without needing a server set up.
  4. Ask questions. My brother probably hates me for asking so many questions (I hope I am getting better at this), but in all honesty it helps tremendously. From what I have seen, the web community is open about best practices and will gladly help you if you hit a snag.

If you are interested in front end design/development or have any questions feel free to contact me on Twitter. I’ll gladly help you out or point you in the right direction if you need help with something. Thanks for reading!

From Weather to Web Design: A Detailed Look Behind The Redesign of Frost Finery

When I was brought on less than 3 months ago to work for Brad Frost Web, I was expecting a challenge and sure enough I got one. Learning web design and development has not been an easy task, but I have had a great teacher in Brad Frost. I am very grateful for the opportunity to work for my brother and was excited to take on the challenge of redesigning the website for Frost Finery, my sister in-law’s awesome and unique jewelry company. As promised, I will go into a more in-depth analysis of the components that made up the redesign, including:

Pattern Lab and Atomic Design

Pattern Lab was an idea created by Brad Frost, Dave Olsen, and others in the web community consisting of a collection of tools that helps keep the design of the website consistent across the entire site. Pattern Lab goes hand-in-hand with the atomic design concept that Brad is currently writing a book about. Atomic design consists of atoms, molecules, organisms, templates, and pages, where a group of individual atom components makes up a molecule, a group of molecules make up an organism, and so on until we reach the final page phase. Both of these helped quite a bit with designing Frost Finery.

With Frost Finery, we had 2 separate sites, a Pattern Lab site (which consisted of the general layout) and a WordPress site that contains the actual content that appears in the final product on frostfinery.com. Pattern Lab consisted of using HTML elements as well as Mustache, JSON, and CSS. Mustache is a template system that allowed me to use atomic design to include organism level pieces into the template and into the final page while JSON allowed me to include the data that shows up in Pattern Lab. CSS was used to actually style the contents of the site.  Below is an example of how we used Pattern Lab and atomic design in the Collections page, where:

  • atom = navigation button (i.e. Shop)
  • molecule = navigation list (i.e. group of Shop, Collections, Custom Work, etc.)
  • organism = the header navigation
  • template = the page layout (as seen)
  • page = includes the template with the actual content that the user sees.

Screen Shot 2015-10-26 at 12.52.02 PM

Using Pattern Lab and atomic design together makes life easier for the designer to see the layout before replicating this into the WordPress site. Being that WordPress uses php and not mustache/JSON, I had to learn php to create the actual site itself, which sounds easier than it actually was.

WordPress, the Plugins, and All of Their Glory

WordPress is a great tool to use for creating a website for a client who needs a straight forward way to include content on their page. However, learning php took a little bit of time, but once I got the gist of how it worked it was great to use. Along with php, WordPress also allows you to download plugins, which help when it comes to designing the site and giving the client an easy way to locate the right data they need to update. It also allows the client to manipulate how they want to display their information on their site. Some of the plugins we used were:

  • Advanced Custom Fields – Allowed me to create different sections for Frost Finery to organize its Jewelry, Events, and Shops. Allowed me to target different elements in php easily. Screen Shot 2015-10-26 at 1.26.13 PM
  • WP Migrate Pro – Allows me to pull down the latest information from the remote site to the local site. Somewhat similar to Git Tower, but for WordPress
  • Admin Columns – Customize the backend of the site in Admin to display in an organized fashion. Makes it easier for Frost Finery to find its different itemsScreen Shot 2015-10-26 at 1.46.47 PM
  • Simple Custom Post Order– Allows Frost Finery to reorder her items in the Admin of WordPress to display on the front end. Great for her Jewelry section.
  • Contact Form 7 – Allowed me to create a functioning contact form relatively easily displayed on the Contact Page
  • Instagrate to WordPress – Allows Frost Finery to post to Instagram and it will post onto the blog section of Frost Finery as well.
  • Regenerate Thumbnails – A godsend when I changed the images max-size on the page so it would load faster. Instead of having to upload the images again, I could resize them using this tool.

All of these plugins were extremely helpful in creating the Frost Finery site.


Another example of a language I had to learn from scratch. Being that Brad and I used vanilla Javascript for Death to Bullshit, JQuery was new to me. Because the first design of the site included jQuery, we decided to continue to use it. I have learned to try and stay away from jQuery being that it takes up a decent chunk of space causing the site to potentially load slower. JQuery was definitely a useful tool to learn and provides the functionality of each page on frostfinery.com. We used jQuery for the click events on jewelry items, displaying the panel when jewelry item is clicked on, scrolling to a certain location on the page, and adding/removing classes/ids/elements from the HTML of certain items.

One of the biggest issues was the amount of lag on the Collections Page due to the size and amount of photos. I added max sizes to the images but also used jQuery to not load in any images on the panel under the thumbnail until clicked. This reduced the size of the page from 8MB to 1.2MB.

Other New Tips and Opportunities

Along with the other firsts discussed, this was my first time dealing with a client (it helped that she is my sister-in-law). I quickly realized that you want to make the client happy but also compromise on certain issues. I can see how this could become a heated battle between designer/developer and client in the corporate world.

This was my first time also dealing with the <picture> HTML element, allowing different pictures to display on different-sized screens depending on the viewport width breakpoint. Writing php was difficult for this, but I eventually managed to get it working. I also learned of the picturefill script so this works on all browsers. Below is an example:

Screen Shot 2015-10-26 at 2.37.10 PM

Large Screen Homepage Image

Screen Shot 2015-10-26 at 2.36.49 PM

Medium Screen Homepage Image

Screen Shot 2015-10-26 at 2.37.25 PM

Small Screen Homepage Image


Git Tower was used again with pushing and pulling the latest versions of the site. Git Tower is great when 1 person is working on an issue, but Brad and I had out fair share of struggles when it came to tag-teaming the site on the last day before the launch. Certain stylings were getting deleted and older versions of the site were popping up. Thankfully with Git Tower, the paper trail of changes we made allowed us to fix these issues eventually. Such a love hate relationship.

Let the Good Times Roll

It was such a pleasure working on Frost Finery’s site, especially as my first redesign of an entire site. I learned a lot and had fun while doing it. It helps that I had a good teacher in Brad and someone who let’s me figure stuff out unless I desperately need help. Thanks for letting me share the details of the redesign with you. Go buy some Frost Finery jewelry and take care!