Portfolio Tonya Abna

Legend

Each of the projects listed below has icons and links that provide more information about the project. In the legend, you can view a brief description of what each of the icons means, or you can click on the description in the legend to get more detailed information.

To view the full information about a project, click on that project's name or thumbnail image.

Project Focus
[+] EXPAND ALL
[-] COLLAPSE ALL
The primary focus of each website or multimedia project – who or what each project was for or about.
Corporate
The project provides tools or information for or about a for-profit company, organization, institution, individual, or entity. This includes websites and multimedia for the public about this entity, online tools for enrollments and purchases, and secure back office websites for handling this entity's business and private information.
Associate
The project provides tools or information for or about an associate or representative of a multi-level marketing (mlm) company. This includes the associate's replicated website, online enrollment forms for associates to join the mlm, the back office website the associates use to handle their mlm business, and multimedia materials for the associates' use.
Corporate and Associate
The project provides tools or information for or about an associate or representative of a multi-level marketing (mlm) company, and about the company itself. This includes websites pairs that have one version for the corporate site and another for the associate's replicated site. The two share the same basic design, but differ somewhat in the content shown. The corporate website typically has a url beginning with "www.companyname", while the replicated website's url usually starts with that associate's name, such as "bob.companyname".
Non-Profit
The project provides tools or information for or about a non-profit company, organization, institution, or entity. This includes websites and multimedia for the public about this entity, online tools for enrollment, purchases, and donations, and secure back office websites for handling this entity's business and private information.
Customer
The project provides tools or information for customers of products or services. This includes websites for purchasing or renewing products or services, or in registering for travel or lodgings, or back office websites with the tools and information a customer needs regarding the products they've purchased or services they've enrolled in.
Event
The project provides tools or information for or about an event. These will typically begin as a marketing and enrollment platform for the event, and then after the event has ended the site is either discontinued, rolls into marketing the next event, or hosts follow-up information about the event like photos, videos, and conference materials. This includes websites and multimedia for the public about this event, online tools for event registration, and secure back office websites for handling this event's business and private information.
Music Group
The project provides tools, products, or information for or about a music group. This includes a band's website or social media site, and multimedia promotional and sales materials.

