Brad Bergner is a copywriter in the Dallas-Fort Worth area who has created content for companies such as Capital One and Twilio.
Since the late 19th century up to the present day, copywriters have played a significant role in the way companies market and present themselves to their customers. Over the decades, just as technology has evolved, so have copywriters and the mediums they write for; from the printing press and radio in the early days to today with the internet and the wide variety of technology copywriters' messages will be presented on. My first objective for Brad's website was to find a way to show that he is taking this traditional profession and applying his knowledge to meet the digital needs of consumers in the 21st century. My second objective for this website is to allow recruiters or potential employers reviewing his portfolio website to have all the information they need easily accessible.
For Brad’s logo, I wanted to find a design that mimics his straightforward approach to writing and how it is suited for modern-day marketing and advertising. To achieve this, I chose Montserrat as it has a clean, modern geometric design with a large x-height which benefits the readability of the font through the website at any size. To make this a custom logo, I wanted to design a logo mark that ties into copywriting in some way, and as I was doing research, I came across the Copyright symbol and incorporated it into the design, swapping out the “C” for a “B.”
As I stated in the Project Objective, a goal of mine is to show that Brad is knowledgeable in the traditional education of copywriting and that he is using that knowledge to write content that utilizes modern technology. Throughout the website, I try to add elements that represent how he is blending traditional standards to meet the needs of the modern era.
To represent the traditional side of his knowledge, I went for a rustic look by having a typewriter on a wood table and the red headers I use throughout the website.
To contrast the traditional design elements I added a geometric pattern background and modern outlined icons to represent how he uses his knowledge in a contemporary setting.
Finally, I added a paper background image mimicking traditional writing methods with tools like a typewriter in which the digital fonts and content would be on throughout the website to continue the contrast between traditional and modern copywriting uses.
The Hero Section on the home page is where viewers can begin to see how I am trying to bridge the gap visually between this traditional profession and how Brad is utilizing it in a modern way. To do this, I have placed a San Serif font next to a typewriter to emphasize this relationship. To aid in the flow throughout the website for recruiters and employers to get the relevant information they are looking for, I added links to every section in the navbar while making the navbar stick to the top while they scroll and move throughout the website.
For the About section, I wanted this section to be located directly after the Hero Section as this is the first instance where a recruiter can get a sense of who Brad is and his writing style.
After the About Section, I included a Skills Section using the geometric pattern background and outlined icons to visually showcase his knowledge of modern technology and writing methods that a potential employer could utilize.
For the Projects Section, I wanted to give the viewer a chance to see a snippet of his work and allow them to see which of the companies on his resume the project was for by hovering over the project box revealing the company and the project name before clicking on box taking them to the project’s page. One thing I had to keep in mind while designing the hover state is that it would have to be on all the time when the website was viewed on mobile so the hover background had to be translucent enough to allow the viewer to see the project snippet while allowing the company and project name to be legible.
Finally, we get to the Education and Experience section of the home page, I placed this section towards the bottom of the page as recruiters and employers might already have his resume, so I wanted to include this section for organic traffic so they can see who Brad has worked for and how he has utilized his knowledge at those companies.
For the Project Pages, I created a design that allowed Brad to go more in-depth about what challenges he might have faced and his strategy to meet the goals of the project while providing viewers a link to the website or images of the project so they can see the final results and how he achieved those goals through his writing. Being in a digital era, copywriters have to create content that can be presented on a variety of devices the same way designers have to design for those devices, so for the projects that where web based I included a device mockup showcasing that his content is versatile across mobile, tablets, laptops and desktops.
Since the primary audience for Brad’s website would be recruiters and employers. They might have hundreds of portfolios to review, so I wanted to design a way for them to move between the projects without returning to the home page. To achieve this, I added a project navbar at the footer of the project pages to give them a visual reference of the project they are on compared to the ones they have reviewed. I organized the project links in the same order as the home page projects section and applied the primary red color to the project they are currently on.
