TRIA Case Study - Designveloper Minneapolis - Tim Brown


Creating a dynamic experience



Although I wasn't the visual designer on TRIA Orthopaedic's new site, my front-end development work helped define how the site would look and function. Working on this with excellent visual designer Chaney McCullough and deeper coding expert Joseph Paulson, gave me the opportunity to really hone in my HTML, CSS, and basic Javascript skills, while deeper Javascript and PHP was handled by Joseph.



Design Dev Hybrid Case Study

Starting with the foundation framework



The foundation framework enabled me to start laying out elements fairly rapidly because of it's innate structure that I had used in previous projects. Foundation allows you to use div's that it has predefined, and has the responsive breakpoints already baked into it, so a front-end developer doesn't need to spend a ton of time at the beginning of a project defining all of the responsive breakpoints for it's primary 'scaffolding' so to speak. Really, I started in on the header and footer first, as these were going to be primary elements that would be carried through on every page. With the framework in place, I started tweaking the visual design to match the styles that I was given from the mockup phase.




Mobile-first design



While I wasn't helping out in the beginning of the visual design process, a huge part of my initial considerations for creating this site to be effective as possible, was thinking about how the site would behave on smaller screen sizes. No matter how many variables you plan for, a front-end developer with a visual eye is indispensible for your project, because both the responsivity and the interactivity of sites often make alot of sense to define while you're writing the code.








Visually literate development



I am not the world's database expert, even though I can wield PHP effectively. I do however, know how to create visual experiences with code. When I design and develop every line of code I touch is written to effectively communicate with a companies prime customer. Generally, this just means making it look beautiful, suggesting any considerations for how we can improve upon the visual design now that it's taking form in the browser, and continuing to think visually while I write my lines of code.



From prototype to MVP



An MVP in web design, means a Minimum viable product. Working alone with the visual designer providing assets I created a working prototype of about ten major templates that would be used throughout TRIA Orthopaedic's website. Some full-width, some with a sidebar, and some with both a left and a right sidebar. These sidebars and the templates themselves were then passed on to be made dynamic with some fairly intense cross utilization for custom functionality that TRIA needed.



Designveloper in Minneapolis

Cleanup & Working with backend development



Making visual design dynamic, and then moving into connecting that design to backend functionality, some things can get shifted, decisions are made, elements are added. Working with the team I helped clean up, and modify new elements that were added post-prototype. We did some modifications for Retina display images, and branding elements, and modifications to allow the design to be more friendly with Internet Explorer 8 and 9, as well. Utilizing modern HTML5 elements to create modern experiences, does essentially require conscientous fallbacks for older browsers.



Digital intangibles



I believe that my greatest assets are not entirely technical. My greatest strengths are my drive, thinking outside the box, and a constant need to improve. You can check out our final launched design at tria.com. Happy to have the experience working with a great bunch of people, both within my agency Snap Agency, but also the marketing team at TRIA. We plan to continue amplifying the presence through ongoing work with the site, and working on other projects with the TRIA team.



Final design built on a CMS:

TRIA Orthopaedic Front End Developer

Visit Live Site

Ready to get started?

Get a free consultation now