Project Media Types
[+] EXPAND ALL
[-] COLLAPSE ALL
The type of media each project falls into – what the end product was.
Websites & Applications
Website or Social Media Site
A public website or a profile on a social media website. These include sites for individuals, corporations, events, non-profit organizations, and even for rock bands.
Replicated Website
A replicated website (repsite) for a multi-level marketing (mlm) company. Each associate or representative of the mlm gets their own personalized website and url. These sites are used to present the company's opportunity and their offerings (products or services – or occasionally both). Sometimes the company has separate replicated sites for the two forks of the business, one for the opportunity and one for the offerings. When a new associate or a new customer goes through one of these replicated sites to enroll or purchase, it gets credited to the associate who owns that site. Some replicated sites are listed as "basic", which is a site that the associate gets for free, that has less features than the full, paid-for replicated site. In the case of websites for multi-level marketing companies, the corporate website is usually paired with a replicated website, where the sites share the same design and much of the content.
Back Office Website
A secure website, application, or wiki with tools and information for handling the company's business. These sites require a login and are only available to a specific group of people. In the case of multi-level marketing (mlm) companies, the company will have a separate corporate level back office site to handle the mlm aspect of the business, while the associates have their own back office site to handle their individual businesses. An associate back office site allows the associate to see and handle their downline – the associates who have enrolled in the business through them or through their associates, down the line – and their customers who have enrolled in the company's services or purchased the company's products through them. These associate back office sites provide reports, dashboards, analytics, tools, training, marketing materials, commissions handling, event information, communications, associate profiles and billing information, and everything the associate needs to handle their business online. Other types of companies have these corporate back office sites also, as a secure repository for business tools, corporate information, training materials, analytics, employee resources, benefits information, and more. There are also customer back office sites, with the tools and information a customer needs regarding the products they've purchased or services they've enrolled in. This can include showing order history, tracking orders, setting up autoship, additional purchasing or enrollment, updating billing or profile information, issue reporting and resolution, finding product or service information, making donations, and more.
Transactional Website
A secure website or application used for purchasing products or services, making donations, enrolling or renewing membership in a multi-level marketing opportunity, or in registering for travel, lodgings, or an event. These sites do not require a login to access them, but do have security for handling the transfer of payments and personal information.
Mobile Website or Application
A mobile application or a website meant for viewing solely on a mobile device, such as a point-of-sale kiosk, a tablet, or a smart phone. For mobile applications, this includes applications for iOS and Android devices. For websites, this category does not include responsive websites that are designed to adjust to any type of device, whether mobile or desktop – only those sites specifically targeted to a mobile device.
Multimedia
Branding Materials
Logos and Style Guides created for the marketing and branding identity of a client. These could be used in multiple formats: for websites, printed materials, multimedia, or otherwise.
Print Materials
Marketing, promotional, or informational printed materials produced for or about company, group, organization, event, or individual. This includes printed materials, screenprinted materials, and materials distributed as pdfs.
Photo Editing & Compositing
The taking and/or editing of photographs. This includes taking photos or art directing photoshoots, editing and touching up photos, and compositing photos, graphics, and text from multiple sources into a completed work.
Emails
Marketing, promotional, or informational materials distributed as emails. This includes designing, coding, and sometimes writing content for emails that work seamlessly on any email provider.
Animation
Commercial-length animations for various products. This includes creating the audio and visual elements, content, and composition.
Responsive Media
Responsive Website
A responsive website adjusts its layout and functionality for optimal usability on any device, whether it's a desktop, tablet, phone, or other platform.
Scalable Vector
A scalable vector is a responsive file type used for images and animations. Unlike photos and other raster image types, a vector can scale up or down to any size without losing quality.
Offsite Links
[+] EXPAND ALL
[-] COLLAPSE ALL
Links are provided for most projects, although some are currently inaccessible and disabled. For multimedia projects a pdf is provided when available.
Public Website
An unsecured website, available to all.
Secure Public Website
A secure website that does not require a login to get access. This is typically a site with forms that handle secure information and/or payment processing.
Secure Internal Website
A secure website requiring the user to log in to get access. This is typically a back office site.
Mobile Application or Website
An application that must first be installed on a mobile device, or a website that has been specifically designed for access on a mobile device only (as opposed to responsive sites that conform to fit any screen – desktop or mobile). This also includes kiosk sites, meant for point-of-sale access.
Print Materials
PDF version of printed materials like brochures, banners, etc. Requires the Adobe Acrobat Reader plugin to view.
Flash Animation
A Flash animation. Requires the Adobe Flash Player plugin to view.
Not Currently Available
Items not currently available online are grayed out. This can include any of the types of links listed above. Some sites no longer exist. Some have changed names or urls, so the older version listed below is now invalid. Some are intranets not available outside a company's firewall. Some links are disabled because you cannot get to the page directly, but must follow a happy path to get there, like for many enrollment forms, so that the proper string of data gets sent to the site when you reach it. Some sites were only temporary, like a demo site or an event site. Even among the remaining active links below, some will only get you to a login page, where you won't be able to get further, and some will take you to a more recent version of the site – not the version I worked on. Nonetheless, the links are provided because some employers ask for that sort of thing, and it's kinda cool to be able to look at this and say, "Wow, that's a mighty long list!".

