Crystabelle Lopez, Web Designer

Ziptip™, Inc.

Link:	http://www.ziptip.net/
Services:	UI Design, Implementation
Languages Used:	XHTML, CSS, JavaScript
Software Used:	Photoshop, Notepad++
About:	Ziptip, Inc. was founded to enable the process of giving cashless gratuities directly and anonymously to service providers (Tippees). Tippers do this by using their smartphone to scan a Tippee's Ziptip QR code on a Medallion™. PayPal™ facilitates the transfer of funds from the Tipper to the Tippee. I utilized Ziptip's logo and color scheme in designing the Ziptip website, the accompanying web application's UI, a mobile-friendly mobile application download page, the UI for their iOS-targeted mobile app, and a printed Medallion (a vertical double-sided business card containing Ziptip-specific information) to complement Ziptip's mobile application. The web application includes: Account sign-up form (currently for Tippees only) Account management areas (both Tippers and Tippees) Form for Tippees to customize their printed Medallion

Android™ DevCamp 2011: Website, Logo, Flyer

Links:	Android DevCamp 2011 Website Flyer (PDF, 1.87 MB) Flyer (PNG, 497 KB) Flyer (PNG, 257 KB)
Primary Volunteered Services:	*Volunteer Position: Chief Designer* Website Design and Deployment on Google Sites, Copywriting, Logo and Flyer Design
Languages Used:	HTML, CSS
Software Used:	Photoshop
About:	The event: Android™ DevCamp is all about designing, developing and demo-ing a full-featured Android application. In 2.5 days. Instead of back-to-back presentations followed by several variations of "Hello World," participants work in teams to produce a real, working application in 2.5 days in return for meals and a chance for fame and fortune, should one create the next killer app. My involvement: As a part of the Android DevCamp 2011 Volunteer Team, I contributed to Android DevCamp in various ways, with the following primary accomplishments: Website: Collaborated with a fellow volunteer to continuously organize, edit and format website content. Established the Google Sites-based website's overall look-and-feel by adapting an existing template. Logo: Designed the event's logo - a simple usage of the currently-existing Android Robot and curly brackets (a frequent form of punctuation seen in Android code). Flyer: Designed the event's 1-page, letter-sized, single-page flyer. Incorporated the logo I designed, website color scheme and desired content. I also assisted fellow volunteers with their tasks throughout the 2.5-day event. Please visit the Android DevCamp 2011 Website for more information about this event!

Google Calendar Script

Languages Used:	JavaScript, HTML, CSS3 (text shadow, drop shadow, rounded corners)
About:	In order to enhance their currently-existing website, the Zürich City Rollergirlz roller derby league sought to add a list of their next ten upcoming events, with that list appearing in their website's sidebar with a customized date format. In addition, that list would ideally update itself once the league made changes to their Google Calendar. Although not implemented in the final version, I continued to work on this script for my own learning purposes. I started with Google's own Calendar API sample that illustrated the basics well with data from Google's own Developer Events Calendar, and made some adjustments: Present calendar data in a table instead of an unordered list. Obtain and show both start and end-times. If there is an all-day event, show 'All day' instead of hours. Create extra helper functions to make the code a little more manageable. Add spelled-out months and days of the week, each in their own functions to facilitate internationalization. Style resulting generated HTML with CSS, including some CSS3 attributes. This is still a work in progress - what you see here is the latest working, stable version.

Languages Used:

JavaScript, HTML, CSS3 (text shadow, drop shadow, rounded corners)

About:

In order to enhance their currently-existing website, the Zürich City Rollergirlz roller derby league sought to add a list of their next ten upcoming events, with that list appearing in their website's sidebar with a customized date format. In addition, that list would ideally update itself once the league made changes to their Google Calendar.

Although not implemented in the final version, I continued to work on this script for my own learning purposes.

I started with Google's own Calendar API sample that illustrated the basics well with data from Google's own Developer Events Calendar, and made some adjustments:

Present calendar data in a table instead of an unordered list.
Obtain and show both start and end-times. If there is an all-day event, show 'All day' instead of hours.
Create extra helper functions to make the code a little more manageable.
Add spelled-out months and days of the week, each in their own functions to facilitate internationalization.
Style resulting generated HTML with CSS, including some CSS3 attributes.

This is still a work in progress - what you see here is the latest working, stable version.

