Web Design Portfolio

Transcription

1 Web Design Portfolio

2 Who are we? Matt Staed Marketing, Media and Web Manager Mohammad El-Khatib Senior Web Developer Ashley Kokozka Web Designer Xavier Richard Client Service Rep. & Web Developer Jacob Coleman Web Developer Dora Tzotchevska Senior Multimedia Producer

3 Our Process Our team uses an industry-standard, best practice approach to design, development and ultimately launching your new website. We start with the design phase which involves either the selection of a template or a collaborative design/brainstorming session where we share ideas, design trends, themes and expected functionality for your new website. Once we've polished the design to your satisfaction, our developers take over and begin coding and bringing the site to life. Your project manager, who keeps you informed with weekly status updates will provide you a link to a draft site where you can monitor our progress. Finally, when the site is complete and you have approved, your new site goes live! Support is ongoing after the site goes live and includes training for your staff, monthly traffic reports and a dedicated support rep to be on call for any questions, issues or requests for help.

4 Why Drupal? Open Source Connected community of global developers Official Platform of the USHR Our web projects are built on Drupal, the world's largest open source Content Management System (CMS). Experts around the world consider Drupal to be the gold standard in cybersecurity and its status as an open-source platform means the functionalities we can implement are virtually limitless. Drupal is also the official platform of the House of Representatives which means you benefit from our team's expertise and support but also the resources of the House technical team.

5 Our Recent Work

6 Rep. Sean Duffy When we began our engagement with Rep. Sean Duffy's office (WI07), two things immediately stood out that we wanted to capture in our design. 1) He is an excellent communicator; he makes regular appearances on both cable and local news, holds frequent in-person events in his district and does a great job of sharing his House floor activity via his official YouTube channel; and 2) the Congressman maintains some of the most active, vibrant social media accounts in Congress. Our design approach centered around a clean layout with white space throughout and a heavy focus on social media and video content. Keep reading to learn about some of the dynamic elements we implemented to help the Congressman showcase his personality and serve the people of Wisconsin's 7th district.

7 Social Media Wells Whether it's a link to each of the Member's social channels or a simple streaming feed of the latest activity, most Congressional websites today feature at least some form of social media integration. With Rep. Duffy's new website, we knew we needed to go above and beyond the norm. Our team created three individually-responsive social media wells that would shine a spotlight on each specific channel and allow users to scroll through the content independently. Not only did this amplify the Congressman's social media messaging, we also enabled audience growth by including clear calls to action for viewers to like or follow each individual channel. Video Wall & Newsrooms In 2018, video is king. Fortunately for Congressman Duffy, the well runs deep with lots of great video content from television appearances, committee hearings, speeches on the House floor, live events and landscape video content from the beautiful 7th district of Wisconsin. Using a "Hollywood squares" video wall and a dynamic Newsroom header, we showcased this wealth of high quality video content. Visitors to the site can immediately see what's inside. media

8 Rep. Doug Collins The website design project for Rep. Doug Collins (GA09) was a fully custom job from day one. Starting with a blank slate, we held several collaborative design sessions with the office to achieve the precise look and feel the office needed to see in the project. Using Drupal, both ours and the House of Represatives' preferred web platform, we implemented a parallax theme which creates a unique sense of movement and the sense of viewing certain content through a window or camera lens. With responsive header menus, custom-designed service icons and simple but bold imagery found throughout the site, the Congressman s redesigned website has become a favorite project on our team but most importantly, we ultimately delivered a finished product to a happy client.

9 Custom Logo Design Working with the office to achieve the perfect balance of simplicity and character, this custom logo features an artistic rendering of the state of Georgia and star indicating the location of the 9th District. We liked this logo so much that we implemented a "sticky" menu so the logo and the main navigation menu are visible at all times as you scroll through the site. News Filters Like many Congressional offices, Rep. Collins' office releases frequent press releases, op-eds and statements. We implemented a custom filtering module that allows web visitors to easily filter between each specific content type or to simply browse all materials released by the office. The clean layout utilizes a "cards" approach that makes browsing through content a more visually appealing experience and works great on mobile devices. design

10 Rep. Scott Peters The design engagement with Rep. Scott Peters (CA52) was one of our most challenging and rewarding recent projects. Congressman Peters benefited from an extensive catalog of high quality content, all of which the office considered important and relevant to the public. The challenge was this: How do we make all this content easily accessible to constituents without cluttering the site and detracting from the design? We believe we met this challenge by creating a series of landing pages with simple icons, fast facts at the top of each page and calls to action throughout the site that make it easy for constituents to navigate the site and minimize clicks.

11 Vivid Imagery Rep. Scott Peters represents sunny and vibrant San Diego, Coronado, and Poway and the team wanted to reflect the culture of the region in the design of the site. So how did they capture those California vibes? First, they incorporated lots of beautiful, full screen photos to catch the eye, and used simple blue and yellow overlays to create a sun and surf effect. The photos change on every page to showcase the diverse landscape of the region. Social Footer Easy access to the office s social media channels was an important factor in the website design. The team imagery decided to make the social media icons front and center in the footer. The background on the footer is new with each page, and the contrast between the blue overlay and the white and yellow text creates an eye pleasing effect that keeps it from getting lost at the bottom of the page.

12 Rep. Warren Davidson The design approach to the website design for Rep. Warren Davidson s offices was two-fold. First, the team wanted to design a clean and accessible site for the constituents of Ohio s 8th District; and second, the team wanted to showcase Davidson s connection to his community. To achieve these goals, the team incorporated beautiful, full screen images of the district and created custom icons to help constituents navigate the site.

13 Custom Icons The design for Rep. Warren Davidson of Ohio s 8th District was centered around his office s commitment to public service. To convey this in the web design, we created completely custom icons to visually attract site visitors to the services his office provides for constituents. The visual effect of this is accessibility and ease of use for visitors looking for services on the website. elements

14 Leidos Digital Solutions, Inc 2700 Prosperity Avenue Suite 200 Fairfax, Virginia