Tasks Completed
[+] EXPAND ALL
[-] COLLAPSE ALL
A multitude of tasks were completed bringing each of these projects to fruition. Keeping it to just the highlights, the icons below indicate which projects involved some degree of design, development, and/or ongoing maintenance. Click on the project name or thumbnail to pop up the project information, including a more detailed list of what specific tasks were completed.
Design & Graphics
Completed one or more of the following design tasks on this project, above and beyond the typical graphic and multimedia work for maintenance:
  • Site Design
    Designed the website and user experience. Includes creating the look and feel for the site and its various layout options and sub-pages, designing its interactivity, wireframing, and outputting and optimizing the sliced graphics for front-end development. May also include the creation of a design brief or other documentation as guidance for its development and maintenance.
  • Responsive Design
    Designed responsive layouts and controls for various screensizes and devices.
  • Branding
    Designed a brand and brand guidelines that express the project's desired representation. May include performing marketing research to gather information to achieve this goal.
  • Logo Design
    Created a custom logo for this client or product. Includes creating raster and vector versions and color and black-and-white options for web, print, and mobile.
  • Graphic Design
    Created custom graphics for this project. May include creating slides, icons, charts, graphs, photos, text effects, ads, banners, and more. May also include the manipulation and conversion of existing graphics, such as converting raster graphics into vectors, outputting and optimizing graphics for web or mobile, and updating content on graphics such as slides, ads, and banners.
  • Flash Animation
    Created custom animations using Flash. Includes creating custom input elements such as graphics and audio, and doing the animation, timing, compositing, and interactivity.
  • Audio Editing
    Edited audio for playback online or for dvd or vhs distribution. May include creating an original musical score using sound bites and loops, or recording and editing original audio.
  • Video Editing
    Edited video for playback online or for dvd or vhs distribution.
  • Presentation Design
    Designed powerpoint presentations for various meetings and events. Includes template design, custom graphics and animation, and may include adding sound and video.
  • Email Design
    Designed email templates and graphics for communications related to this project.
  • Print Design
    Designed items for print, such as mailers, flyers, letters, letterhead, brochures, classroom materials, posters, signage, banners, cards, business cards, tent cards, stickers, books, magazines, publication covers, cd and dvd labels, ads, charts and graphs, conference materials, invitations, and various other publications.
  • Screenprinting Design
    Designed graphics for screenprinting and embroidery on promotional products such as shirts, hats, bags, awards, mugs, and other give-aways.
  • Print Production
    Coordinated the printing of materials, deciding on paper, proofing the print, and in some cases handling the post-print display.
  • Art Direction
    Oversaw the artistic aspects of the project. May include directing photo or video shoots, providing direction and guidance for designers, and coordinating efforts and resources.
  • Photography
    Took photographs at an event or for a photo shoot.
  • Photo Touch-Ups & Compositing
    Edited, manipulated, touched up, or combined photos, graphics, and text. May include adjusting the colors and lighting, adding, removing, or swapping out objects or people, adding or editing overlaid text and graphics, digital plastic surgery – wrinkle reduction, teeth whitening, weight loss, red-eye reduction, etc., fixing wardrobe malfunctions or switching out an outfit entirely, combining photos into a collage or montage, and pretty much anything you can do with Photoshop and imagination.
  • Set Production
    Coordinated the interior design and layout of an area for a photo or video shoot or for an event. Includes preparing decorations, signage, lighting, and sound, and arranging furniture and other resources.
  • Design Consultation & Training
    Consulted on design issues for this project. May include both acting in an advisory capacity, and/or training project team members on how to implement specific design techniques for this project.
