Modeling for the Web–Not Just for Heidi Klum

Logos of HTML5, CSS3, and JavaScript

Like so many positions in the tech industry, front-end development is comprised of a fast-paced, rapidly evolving community of designers and developers. Working as a front-end developer–or "prototyper" as we like to call it here at Devbridge–I get to submerge myself into the technical lingo that lies behind all of our applications and try to creatively translate it into something logical for the end user.

Prototypes are the first model of something; in our case, prototypes are the first interactive web or mobile apps that we create using HTML, CSS and JavaScript.

The Importance and Impact of Prototyping

We deliver prototypes to our clients to give them an opportunity to interact with their app or site before the product goes to market. This step is crucial, because it allows us to capture the human interaction. Based on this interactivity, we can collect feedback on how to make improvements to better serve the needs of our clients and their target audience.

There is a huge difference between looking over static design files and being able to actually interact with different aspects of it. By using dummy data, we are able to turn static design files into semantically correct, accessible and web-compliant sites.

Accuvant website multi-device preview

A Day in the Life

As a front-end developer, I almost always get to work with the design and development teams. We have found it very helpful to involve front-end developers from the beginning of the project. When the project is in the design phase, designers and developers collaborate closely together.

This collaboration ensures constant education for both teams, pushing everyone to engineer solutions that not only look and feel great, but are also highly functional and intuitive.

At Devbridge, we like to abstract our code using different preprocessors, frameworks and extension libraries, allowing us to code more quickly and efficiently. We keep things simple by using HTML(5) and often abstract JavaScript using feature-rich libraries such as jQuery—a JavaScript framework that gives you access to a set of tools which you can use to interact or manipulate with DOM and its elements.

SCSS File and Folder structure

One of the more popular tools we use is called Sass. Sass is a CSS extension language that gives you the ability to better author your style sheets, which control the look and feel of your app. When building large-scale apps such as the one we are building for Zest Health, we can split up our increasingly large style sheet into sections that make hierarchical and structural sense. For example, you can have all the styles that controls your application’s branding colors or schemes in separate files or folders than the style that controls the structure of unique page templates. This not only makes your code modular and reusable, but also gives you the ability to debug your code quickly and efficiently. The end result is a highly scalable, modular and future-proof application.

This is only the tip of the iceberg of what you can do with Sass. If you are interested in learning more about it, you can head over to this blog post written by one of our front-end developers, Paul Gabronis, where he gives a basic introduction on how to get started with Sass.

Honestly, I've only briefly touched on prototyping. Keep in mind that this is a delicate and involved process–but, when done right, it offers a huge return on investment. Stayed tuned for more articles in which we will dive deeper into more specific prototyping topics such as accessibility, frameworks, and more Sass(y) goodness.

Interested in Becoming a Front-End Developer?

Check out our open positions for current opportunities.