— Project BrieF —
NZCS is a company in New Zealand that offers reliable but affordable IT services to clients.
A user-centric company, they make sure that their service is tailored to the needs of their clients. They specialize in providing Flat-Rate IT Services, Cloud Solutions, and designing Custom Infrastructure.
A user-centric company, they make sure that their service is tailored to the needs of their clients. They specialize in providing Flat-Rate IT Services, Cloud Solutions, and designing Custom Infrastructure.
NZCS has existed for more than twenty years, and its website has not been updated since the late 2000s. The goal of this project was to redesign their old website. They wanted to modernize their website and stand out from other companies in New Zealand that offer IT services.
— Roles and Responsibilities —
Art Direction, UX/UI Design, Graphics, Animation, Front-end Development
In the NZCS Redesign project, my role ranged from being the Art Director that conceptualized the design ideas, branding, and graphic illustrations. To make the website more engaging, the teaser graphics were animated.
Moreover, I also worked on the front-end code (HTML, CSS, JS) for NZCS. The design had to be responsive and checked in multiple devices (desktop, tablet, and phones) and web browsers for compatibility.
Lastly, I collaborated with a developer to ensure the design standards are met during the conversion of the HTML markups into a WordPress theme.
— Tools and Technologies —
DESIGN: Photoshop, Illustrator, XD
DEVELOPMENT: HTML, CSS (Bootstrap), jQuery, WordPress
DEVELOPMENT: HTML, CSS (Bootstrap), jQuery, WordPress
— Before and After —
The image below shows the old website of NZCS and the new design showcasing bright and lively colors and animated graphics. The site’s content design and architecture are now emphasized with bigger text, highlighted keywords, and complimented by custom graphics.
Transitional animations were used to create a better sense of movement and engagement that is not too overwhelming for the audience. For this project, SVG animations were used to provide smoother and complex animations without increasing file sizes and loading time of the website.
— PAge Designs —
Homepage
Services List Page
Have a project in mind?