Carla-Marie Metcalfe

Responsive website design and front end development for a London based actress

cm-website_header_1170pxcm-website_header_1170px
[unex_ce_button id="content_fwco3hesi" button_text_color="#ffffff" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="left" button_text_spacing="2px" button_bg_color="#ff9901" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#ff9901" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://www.carlamariemetcalfe.com" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Visit website[/ce_button]

The Brief

Carla-Marie Metcalfe wanted a website to act as a hub for all of the acting collatoral a potential agent might want to see. This included photos (headshots and production stills), sound (voice reel), video (show reel, monologues) and contact details. She also wanted the website to be built in a content management system (CMS) that could be easily updated, by her, with new content when neccessary. I was tasked with creating the website design and setting it up in a CMS. 
 

What I did

I began by interviewing Carla-Marie to determine her needs from the project, as well as conducting research of other actor's websites. Common features of other websites included the ability to store and display photos, to play video and sound (such as a voice reel), and display contact details.

From here I was able to create a website architecture and site map for her. Once this stage was signed off I created paper wireframes to test the flow of her website. Once the wireframes were created I began work on determining the look and feel of the website. This included choosing the typography, colours and photographs to be used. 

The next step was determining how I would turn my visual designs into a working website within a CMS. I explored a variety of options, but decided on WordPress primarily for it's use of themes but also because of it's popularity among many developers and abundance off forum resources. I set up the domain using 1and1 and created the database using MySQL in order to install and run WordPress.

I decided to find a fairly blank theme that I could then customise using custom HTML and CSS. I was then able to create the other features, such as displaying photos, using a WordPress plugin. In order to add video and sound I added widgets from SoundCloud and YouTube.
 

Results

Since launching the website, Carla-Marie has been able to update her website freely using the plugins and widgets. She has been able to point potential agents to her site in order to further demonstrate her abilities.

Because she has been able to show her Headshots, Production stills, Voice reel and her Show reel she has garnered lots of interest from potential agents, and has since been signed by a BAFTA award-winning agency called Actorshop.

Retrospective

If I were to go back and do this project again, I would approach it slightly differently. First off all I would attempt to interview some agents to discover what their needs are from an actors' website and find out what problems they have found with such sites in the past. I would also attempt to validate my wireframes with them before moving onto the visual designs.

In terms of the development of the CMS, I would set up a better workflow for development. This would include creating a local site, a staging/test site, and a live site. This would mean I would be able to use a tool like GitHub to version control changes I would make. Although it is a small website, this is good practice and does no harm in helping me learn more about website development.

[unex_ce_button id="content_owdgu90ht" button_text_color="#ffffff" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="left" button_text_spacing="2px" button_bg_color="#ff9901" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#ff9901" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="2px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="http://www.carlamariemetcalfe.com" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Visit website[/ce_button]