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.

JQuery

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!

From Weather To Web Design: Frost Finery Site Has Been Launched

After less than 2 months of working on my first big website redesign for my sister-in-law’s jewelry company Frost Finery, it is finally complete.

It has been less than 3 months that I have been designing/developing websites, but I feel like I am chugging along with a heck of a lot left to learn. The redesign of the site allowed me to learn quite a bit, including:

I will have a more in-depth discussion about these bullet points on Monday. Looking forward to discussing this and pushing onto the next project. Have a great weekend!

From Weather to Web Design: The Experience of Creating the Death to Bullshit Site

I have now worked for my brother for about 3 and a half weeks. After learning quite a bit about HTML, CSS, and JavaScript via Codecademy and my brother Brad Frost in about a week and a half, I walked into my first website design (minus Word Press) called deathtobullshit.com. This project definitely interested me since it relates to every single web user out there, taking simple content and adding a bunch of needless advertisements, popups, animations, clickbait, and other shenanigans to ruin the user experience.

The Experience

At first, Death to Bullshit looks like a simple site, explaining what bullshit is and the issues with displaying it on the modern web. The other area of the simple part of the site is the blog, hooked up to Tumblr and displaying many articles, quotes, and other posts discussing advertising and other design principles relating to the amount of rubbish on sites nowadays. Both of these display only the content with links to the various articles on the blog. That’s about it. Then you glance at the Turn bullshit on? link in the top right corner…

…You click on the Turn bullshit on? link…

You are first warned: “Are you sure you want to turn on the bullshit?”

You have the option of clicking OK or Cancel. If you value your sanity, you’d click Cancel. But in this case you want to dive down the rabbit hole, so you click OK

Hold onto your butts…

The site goes from the blandness of a mostly black and white site to a colorful world with style, similar to the Wizard of Oz, if the Munchkins in the Wizard of Oz were obnoxious advertisements and animations.

You are greeted with a banner advertisement at the top…that is also a carousel to make life that much better for the user. But wait...there’s the delayed popup. You better click the Like button or else you will be judged harshly.

Once you get rid of the popup you finally get to see the content…sort of. The Turn on bullshit? link has also become a bright red button that says “Turn this bullshit off” now. The background image is also an advertisement, randomized in case you need to buy a new car or visit Amazon to purchase some unnecessary item. You also get a nice fixed Feedback button fixed to the right side of the browser, in case you have so much time doing nothing that you just want to fill out a feedback form to help us out. The actual content is now styled but remains the same, however in a much smaller container. Scroll down…you won’t be disappointed…

Wait for it…ah, there it is. A nice floating popup fixed to the bottom of the browser slides in, prompting you to like us on one of the fine social networking sites. Keep scrolling down, you can’t get rid of it, but you get to see a nice banner advertisement at the bottom of the content, as well as a very helpful QR code because QR codes are the hippest form of technology.

Keep scrolling…

Not only do you get the nice banner ad at the bottom of the content, you get various clickbait that load in as you scroll down. We made sure these articles were nice and tasteful for the web user. Don’t scroll too far down or else the tastefulness of the clickbait may become a nightmare for some…

When you click over to http://blog.deathtobullshit.com/, you go back to a simple life of simple content before you decide to turn on the bullshit again. You get the same experience as the homepage when you click that oh-so-wonderful Turn on bullshit? button, but you also get more clickbait along the sides. Brad and I used the parallax effect to fly these articles up along the sides while you scroll down, in case you needed to fix your sagging skin right away.

Turn the bullshit off…now. For the sake of humanity do it now!

Thank you. You have returned to a much cleaner version and user-friendly version of the site.

What I Learned:

  • I already knew that ads, popups, carousels, floaters, feedback buttons, banner ads, and clickbait articles were annoying because I am a human. But I did learn how to make these (with a little help from Brad).
  • Creating a website is a lot more difficult than you’d think. To those of you who are web designers and developers, hats off to you.
  • Using other sites like CSS Tricks and Stack Overflow were very helpful for assistance with CSS and JavaScript. The more resources you have for learning, the better.
  • Creating a website without the help of a tool like Word Press was a lot more difficult, but it allowed us to stretch the abilities of the site as well.
  • I learned the basic procedure with creating a site, adding the content first, styling it, adding JavaScript and then going back and forth between these is the general practice.
  • Create your issues through GitHub to help your organization with these different issues.
  • Commit changes through Git-Tower more often than not. It helps organize your paper trail with the site.
  • Do not forget to cross-browser test, because Google Chrome doesn’t represent every browser, especially those with smart phones and tablets. Responsive sites are important.
  • The best way of learning is by diving into it yourself and having some help along the way. The more practice I get, the better.
  • Creating this site had its difficulty but it was fun. I now know how not to make a site essentially.

 

 

From Weather to Web Design: 1st Week at Brad Frost Web LLC

After working as an operational meteorologist for just over 4 years at MDA Information Systems LLC in Germantown, MD, I moved to Pittsburgh and got married to my wife who I had been long distant with for 8 years. Sadly, I had to leave my former workplace and the meteorology field to move to Pittsburgh, an area that has few options when it comes to companies that hire meteorologists. Fortunately, my brother has made a name for himself in the web development community and was able to give me a job for the time being.

I have worked for Brad Frost Web LLC for a week now and it has been a breath of fresh air not waking up at 2:30 in the morning. Some of my tasks have included:

  • Learning HTML and CSS via Codecademy with commentary/lessons from Brad Frost as well
  • Using Github, Git Tower, and dploy.io to push changes/additions to local web pages live in an organized and efficient manner that leaves a paper trail
  • Learning about Flexbox, Adobe Kuler, markdown, and other various tools.
  • Making changes to the Wexford Chiropractic site so the content is clearer and the design is cleaner
  • Assisting with leveling out/rebuilding the patio in the backyard and building a hammock
  • Recording a song everyday (post-work activity)

As with anything new that you learn, there are some obstacles to overcome. Some of these are:

  • Margins, padding, and borders definitely have me confused when it comes to positioning certain <div>s or text.
  • There seems to be a wide variety of tools scattered throughout the web, many of which I don’t how to use yet.
  • I start learning Javascript via Codecademy today. I’m sure there will be some obstacles with learning how to code a bit.
  • Working with your brother who has been in the web game for a while now is difficult when he pulls out language that you don’t understand.

Despite the weather community being quite a bit different than the web community, there are some similarities:

  • HTML and CSS are similar to programming languages (C++, Perl, MATLAB, etc.) that I learned at Penn State but a bit more logical (which I like).
  • Communication and language is key when it comes to your audience
  • Your product should get the message out clearly and efficiently while looking good as well.
  • The design of the weather website could help the user get his/her weather information or inhibit the process of getting the weather information

There is so much I have to learn about web design and development community, but thankfully because of my brother I have stepped off to a good start. The web is an ever-changing source of information that is vital to everyone’s lives, similar to a weather forecast. I will continue to do weather forecasts every morning (between 8 and 9AM usually), because I will always be a meteorologist. I am also grateful to have a job in something that is very important and something that I actually enjoy doing. I will try to post after every week so I can share my information with you, gain the web community’s insight, and show how well (or poorly) Brad can teach. Take care folks!