Project Goals
The POS Pros website was a fun task to play with because it allowed me to use a darker color scheme unlike our other sites that relied on a lot of whites and light font-weights. This time around, I decided to go with more bold elements and contrast it with thin outlined buttons and body text. I did include some lighter areas to breakup the darkness so it didn’t feel so heavy but I think the effect came out nice. This site was a pretty big endeavor because the clients wanted to display a lot of products and display which products belong to which industries. Thankfully, they provided me some graphics of each product and verbiage. I used a theme build from our page builder for the brands and industries pages since they shared elements like the hero images and call to action sections at the bottom of the pages, which made it a lot more easy to code specific rules to each section.
My Process
01
I discuss with the client what information they would like to present, images to use, color assets, and typefaces. After I get a feel for all the content and number of pages for the site, I start to formulate a plan to execute.
02
I start with a wireframe using Adobe Photoshop. This will be used as a template to show where the images, icons, and the provided verbiage will go as placeholders. Then I will flesh out each page using the discussed assets such as typefaces, color scheme, imagery, and icons.
03
After creating and laying out the design that includes all the assets, I use Adobe XD to prototype the site’s functionality. This will include how the navigation will function, the buttons hover effects, and where each button and link will lead to.
04
Once approved, I will slice each graphical element so I can store and add them to the site. I will reference the designed pages and page building modules and some custom code to create each page. Finally, I will test each version of the site for desktop and mobile options.
Project Details
Font Family
Montserrat
AaBb
Color Swatches
#11d8c8
#374857
#000000
#ffffff
Software Used
Adobe Photoshop
Adobe Dreamweaver
WordPress
Pos Pros Website
Home Page
The home page displays our contact info and multiple merchant Point of Sale solutions we offer.
Brands Page
The Brands page displays each individual Point of Sale solution with in-depth descriptions.
Industries Page
The Industries page addresses a particular industry and the best Point of Sale solutions available.