Designing Custom-Branded WiFi Portals

Engage customers with your brand through custom WiFi portals.

1. Download a background image from your website or Facebook page, or a stock photo site.

Tips

  • Less busy photos work well when you overlay a logo and text.
  • Think through colors when picking a photo—if you choose a dark photo, you’ll need light text and a light-colored/white client logo.
  • Estimate where the logo, text, and buttons will be overlaid on top of image when choosing a photo.
  • Make sure your photos are high-res and show a clean and appealing composition of the product.

Screen_Shot_2018-01-22_at_2.48.50_PM.png

 

2. Crop the photo and adjust the coloring (optional).

Tips

  • When cropping a photo for the portal background, the recommended crop size is 315 x 510 pixels.
  • If the logo of the company is white, darken the image by playing with contrast and hues.

Screen_Shot_2018-01-22_at_2.49.10_PM.png

 

3. Download the company logo to upload into the portal.

Tips

  • When searching for a company logo, use terms like “company name + logo + png”. You can add “+ white” in the search to find a white logo for dark backgrounds.
  • PNGs work best on the portal—look for the checkered background in your search results. This means the logo has a transparent background, see examples below.

Screen_Shot_2018-01-22_at_2.50.39_PM.png

PNG with transparent background

 

Screen_Shot_2018-01-22_at_2.50.59_PM.png

Regular JPG in image results

 

Screen_Shot_2018-01-22_at_2.51.07_PM.png

PNG                                                                                      JPG

 

Use a Facebook cover photo to use as an optional portal banner.

Tips

  • Find and download cover photos with images and big text so it’s easy to read on mobile.
  • Remember: a user can’t click on the banner on the login screen, only the success page, so make sure the banner image doesn’t say “CLICK HERE” on the landing page.
  • If clients want to design a custom banner, the recommended file size is 315 x ~160 pixels (there’s room to play with the height).

Screen_Shot_2018-01-22_at_2.51.51_PM.png

 

Edit portal fonts and theme colors for added customization.

Tips

  • Play with colors and fonts. Complimentary colors are always a win and less is more when designing portals.
  • If something feels off to you, it probably is. Try different images and color schemes—trust your instinct.
  • Portals can play a big role in helping companies engage their customers with their brand.

 

A few design and photo resources to help.

Photo Editing

Adobe Photoshop (paid)

Fotor Photo Editor (free on App Store):

https://itunes.apple.com/us/

app/fotor-photo-editor/id503039729?mt=12

Pic Resize (free): http://www.picresize.com/

Luna Pic (free): http://www168.lunapic.com/editor/

 

Color Matching (find a hexcode)

Image Color Picker (free): http://imagecolorpicker.com/

 

Free stock images

Stocksnap (free): http://stocksnap.io

 

Questions? Contact support@zenreach.com

 

Was this article helpful?
0 out of 1 found this helpful

Comments

0 comments

Article is closed for comments.