PORTFOLIO
- Portfolio
- Project
Project
Newbury CRE Website
The Newbury CRE project was an interesting one where I could spend more time on it and think about how to include interactive elements that jumped out from the print pages from the marketing brochure the graphic designers created. CSS animations were used to add some motion effects that would enhance the layout for the web. The renovated garage building space was to be turned into luxury high-end business loft spaces but keep the historical exterior intact for the neighborhood aesthetic of the Back Bay. The goal here was to make the marketing material stand out from other property sites I have worked on because more time was allotted to this project. Included were gallery views that showed before/after comparisons of the space with rendering assets and video.
- Role: UI/UX Designer / FE Developer
- Client:
Colliers International | Boston
341 Newbury Street - Tools: HTML, CSS, JS, Adobe XD
- Project Duration:
-
View Website
LOGIN (u:guest / p:Colliers)
to access website
/ COMPS
High Fidelity Designs
CSS ANIMATIONS
-
ABOUT | rollover effects, pop-up modal, animated icons
-
HIGHLIGHTS | ease in/out of information
-
OPPORTUNITY | before/after views
/ PLANNING
SITEMAP, COLOR, TYPOGRAPHY
/ REFLECTION
What did I learn from this project?
This was probably one of the more interactive sites I got to work with in order to add animation effects and other functionality. This is one of a very few projects where I was not rushed to push something out. Here I am just using standard HTML/CSS/JS to assemble this small micro-site. We had a quite a lot of highly visual assets to use. Within the print brochure we had a nice color overlay of the floor sections so I thought it would be nice to have each section role in on a time-delay. With each rollover hotspot, a modal would open to display the floorplan with more details. We also had quite a few before/after views that we wanted to inlcude to show the progress of the construction work on the property, so I spent some time matching up either photo's or renderings with the untouched garage views. For the homepage I noticed that there was a design aesthetic of a ray of light on the building. I decided to use Adobe Premiere to break apart the image and animate it so it would pop. To add a little more life to the document, espeically in the area about the information on the property I used a script that allowed for ease-in and ease-out of elements on the page so it would elegantly pour information on the screen.