Zürich City Rollergirlz - Flyer

Images:	Front, Back
Services:	Design
Software Used:	Photoshop
About:	The Zürich City Rollergirlz Swiss roller derby league offered me the opportunity to design their flyer (my first one, in fact). I incorporated their currently-existing logo, color scheme, desired content and feedback into the final design presented here. This German-language, double-sided, A6-sized flyer is currently being distributed at the league's promotional events. Please visit http://rollerderby.ch to find out more about Switzerland's first roller derby league!

Glendale Community College (GCC), Implementation of Resource25

Link:	https://webschedule.maricopa.edu/GCCE/
Services:	Design, Development
Languages Used:	HTML, CSS, JavaScript
About:	Resource25 (known as R25©, a product by CollegeNET, Inc.) is a web application that facilitates the process for booking rooms for campus events, meetings and course sessions. It grants a college's facility coordinator the ability to easily search for suitable spaces available for the required date and time for any campus event. Resource25 presents a searchable, finalized schedule for end users to conveniently view via a website. The Maricopa County Community College District in Arizona purchased Resource25 for use at all campuses within the district. I was tasked with customizing the associated web-based user interface for the Glendale Community College (GCC) campus Resource25 implementation. In addition, I did the following: Adapted GCC's 30-page implementation of Resource25 so it would seamlessly integrate with the campus's new visual identity. Researched and deployed a Javascript-based calendar that cut down the time required to view an event from approximately 90 seconds to 30 seconds. Created two distinct views depending on who is viewing the site: one for internal employees that granted access to all information, and another for the general public that limited information shown. This website was showcased at the annual CollegeNET 2007 User Conference as part of a presentation by a Maricopa County Community College District IT manager.

Acupuncture for Health

Link:	No longer in business.
Services:	Design, Development
Languages Used:	XHTML, CSS
About:	Acupuncture for Health specialized in helping Phoenix area-based patients experience relief through Chinese Medicine. They sought a simple website to generate interest in their practice.

GCC Faculty Senate

Link:	http://www.gccaz.edu/senate/
Services:	Design, Development
Languages Used:	XHTML, CSS
About:	Glendale Community College's Faculty Senate President approached me regarding updating their current website's design and layout. I created a graphical identity for the Faculty Senate that incorporated key elements from the Maricopa County Community College District-wide Faculty Senate's identity. Finishing touches include CSS print style sheets (making printing easier and less wasteful of paper) and end-user editable HTML. In the end, the project resulted in a more professional and aesthetically-pleasing website that the GCC Faculty Senate is pleased to show to their colleagues.

GCC Tutorials

Link:	Website has changed design format.
Services:	Design, Development, some Content Editing
Languages Used:	XHTML, CSS
About:	A colleague came up with the idea to create visual tutorials to explain how complete basic tasks in software commonly used by many people, such as Microsoft's Word, Excel and Powerpoint applications. Seeing the potential in how such visual tutorials could also explain some of the topics I presented on the Student HelpDesk Website, a partnership was sought. Along with editing the content of the visual tutorials (created in Captivate) and of the basic supporting text, I designed the overall layout of the site and solicited input from my colleague. The aim was to create a site that was light on graphics (for fast loading) and presented the supporting text in an easy-to-follow manner. Finally, I also created the underlying directory structure for the 50+ files involved for easy editing.

GCC Student Helpdesk Redesign

Link:	Website has changed design format.
Services:	(re)Design, Development, Content Compilation and Editing
Languages Used:	XHTML, CSS
About:	The aim of the redesign was to update the look and feel, rewrite and add/delete content, and make it easy to use so that any Glendale Community College community member could get assistance with their user accounts.

Ajax Too Bail Bonds

Link:	http://www.ajaxbailbondsaz.com/
Services:	Design, Development, Translation
Languages Used:	XHTML, CSS, some JavaScript
About:	With over 27 years of bail experience and ability to post bail anywhere in the USA, the staff at Ajax Bail Bonds in Kingman, AZ provide professional services to those finding themselves in jail in either Arizona or Nevada. Ajax Bail Bonds sought to set up a quick, simple website that would provide prospective clients with information, in both English and Spanish. Finishing touches include CSS print style sheets (making printing easier and less wasteful of paper).

Crystabelle Lopez | Web Design For Hire

Hello!