I’ve been designing and creating Mobile-First responsive websites using HTML5, CSS3, Bootstrap, JavaScript and jQuery for a while now and have recently started a 16-week front-end development program. Here I’ll be posting my progress towards the following 16 weeks. You can check out my work on my personal website. Hit me up for full-time or freelance work, collaborations, or to say hello 🙂.
Overview
A modern and clean website represents your brand and its value — something the Chinese Real Estate Association of America’s site did not meet or deliver. Some important features are hidden in the navigation bar; there wasn’t a modern layout, and there wasn’t a clear direction for visitors to understand where to go, what to do or read. Some goals during this project were to create a modern look and feel site highlighting top features in the navigation bar, the organization’s mission and message and relevant information to new visitors and current members.
Link to website | Github
Technology Used
HTML5, CSS3, Bootstrap, Font Awesome
Problems
- Layout — message, layout and images show outdated site with little care for impressing and/or sending a clear message to visitors.
- Direction — lacking direction on what site visitors should do, click, read.
Process / Challenges
Having features hidden in tabs and without clear messaging and direction, I’ve taken what I believe are the most important features and added them to either the navigation bar, body section or footer.
Some important things added were: separate log in and join us buttons on the navigation bar, link to sign up for newsletters, mission, current board’s Chairman, President, and President Elect; corporate sponsors, a complete section for information, and a footer containing social media icons, phone number and address.
Research included real estate companies, agencies, and associations.
Wireframing
Result
A cleaner and modern look and feel, well-noted separation of messaging and direction, as well as consistency in font, colors, and new images, we can navigate with ease of knowing where to go, what to read, clear call-to-actions, and most importantly, the mission of the association.
Side by Side: New vs Old
Richard Chan 