Trang B. Salinas

I love User Experience. I love Design. I love Object Oriented Anything.

I’m trying out this new fangled tool called thegrid.io for my portfolio. It’s suppose to be the new UX AI. The design changes based on content or my suggestions. Let me know what you think :).

Technical Stack

Projects:

Us Bank website and native app share the same code. This is done using Cordova (Phonegap) to wrap HTML, JS, CSS and create native app experience. The project involved re-writing and re-branding the Us Bank App and Online Banking Experience

Team: User Experience

Role: Lead Front End Developer

What I did:

  • Create an object oriented CSS framework using SASS to drive the front end styles
  • Marry the OOCSS framework with backbone and handlebars
  • Work directly with UX designers and Information Architects to create the best user experience
  • Create collaboration between UI developers in India and UX designers in US

A website site that markets the Betty Crocker brand. This website is responsive and is run by Sitecore.

What I did:

  • Implement a global navigation component that is driven through Sitecore.
  • This navigation component must work on other core sites.
  • This component must be responsive.
  • The different sites have different animations. For example, how the menu opens and closes.
  • The links in the navigation changed often through Sitecore. For example, one day there might be a link for “Best Recipes” and another day it could be removed or replaced.
  • Implement slide on/off search option at the top of screen

Pillsbury.com

A website site that markets the Betty Crocker brand. This website is responsive and is run by Sitecore.

What I did:

Global Navigation Component

  • Implement a global navigation component that is driven through Sitecore.
  • This navigation component must work on other core sites.
  • This component must be responsive.
  • The different sites have different animations. For example, how the menu opens and closes.
  • The links in the navigation changed often through Sitecore. For example, one day there might be a link for “Best Recipes” and another day it could be removed or replaced.
  • Implement slide on/off search option at the top of screen

Guide Component

  • Create a guide through Sitecore that can be reuseable on other sites. See it here.
  • The guide must be comprised of multiple site core components which can be resused on other sites
  • It is also responsive

A modular framework are made of components that can "live” alone or with other components.

Popular Examples:

  • Lightening UI
  • Bootstrap

Many companies opt to create their own modular framework because they find UI frameworks to be too cumbersome and can not be easily extended. Basically, the company picks a framework and find that they need special components and/or designs. They start to override the framework code. Many companies end up with a framework that is a cross between the original framework and their own framework (with overrides, CSS craziness, and so on).

In this article, I will describe how to create a modular framework from a mock up. Ideally, in an agile environment, you would want a sprint 0. In the sprint 0, the architects, designers, and PM would determine information architecture which would drive the user flows. The user flows drive the page particles (elements and components) in the layout templates. Once these puzzle pieces are determined, the team can create the framework.

Like most projects, we never have time or we’re in too deep into the sprints and/or project timeline to stop. (If you can do a stop for even a sprint, it would be worth it.) Therefore, I have started on the basic level. You have a mock up. Now what?

I captured this screenshot from bettycrocker.com, a site I worked on. Let’s pretend this is the mock up:

I often reference SMACSS, BEM, and Atomic Design for this part of the process. It is critical to identify an element, component, and page layout templates. Often these page particles will be re-useable and become the basic building blocks for your framework. When I get a new design:

  • I break up what is an element, component, and page layout
  • I determine what is unique to this project or can be used on other projects
  • I determine page layout templates

Purple = Element

Yellow = Component