Websites for UTEP VPBA Division

Here at The VPBA Office I am responsible for the design and maintenance of the websites under The VPBA Division.

Redesign


Part of my responsibility was to redesign all the websites under the VPBA division. Goals of the redesign were to update content (make content useful, delete outdated content), make websites mobile friendly, implement design guidelines. I applied the redesign, now the websites are organized, responsive, and faster.

With this redesign we standardized design, layouts, website architecture, user experience, and UI patterns. Also the websites have improved the service of some the departments.

Handcrafted a fast HTML/LESS/JS framework


Instead of getting the most popular framework, full of features, with dozens of custom HTML/CSS/JS components, multiple plugins, that will work on every device; we opted for a more minimalistic apprach. We decided to create our own framework based on our audience with only the features we needed.

This resulted in a clean, simple and fast framework.

We carefuly created a modular CSS structure. Below is a simple example of how we apprached writting the CSS.

Code Sample

CSS:

.btn {
background-color: @vpbaBlue;
border-radius: 20px;
border: none;
color: @white;
display: inline-block;
padding: 8px 20px;
text-align: center;
text-decoration: none;
}
.btn:hover {
background-color: @grayDarkest;
}
.primaryBtn {
.uppercase;
.boxShadow;
background-color: @vpbaOrange;
}
.primaryBtn:hover {
background-color: @vpbaOrangeHover;
text-decoration: none;
}
.btnMed {
font-size: 14px;
padding: 4px 10px;
}
.btnDisabled {
background-color: @grayLight;
color: @grayDark;
}
.btnDisabled:hover {
background-color: @grayLight;
}

HTML:

<p>
<a href="#" class="btn">Secondary Button</a>
<a href="#" class="btn primaryBtn">Primary Button</a>
<a href="#" class="btn btnDisabled">Disabled Button</a>
</p>
<p>
<a href="#" class="btn btnMed">Middle Button</a>
<a href="#" class="btn primaryBtn btnMed">Middle Primary Button</a>
<a href="#" class="btn btnMed btnDisabled">Middle Dissabled Button</a>
</p>

Result:

Secondary Button Primary Button Disabled Button

Middle Button Middle Primary Button Middle Dissabled Button

Colors


Colors were chosen from The University Identity guide. We declared the colors as LESS variables, and then used those colors for for all the elements such as the headings, paragraphs, buttons, links, borders and backgrounds.

LESS Color Variables:

@white: #fff;
@blue: #036;
@blueHover: #102f4e;
@blueMed: #004890;
@orange: #ff5600;
@orangeHover: #e15a00;
@grayDark: #555;
@grayDarkest: #232323;
@grayMed: #666;
@gray: #ddd;
@grayLight: #eee;
@grayLightest: #fcfcfc;
@linkBlue: #008cba;
@linkBlueHover: #03556e;

blue
blueMed
grayLightest
grayDark
grayDarkest
orange
white
Colors

Grid System


We needed a responsive grid system. However, it needed to be compatible with old IE7 and 8, since many of our users still use these versions.

Our approach is very simple. Since IE7 & 8 don’t support media queries, the “desktop view” works in all supported browsers (old and modern). While all the CSS inside media queries for smaller screens will be ignored by old IE version, and used by modern browsers (including browsers of mobile devices).

Containers

The grid has two types of containers. A wide one, and a narrow one. The narrow container’s max width is 767px.

/*Grid Containers*/
.container {
margin: 0 auto;
width: 1170px;
}
.containerNarrow {
margin: 0 auto;
width: 767px;
}
@media(min-width: 992px)and(max-width: 1199px) {
.container {
width: 970px;
}
}
@media(min-width: 768px)and(max-width: 991px) {
.container,
.containerNarrow {
width: 750px;
}
}
@media(max-width: 767px) {
.container,
.containerNarrow {
margin: 0 auto;
width: 90%;
}
}

Columns

The grid has two types of containers. A wide one, and a narrow one. The narrow container’s max width is 767px.

.oneHalf {
float: left;
margin-right: 2%;
width: 49%;
}
.oneThird {
float: left;
margin-right: 2%;
width: 32%;
}
.twoThirds {
float: left;
margin-right: 2%;
width: 66%;
}
.oneFourth {
float: left;
margin-right: 2%;
width: 23.5%;
}
.oneFifth {
float: left;
margin-right: 2%;
width: 18.4%;
}
.gridLast {
margin-right: 0;
}
@media(max-width: 767px) {
.breakColMobile {
width: 100%;
margin-right: 0;
float: none;
.oneHalf,
.oneThird,
.twoThirds,
.oneFourth,
.oneFifth,
.twoFifths {
width: 100%;
float: none;
margin-right: 0;
}
}
}

Design Process


We implemented a design process that alowed us to get things done. The design process we implemented allowed us to define a timeline, limit the rounds of feedback, and create deadlines for me and the site owners.

Implementation Process Stage Parties involved Description
1. Planning Implementation Team & Site Owner
  • Define Requirements
  • Gather and Create Content
  • Build Wireframes or Prototype
  • Get Site Owner Approval
2. Design Implementation Team
  • Create high-fidelity mockups (only if needed).
  • Create visual design assets for the website.
  • Export visual assets.
3. Development Implementation Team
  • Create website in a test environment
  • Create Pages
  • Write HTML,CSS, and JS
4. Feedback Implementation Team & Site Owner
  • Presentation of the site in a test environment.
  • Site Owner will provide one round of consolidated and documented feedback (all feedback written in a document file). Limiting the rounds of feedback allow us to complete the project more efficiently and faster. This makes both parties happier. Also the product here is not a surprise for the site owner since in stage 1, the site owner approved either wireframes or a prototype and agreed on the requirements and functionality.
  • Will request approval from Site Owner to publish the site.
5. Testing Implementation Team
  • Test in supported browsers and devices (recommended support: IE7*, IE8*, IE9*, IE10*, IE11, Safari, Firefox, Chrome, iOS, and Android.
    *=Functional support only (it works properly but some visual elements are not supported - like animations, rounded corners, box-shadows...)
6. Site Launch Implementation Team
  • Publish the site in the production environment.
7. Go-Live QA Implementation Team
  • Extra round of testing to verify everything was published correctly

Basic Styles

We identified the most used elements when creating content. We predesigned them in a way that these elements were available for the website editors.

  • Page Title and intoduction paragrah.

    Page Title and intoduction paragrah.
  • Headings and paragrahs.

    Headings and paragrahs.
  • Home Highlights

    Home Highlights
  • Links and Buttons

    Links and Buttons
  • Alerts

    Alerts
  • Tables

    Tables
  • Lists

    Lists

Basic Templates

Based on our experience, we created templates for the most used pages in our websites. These templates allowed us to standardize the User Experience throughout our websites, reduce the implementation time, and to focus on the content rather than development.

  • Homepage Template

    Home Page Template

    Home Page Template

  • About Us Template

    About Us

    About Us

  • Left Side Bar Template

    Left Side Bar Template

    Left Side Bar Template

  • Right Side Bar Template

    Left Side Bar Template

    Left Side Bar Template

  • FAQs Template

    FAQs Template

    FAQs Template

  • Contact Us Template

    Contact Us Template

    Contact Us Template

Iconography