Art & Design > Branding > Modern Web Design Demystified > Retrofitting An Existing Site

Retrofitting an Existing Site


Modern Web Design Demystified


Lesson Info

Retrofitting an Existing Site

What is it? What is a retrofit? So again the realty is there are these... When I see new technologies and existing technologies get presented to me I always see this blue cloud one that's like alright we've got no overhead, it's totally cool we can do everything from scratch. It's rad. Again, this always happens in the meetup format and then I see the second speaker who's like I've had this project for two years and when I started we were using a technology that everybody said was the bluest sky and then something happened and it changed, and I still have to use this other thing, so I can't totally embrace the new thing, so I kind of gotta like do this other thing. We wanted to make sure that we gave you an accurate representation of the ideal sure this is great but then there's still a lot of legacy both software technology as well as content out in the wild. We call this a retrofit. We don't need a full design. It is not a full redesign. The architecture of the site is sound but the ...

site simple needs some added responsiveness. While we're in there though, how about we update the visual language, right? We're resetting the framework, if we do our job right in resetting the framework which is sort of the underlying CSS we can kind of begin manipulating some of these visual assets too. While we're updating some of these variables web fonts have come online, @fontface happened in these 10 years, SVG icons happened in these 10 years. We can ditch some of these PNG graphics we have. Then we can take a look at performance in overall user experience. Again, why are we doing this? The CMS was outdated so that also had to be gutted and it makes you think well, what stayed the same? How is this not a redesign? We're gutting the CMS, time was limited. We had six weeks and the cost for development was reasonable. It was a six week budget. We couldn't go over, we couldn't go under so we had to stage it into these iterative two week sprints where we can actually see this thing through. This was what we stepped up for. Art wasn't getting changed out on the website. There wasn't an Art director in house so it was this process of can I do this there. There was less consistency across some of the visuals. The whole thing was kind of flat. There was no hierarchy given to stuff. There was a lot of information and it was laid out in a way that made since, but it hadn't really been directed, pushed or pulled or sized so, this is what we proposed. How did we get there? First, we did a content migration. We're going to take 10 years worth of content, reformat it and get it ready to pump back into the CMS which we're using is called Wordpress. We're going to work directly in the browser. Take that! Take that and we're going to concentrate on typography. I was telling somebody during the break that, "A Book Apart" is great. There's this company from 'A List Apart' they publish these books that focus on one element at at time. Typography, responsiveness, mobile-first and there's so many things that you want to balance when you're making projects. I'll actually dog ear each project as a thing that I, as a maker of stuff, want to focus on cause I can't work on all of them at the same time. It would be impossible so I made this like this is a typography project, I'm going to focus on typography as I build this project. I think that that's a totally valid to go about learning new things. You can't do six things that are new at a time. You want to kind of take each project and focus on developing a new skill. Knocking some stuff out... Discovery, whatever, it's been discovered. Design in text, yeah, it's a text-based site. Okay, we're going to do some wire-frames cause yeah we need a contract and everybody knows visually where we're going. We're going to skip the HTML prototype, we're going to skip the visual language and we're going just do all that stuff called in browser design cause we only have two weeks to do this stuff. We're going to do these quick client reviews and revisions and then keep cycling. First step, content migration, step zero. This is like above the other ones so we brought 10 years of content over so we made a plan. This is much prettier than the database file that we got, I wanted something you could actually read. It's very similar to structure that we're looking at in an inventory. It's inventor-ing an actually database and looking for patterns and noting how the content is structured. We got a handshake on this. This is the way we're actually going to do it. We poured all that stuff into the browser. We took out all the CSS and look it's not bad. It's not bad. We got rid of some redundancy. We got rid of some stuff we didn't need and we focused on the thing and the core content is good. I mean it's good, sounds forced, it's good it's awesome, amazing. When we edit that let's keep amazing. Once we had the data cleaned I saw a path forward that was really clear. I was super happy. We did some wire frames and this where again I'm not designing the fonts I'm using but I am designing the scale. I wanted these headlines like really just smack you in the eyes then I wanted this white space. I was thinking of stationary like these large margins. I wanted this large piece of real estate on desktop screens and then it was just a matter of balancing stuff and moving stuff around. Again, mostly a hierarchy based project. It uses Balsamic Sans. Yeah, right. Yeah. [Laughs] Because I want to stop looking at this immediately it makes me productive. So what we did was a quick component library this is not a post, this is all the unique elements laid out in a single HTML file all in a row and I wanted to see all those styles play nicely together. I can nudge things and see okay, that's looking pretty good. The contrast is good and again, this is all happening in the browser. So straight from wire frames, content based on the text design, now we've added CSS and our framework. At this point we actually weren't using foundation, we were using our own custom framework just because we were being really careful about how many components we added to the thing and we were learning as makers of stuff. Then, we stepped back and we could actually pop those typefaces. I really love Georgia. This is a website font standard but Georgia needs to be bigger to really get it, to really feel it. We see it everyday and you don't see how beautiful a font it is but if you can expand it as in this lead intro it starts to do some cool stuff. Then a typekit we selected to headline font and again really playing with the scale. I mentioned this earlier in the walk-through we rethought some of the navigation patterns specific to people like a simple idea of a 'rolodesk' made sense; this is how I tap through people, this is how I find people intuitively made this large community of users really accessible. Navigation, pretty standard hamburger solution but again we needed to roll it in so can you see the author tends to get pushed down underneath some stuff cause content is more important than the author at this level. We really need to get that primary messaging across. You can see the headlines drastically shift from this large desktop presentation to a more modest mobile presentation but still the primary element of the page. Here's the super cool thing we did. I'm really like geek out for a second. As far as the menu, does it go off-canvas? Does it slide out from the top? I'm not going to say! I know the answer to that. I showed them. It's just the footer. It jumps me to the footer cause that's where the content is so I don't have to make a duplicate HTML object. I click menu, it brings me to the bottom of the page. Sweet, no extraneous Javascript, no extraneous thoughts. There it is and I have the option to go back if I somehow made a mistake. So really quick inline stuff really keeping it minimal. We talked about this pattern translations we took this really simple object at mobile and added this enhancement we called the side car so we dropped that content off to the side so it gives us the white space and we read that slack, that horizontal element as a independent unit. We took something that a little fancier which I wish, it's really subtle the way we use it but it's like this Pinterest style staggering shelf and then made sure that it worked as a regular width in mobile and added this offset-ness in the desktop browser. So again things to remember is that yeah, sometimes a full redesign just isn't necessary It doesn't make sense. We don't want to force our process on our clients. We want to make our process fit our clients. We are adaptable, our process is adaptable. They don't need it, they don't get it so when you should consider retrofits is when it's limited visual overhead. You can see not a lot of visual assets here. We had a lot of freedom to really focus on type and structure. If your dealing with these big banner images, lots of associated media, retrofits are going to take a little bit longer and you may need to adjust your plans. And as I said before, they don't require every step only those that are appropriate to the content. One kind of quick addition to what Jesse was talking about when we start thinking about content and we started thinking about wire frames it's really important to also consider what that max and min experience look like. An article for example, it's very easy to go and design the perfect article. Yes, we're designers. This is my vision of how this article is going to look but in reality there's probably quite a few different types of articles so how do you explain and communicate to your team those variations knowing that you're going to have some that might have very little content and some that might be super long. In the back of your mind realize that you're not just designing the perfect, your designing all of those other ones that have to fit those rules. You have to be working with the developer to set rules on how things are going to react.

Class Description

Online web design is not just about choosing fonts, colors, and layouts. The days of throwing a static visual comp over the wall are ending. Designers are now encouraged to work side by side with clients and developers. In Modern Web Design Demystified you’ll learn how to communicate with developers and collaborate with your clients in order to design websites that function as well as they look. You’ll learn about: 

  • The fundamentals of responsive web design
  • Working with Clients to identify and prioritize goals
  • How to communicate with Developers
  • Best practices for project workflow
In this online web design course, Andy and Jesse will share real world case studies to help you understand exactly what goes into creating and launching a website from the ground up. They’ll tell you about the tools they use and offer tips on working with everyone from the coder to the client.

High-quality web design is complex, but it gives businesses and orgs the opportunity to really connect with their users. Learn the ins and outs of the entire web design workflow process in the Modern Web Design Demystified course.

Bonus materials include: 
  • Sample Dev Tickets
  • Responsive HTML Wireframes
  • HTML Pattern Library
  • Sample High Resolution Visual Comps
  • and more!