Web Designer Test

Purpose

This purpose of this test is to do the following:

  1. Benchmark where you are at regarding the skills required to fulfill the role
  2. For you to spend a day working with your manager to see if you both enjoy working together
  3. To find out if your web design skills are to the standard we require

What you will need

  1. Computer with internet connection
  2. Skype
  3. Photoshop

Test Duration

  • The test should take you 8 hours to complete
  • The test might take you longer, we are happy for you to spend extra time.
  • I suggest spending as much time as possible on this test as the results will be the major reason we DO or DON’T hire you

Your Goal

You are going to:

  1. Redesign a homepage using Photoshop for the site https://demo.thesalesdrivenwebsite.com/
  2. Implement the design into the site we have given you using Elementor

Deliverables

By the end of the test, you are required to record a video explaining the following assets that you have built including:

  1. The Photoshop Mockup
  2. The Landing Page

You are to:

  1. Describe the changes you made to the mockup and why you made those changes
  2. Upload the video to youtube and share the link with your manager
  3. Once you have sent the video, call your manager and they will go through the assets with you on skype

We will provide you with:

We will provide you with the following:

  1. Access to a WordPress site
  2. The link to base your design on https://demo.thesalesdrivenwebsite.com/

Additional Tools

None required

What to do when you are stuck – IMPORTANT!!!!!

When you get stuck and we know you will get stuck, we want you to call your manager on skype.

They will help you straight away to get you unstuck so you can continue working.

It is important that you ask for help when you are stuck.

We won’t see this as a weakness but as a strength.

We want to know that when you don’t know what to do, you are confident to ask for help.

If you don’t ask for help then you will waste our money or time.

The Test

Watch this video to get an overview of the test

Design Guidelines

These are the design guidelines I would like you to follow when redesigning the site

  1. Choose a blue color as the base color for the whole site
  2. Clean design
  3. Beautiful images to explain the topic and be consistent with the message
  4. Lots of whitespace
  5. A color scheme that is consistent throughout the site
  6. Make sure the padding around elements is consistent and well thought out
  7. Make sure the design works well on mobile

Design Examples

These are examples of the styles of pages I like for this redesign.

  1. https://www.samcart.com/ – This is the one I like the most.
  2. https://elementor.com/
  3. https://www.activecampaign.com/

I don’t want you to use the illustrations on the ActiveCampaign and Elementor sites. I want you to use photos instead.

Step 1: Redesign the Home Page in Photoshop

  1. Recreate the homepage page found at https://demo.thesalesdrivenwebsite.com/ using Photoshop
  2. Call your manager when you have questions
  3. When you are done send them the photoshop mockup as an image so they can give you feedback
  4. Make all the changes they require
  5. IMPORTANT: Get signoff for the mockup before starting the design
  6. Once signed off move on to implementing the design into Elementor using the site we have provided

Step 2: Implement the design into Elementor

Setup the WordPress site so it is ready for design. The changes you should make are:

  1. Setup the headings and base font and colors, using the WordPress Customizer
  2. Create the Header and Footer Using the Elemtentor Header and Footer Templates and implement them on every page using Elemtentor
  3. I want you to use the WPAstra Theme that is installed on the website that I have given you
  4. Create a homepage and implement your design
  5. Optimize for Mobile Devices
  6. Make sure all images are optimized and as small as possible without losing quality

Step 3: Create the Video

  1. Once you are done, create a video explaining a complete a walkthrough of the Photoshop design and the Elementor page
  2. Once you are done upload the video to YouTube and email to marlon@enzango.com along with the photoshop mockup and a link to the homepage

Step 4: Call Marlon

The call Marlon on Skype.