UI Pattern Library
Introduction
While at my former employer, a client reached out to us for help establishing a new aesthetic for their website. The website owner wanted icons incorporated throughout the website to use in conjunction with content gor visual guidance and association. They felt that images were too general and not helpful for website visitors in quickly gleaning what the content of each section focuses on. Additionally, it was also important that the icons match the UI of the website and established brand identity.
Primary goals for the project;
- Design custom icons to match brand/UI
- Design UI library/patterns for use on the website
- Match established brand colors and fonts
- Ensure CSS styling for coding is accurate and easy to reference for development
Getting Started
My role as the UI/UX Designer was to design the icons and establish the UI library of visuals and CSS coding for consistency across the website and ease of development.
- Confirm and document brand color codes
- Confirm fonts and establish CSS styling
- Sketch rough icon ideas / confirm design direction with client
- Design digital versions of icons
- Integrate icons and styling into website
Research & Strategy
There was a lot of time spent early on in the process to save time during the development of the website. Colors were confirmed for various color modes and usage. As well, a CSS library was coded to ensure colors would match and so the development of the website would be more efficient. The same process was completed for the fonts used on the website. A UI style library was established for reference to ensure accuracy and provide some creative liberty while staying on brand. The icon design direction involved two meetings with the client to ensure accuracy of the icons and satisfaction of the aesthetic. Once client approval was given for a few preliminary sketches and digital options, the remainder of the icon library was created for use on the website.
The Process
- ALL PROJECTS
Defined Color Codes
For reference while designing the icons and during development
CSS Color Styles Code Snippets
Screen shot of the CSS library of pre-established brand colors
Defined Button Styling Library
For reference while designing mockups and during development
CSS Button Code Snippet
Screen shot of the CSS library of pre-established button styles
Defined Font Styling and Usage Guide
Screen shot of the UI style guide
Font Style Code Snippet
Screen shot of the CSS library of pre-established font styles
FNBA Portal Icon Library
Sample of system icons used for portal design
Icon Library Options
Screen shot of a few samples of the icon library saved as jpg and pngs
Final Website
Click the image above to be redirected to the final website.
Please note, the project has been further edited by other developers and the client since its launch. Some aspects of the design may have changed.
Results
The entire website was designed and developed in 4 weeks, roughly one week ahead of the project schedule. The time spent early on in the project; establishing the UI library and icons helped save several days of development work, which translated to an early website launch for the client.
Get in touch
I work as a freelance designer in all of the above fields. If you’d like to discuss a project in more detail, feel free to drop a line. I love talking design.