Responsive Web Design & WordPress Build



Project Overview





This website was completed for a Philadelphia area real-estate management group, Seven One Management, with the goals of centralizing their apartment listings to one site and to increase the amount of interested renters looking for a new place in the Manayunk neighborhood of Philadelphia. The client's needs for the website included:

  • A capture form for users to request a tour of available units
  • Interactive 3D tours for newly constructed apartments buildings
  • Galleries of floor plans and staged rental units
  • Links to local restaurants and shops to increase SEO
  • Live available listings pulled from their management software

My roles for the project included conferring and communicating with the client, creating the style guide and designs for the site, and building the site in WordPress.


Tools Used:

- GoDaddy Managed WordPress

- Affinity Designer

- Affinity Photo

- Adobe Illustrator

- Elementor Builder (WordPress)



Site Design





Although the site was created for Seven One Management, the Manayunk Apartments site was designed separately from the brand style of the management company. Conversely, this site was not meant to be created as it's own brand, but as a catch-all for the listing from the management company that are in Manayunk. So, the idea for using a red and black color scheme came from the style of the Manayunk Development Corporation which oversees local events and business along with Main Street area. By aligning closely with their brand, we felt that we could more closely associate the contents of the site and its goals with other happenings in the neighborhood. Their site can be seen here: www.manayunk.com


A quick style guide was created before moving on to creating the basic structure of the site's home page:



Manayunk Apartments Style Guide





Following the basic style guide, I designed the initial layout of the home page as a direction for the site. Upon the client's approval, I began to build the process of build the page and the rest of the site in WordPress using the Elementor Builder



Home Page Design Mock-Up



WordPress Build with Elementor





The Manayunk Apartments website was build using the Elementor Builder in WordPress in order to have greater control over the global styles for the website and see the design live while building it.


iFrames

In order to achieve the client's goal of having active open rental listing that update from the client's management system and to have interactive 3D tours on the listing pages, I used iFrames to embed the active listing page from Seven One's website. Using the iFrames allowed any new updates made to the management company's directory to automatically be updated on the Manayunk Apartments website. Similarly, my client hired an independent company to create a 3D tour video and provided a link for us to embed in site for users to interact with. Just like the one below:





To finish the website, the focus shifted to adding galleries of the floor plans and staged rentals for users to browse. Elementor provided adequate tools to create the galleries and allowed for users to click on the Lightboxes for a closer look.


Feel free to click the button below to view the finished site or review the screenshots below of featured pages and elements in standard and mobile layouts.


View Live Site

Top of Home Page



Featured Apartments Section



Luxury Apartment Page



Floor Plan Gallery and Amenities



Active Listings Page with Interactive Options



Contact Page for Requesting a Tour



Top of Home Page



Request a Tour



Live Listing Page



Luxury Apartment Page



Floor Plan and Amenities



3D Tour



nicklewisartanddesign@gmail.com