Development
Completed one or more of the following development tasks on this project, above and beyond the typical development work for maintenance:
  • Site Build (Template Only)
    Did the initial template for the front-end development for this website for key pages, creating a site template that other developers could use to build the rest of the site. Includes front-end coding and the creation of templates, stylesheets, scripts, and documentation. If the site was designed by another designer, this also includes outputting, optimizing, and sometimes modifying the site graphics from the supplied design. All sites are coded to be cross-browser and cross-platform.
  • Site Build
    Did the initial front-end development for this website. Includes front-end coding and the creation of templates, stylesheets, scripts, and documentation. If the site was designed by another designer, this also includes outputting, optimizing, and sometimes modifying the site graphics from the supplied design. All sites are coded to be cross-browser and cross-platform.
  • Site Build Assistance
    Assisted with building out the pages of the website, based on another front-end developer's templates and stylesheets. May include creating additional templates, styles, and scripts as needed.
  • Responsive Design Coding
    Developed responsive design coding to adjust the site's layout and interactivity as needed for optimal performance, usability, and readability on any screensize or device.
  • Form Handling
    Created code for form handling. May include client-side or server-side validation, field masking, regex matching, customized form fields, AJAX form submission, and more.
  • Parallax Animation
    Implemented custom code to handle parallax animation and scroll-position sensing, accounting for various browser and device differences and providing fallbacks for unsupported devices.
  • Social Media Integration
    Integrated feeds from social media platforms such as Facebook, Twitter, and blogs.
  • Custom Slide Scripting
    Created custom scripts for advanced slide handling. May include responsive slide design and the ability to bookmark slides, start and stop video playback within slides, and animate layers within the slides.
  • Custom Interaction Scripting
    Created custom scripts for various actions and interactivity. May include random content generation, animation, event handling, collapse and expand actions, content filtering, and other various effects.
  • Personalization Coding
    Created custom code to handle personalization: allowing a user to select how they want certain aspects of the site to appear and remembering those selections.
  • Multi-Language Coding
    Implemented coding to allow the user to select which language to display the site in.
  • Flash Actionscript Coding
    Created custom Flash animations and widgets using Actionscript coding. May include scrolling tickers, countdown timers, data visualizations, and more.
  • Video Handling
    Created custom scripts for handling video. May include custom video playback controls, video tracking, bandwidth checking and serving up playback options based on bandwidth, stopping video playback when another video begins playing or when the video's modal is closed or its slide is no longer shown, loading video from various sources and external APIs, handling responsive video and fullscreen video, and more.
  • Database Administration
    Created databases and/or database tables.
  • Database Connection Coding
    Developed code to interact with the database, pulling information from the database and/or adding or updating information in the database.
  • CMS Development
    Implemented a content management system to allow users to create and update content on all or part of the website through an interface. Includes creating the templates for the updatable content, and implementing the user interface for the CMS. May include setting up the security, roles, and restrictions for what the users could alter.
  • Email Development
    Developed email templates (HTML and CSS) for communications related to this project. These templates were created to work on all major email platforms.
  • Section 508 Compliance Coding
    Developed the site in compliance with Section 508 federal guidelines mandating that all electronic and information technology developed, procured, maintained, or used by the federal government be accessible to people with disabilities.
  • SEO Development
    Added code to assist with search engine optimization. May also include submitting the site manually to major search engines.
  • Development Consultation & Training
    Consulted on development issues for this project. May include both acting in an advisory capacity, and/or training project team members on how to implement specific coding techniques for this project.
Maintenance
Maintained the project over time or consulted on its ongoing maintenance:
  • Site Maintenance
    Performed site maintenance duties for this website. May include adding, removing, or updating content, coding, multimedia, and design elements and quality control testing updates.
  • Maintenance Consultation
    Consulted on how to maintain the project, training those responsible for its maintenance.

Portfolio Layout
[+] EXPAND ALL
[-] COLLAPSE ALL
These buttons allow you to choose which layout you'd like to view for the portfolio. The currently displayed layout's icon will be highlighted. Click the icons to switch between different views.
List View
The portfolio will be laid out as a list, grouped by client. This view does not contain project thumbnail images. This layout is best for comparing project details. Click on any project name to get the full project details, including screenshots.
Small Grid View
The portfolio will be laid out as a grid, showing small project thumbnails. Because thumbnail images are included, it may take longer for this view to load. This layout is best for viewing small samples of each project. Click on any thumbnail to get the full project details, including larger screenshots.
Large Grid View
The portfolio will be laid out as a grid, showing large project thumbnails. Because thumbnail images are included, it may take longer for this view to load. This layout is best for viewing more detailed samples of each project. Click on any thumbnail to get the full project details, including larger screenshots.

Filter

Filter the project listing by checking the desired options below:

Filter by Favorites # PROJECTS

Cut the project list down to just my favorites.

These are projects that I'm the most proud of, for various reasons. For some, I really love the resulting design, or I did some above-and-beyond-coding. On others it was a fun project to work on where I got to try new techniques, learn something new, or really exercise my creativity. Some of the projects in my favorites list were large undertakings where I took on many roles and it took extra time and care to get the final product out. And lastly, some of these projects just warm my heart, because they were for a good cause for some great people.

Note: Filtering by favorites will override and reset all other selected filters.


Filter By Focus # PROJECTS
Filter the project list by the primary focus of each website or multimedia project – who or what each project was for or about.

Filter By Media Type # PROJECTS
Filter the project list by the type of media each project falls into – what the end product was.
Websites & Applications
Multimedia
Responsive Media
Filter by Tasks # PROJECTS
Filter the project list by which type of tasks were completed.

Filter by Employer # PROJECTS
Filter the project list by which employer the projects were completed under.

Filter by Industry # PROJECTS
Filter the project list by the type of industry that client services.

Jump Links

The projects below are listed in alphabetical order by client. When filters are applied, the icons for any clients who have been filtered out will be grayed out.


Loading Many, Many Projects...