Website Design

Custom Website

‘[Client Name] Custom’ Artwork Project Task Overview

Initial Steps

  • A new "[Client Name] Custom" Artwork Project Task appears in the Shell.
  • Typically, after the kickoff meeting, the client success manager and the design team will have a handoff conversation about the client's design preferences. For more complex projects, access to the kickoff meeting Zoom recording may be provided.

Information To Gather Before Starting

  • Branding Status: Does the client have established colors, logos, graphic elements, etc.?
  • Design Feel: How ‘corporate’ vs. ‘friendly’ should the design feel? How open is the client to new ideas regarding the overall look?
  • Demographic: What is the demographic of website visitors? Who should be appealed to?
  • Images: Does the client have high-quality branded images, or should stock photos be used? If using stock photos, what guidelines should be followed?

Design Process

Once the marketing team creates the official site map, the design process can start.

  1. Setup:

    • Create an Illustrator file that is 1920 px by ~3000 px.
    • Place a 1200 px wide rectangle in the center of the artboard and create two guidelines on either side. Design can only be done within a 1200 px width, apart from the hero image.

  2. Initial Layout:

    • Start by placing the logo and navigation bars.
    • Use the site map document for the Top Nav & Main Nav items.

  3. Common Site Elements

    • Header: Top Nav, Main Nav, left-justified logo.
    • Hero Section: Hero image, hero messaging, hero CTA button.
    • Buckets: Corresponding to each main navigation page, typically including a visual element (icon or image), a header, a short paragraph, and a button.
    • SEO Copy Area: Formatted with a title, paragraph(s), and usually a bullet point list.
    • Contact Form: Positioned on the right side of the SEO copy area, designed for lead generation.
    • Call to Action Block: Features a confidence-building message and button.
    • Footer: Turtlehut footer with quick contact links, page links, and logo.

  4. Additional Design Elements:

    • Based on the client’s unique needs, such as checklists, featured services, “Why choose us” messaging, emotion-based imagery, etc.

Next Steps

  • Depending on the client, placeholder text may be used everywhere (including headlines) or some preliminary headline copy may be written in collaboration with the copywriting team.
  • After completing the design, get approval from Adam first, make any necessary changes, and then get internal approval from Jim, Matt, and the client success manager.
  • Once the team approves the design, export a high-quality JPG and upload it to the Turtlehut Marvel account for preview viewing.
  • Send the preview URL link to the client success manager (CC Jim, Matt, and Adam) to notify them that the design is ready for their presentation meeting with the client.
  • Await feedback from the presentation meeting. Typically, there are at least one or two minor changes needed after meeting with the client.
  • Make the presentation meeting edits and upload a new JPG to Marvel. Send that link to the client success manager. Repeat as necessary until getting official signoff from the client.
  • Close out the artwork task on the Shell, and then upload the design and all accompanying files to the Drive:
    • Illustrator file
    • Unembedded photos
    • Font files
    • Logo files & favicon
    • Graphic elements like illustrations or custom icons

Template Website

'[Client] Template' Artwork Project Task Overview

Initial Steps

  • A new '[Client] Template' Artwork Project Task appears in the Shell.
  • Typically, after the kickoff meeting, the client success manager and the design team will have a handoff conversation about the client's design preferences.

Information To Gather Before Starting

  • Branding Status: Does the client have established colors, logos, graphic elements, etc.?
  • Unique Selling Points: What makes the client unique? Why should customers choose them? These answers often inspire which homepage CTA blocks to utilize.

Design Process

Once the marketing team creates the official site map, the building process can start.

  1. Setup:

    • Spin up a new development site, then open the dev URL, the CSS variables, and theme files.
    • Go to the appearance panel and add logo & favicon files.

  2. Template Hero Image Guidelines:

    • Use either a blurry or abstract background stock image for the template hero.
    • Create a 1920px by 1080px Illustrator artboard and place the hero image. Turn it to grayscale and export it as JPG.
    • Upload the new hero image to the homepage.

  3. Color and Style Adjustments:

    • Open the Variables CSS file and change color values for all variables to correspond to the client’s branding. Additional colors may need to be added for visibility/contrast.
    • Adjust color variables as needed according to how they display on the site.
    • Edit the bucket area using Main navigation items and Font Awesome icons.
    • Remove unneeded homepage CTA blocks.
    • If applicable, add images to remaining homepage CTA blocks.
    • Use the CSS themes file to make any final visual adjustments, such as:
      • Removing elements of the contact form area for a more minimal look.
      • Changing the hover state of certain text/navigation elements depending on how the color variables display.
      • Making basic adjustments to CTA blocks if necessary.

  4. Approval Process:

    • After completing the design, get approval from Adam first, make any necessary changes, and then get internal approval from Jim, Matt, and the client success manager.
    • Once the team approves the design, take screenshots of the template site and add them to a 1920 px wide Illustrator file to create a mockup. Export a high-quality JPG of the design and upload it to the Turtlehut Marvel account for preview viewing.
    • Send the preview URL link to the client success manager (CC Jim, Matt, and Adam) to notify them that the design is ready for their presentation meeting with the client.
    • Await feedback from the presentation meeting. Typically, there are at least one or two minor changes needed after meeting with the client.
    • Make the presentation meeting edits and upload a new JPG to Marvel. Send that link to the client success manager. Repeat as necessary until getting official signoff from the client.
    • Close out the artwork task on the Shell.

Development Reviews

Initial Steps

  1. A development review task arrives in the Shell.
  2. Open the dev URL.
  3. Open the shared Google doc for [Client] Final Review-Dev.

Review Process

  1. Go through each page of the site paying attention to small details. Make notes in the Google doc for all adjustments that need to be made. Look for:
  2. Font consistency
  3. Color consistency
  4. Hover effects
  5. Padding/spacing of all elements
  6. MOBILE display layout of all pages
  7. Special check of all ‘unusual pages’
    • For example, a package comparison page that is not standard on most Turtlehut builds: check these pages closely for bugs and other visual issues.

Final Steps

  1. Once the entire site is reviewed, send the document to Matt & the client success manager and close out the review task on the Shell.

Last Updated: 9/18/25