Program Outcomes: IT – Web Development & Design Specialist
1. Implement a front-end user interface
- 1.1. gather business requirements
- 1.2. develop responsive design
- 1.3. analyze solutions to meet user requirements and specifications
- 1.4. design graphics
- 1.5. develop graphics
- 1.6. optimize graphics
- 1.7. meet accessibility standards
- 1.8. display user data
- 1.9. display web API data
What I knew coming into the program
Before beginning this course, I had a rudimentary understanding of the web by knowing how to build a simple HTML and CSS powered website and configuring and compressing graphics in clever and effective ways for web usage. I also was somewhat familiar with the file structure of GoDaddy and how uploading websites to my domain worked, but did not get into the intricacies of file management. As a graduate of IMD, I was fully in-tune with the Adobe suite, but not quite sure how to best translate the content to the web.
What I gained by completing the program
By completing this program, I gained more experience in HTML and CSS, generating graphics for the web, and GoDaddy familiarity, but even more beyond the basics. Most importantly I gained valuable insights on working with teams to deliver on a project scope, communicating with clients to coordinate details of their ideas and what their business needed, and managing time and responsibilities to complete these projects in a timely manner. In this way, I was able to draft, develop, and optimize graphics between my clients and myself in a way that allowed it to be best presented on the web while also fitting the brand it needed to represent.
How I demonstrated the outcome on one or more internship projects
With my first internship project, I made sure to deliver on the criteria of Implementing a Front-End User Interface. I’ve demonstrated this by making the website responsive in all instances and testing across multiple device sizes to make sure that the graphics designed display in a uniform and elegant manner that meets the client’s expectations and the user’s needs. I also made sure to meet accessibility standards by using alt tags on each photo, as well as running the website through an accessibility checker (WAVE) to ensure that any errors were addressed before final delivery to the client.
Links to mentioned projects:
https://www.badgerstatelimousine.com
2 .Implement a back-end web application
- 2.1. gather user requirements
- 2.2. identify problem statement(s)
- 2.3. identify web applications requirements
- 2.4. analyze solutions to meet user requirements and specifications
- 2.5. validate web application design against user requirements
- 2.6. deploy content management system
What I knew coming into the program
Gathering user requirements and identifying problems was something I was already relatively familiar with; when you work in Graphic Design you must have a thorough understanding of the needs of the client’s business. Their status, the issues they currently have, the problems they aim to solve are all considerations when going through the design process. As far as the needs of a web application, and what is needed by both the client and the users in functionality, that requires a more in-depth analysis.
What I gained by completing the program/what I learned
Over the course of this program, I learned that the prioritization is inverted—the user’s experiences with the application is the most important aspect. Design choices may make sense to the designer/developer, and they may make sense to the client, but ultimately if the user fails to understand or navigate the web application due to poor responsive design, outdated and irrelevant content, or confusing navigation choices, the product has failed to deliver. Therefore it is important to discuss with your client what the user may need or what the user could expect to see upon visiting the website and identify the type of experience the client wants the user to have. The purpose of the website needs to be clear, and solutions need to be presented to the user to meet their requirements.
How I demonstrated the outcome on one or more internship projects
Both of my internship projects, as well as my resume/portfolio website, utilize the Content Management System platform with WordPress. The powerful themes provided within WordPress make it easy to generate content that is responsive and allows for updates to said content efficiently without additional configuration. The administrative tools and dashboard, configurable plugins, and visual block editors make it easy to hand-off to the client upon project completion. For example, Faith Evangelical Lutheran Church is mostly an informational website, but they also wanted to implement a page that posts their recorded services for archival purposes and those that cannot currently attend church. However, unforeseen circumstances have led this feature to be delayed. Fortunately, a placeholder page can be constructed in the meantime. This page can have a layout coordinated in advance in terms of arrangement of videos and text. These placeholders can easily be edited, rearranged, manipulated, and most importantly, duplicated. As they begin recording services for posting on the website, the client can expect to update to the most relevant videos while repeating the same uniform layout for visual consistency and user experience.
Links to mentioned projects:
https://www.badgerstatelimousine.com
3. Apply customer experience guidelines
- 3.1. Implement analytics in web application
- 3.2. Search engine optimization
- 3.3. Incorporate unified brand identity
- 3.4. Apply marketing strategies
What I knew coming into the program
Before starting work on websites, I just assumed that no matter how good you were in your search engine optimization, that paying for advertisements was always going to be more efficient than trying to keep up with the algorithm.
What I gained by completing the program/what I learned
Search engines rely on a site’s utilization of SEO features in more ways than providing the user with the correct result. Having good meta descriptions, optimized and updated content, and efficient accessible design also helps the search engine provide legitimate, safe results for that query. Paid advertising and marketing can be a portion of that, but it is more effective and far less costly to promote your website organically. Part of this is on-site SEO, basically utilizing a combination of internal links, keywords, alt and title tags, image descriptions, and the content itself to inform a search engine’s indexing tools that this webpage or series of webpages is the best match to the searcher’s query. The other aspect is off-page SEO, mainly generated through backlinking, or making sure that other reputable websites are linking back to your website and reinforcing your reputation in the process. Off-page SEO is not always within the control of the user, but there are aspects that can be managed, such as social media and video. Promoting your website through these platforms can help spread the word and allow users and other businesses to link back to you as your business and reputation grows.
How I demonstrated the outcome on one or more internship projects/class projects
For Badger State Limousine, I applauded that the marketing that was already done did cast a wide net. However, as the years have gone by since the website’s first iteration, the design of the website changed considerably. The problem that can arise is a web search does not always show the relevant updated marketing materials. As a result, there was little visual consistency presented by the images I had gathered. I addressed this by gathering all materials that existed currently and refining them to modern standards. A new logo was made, and new fonts from Google Fonts were selected to represent the business and used across the website. Images that were too low-resolution to use had been cut, and high-resolution images were reduced to a uniform resolution and aspect-ratio. Images with visible license plates and faces were covered and blurred, respectively. Then, a new promotional video was made using those refined images and exported in an HD quality. I also linked the website to external social media and review sites that the client had requested, like Facebook, YouTube, TripAdvisor, and Yelp. With these optimizations, the website operates less like a website and more like a hub for all of the information about the business and offers an experience for its users.
Links to mentioned projects:
https://badgerstatelimousine.com/about-us-limousine/
4. Integrate web data technologies
- 4.1. design a data model
- 4.2. interpret a data model
- 4.3. query data
- 4.4. verify query results
- 4.5. manipulate data using code
- 4.6. identify web API data model
What I knew coming into the program
In terms of data, I knew that there were external resources that were required for my favorite apps and conveniences of the modern web to function, but I did not know how those were accessed. Naively I thought that it would just be a matter of embedding the content.
What I gained by completing the program/what I learned
As a result of this program, I learned that not all APIs are equal in their power, capacity, or even fees. Though I discovered quite quickly the latter often only applies when the calls to that API exceed a significant amount of traffic, it is still a consideration to keep in mind. Most importantly, you need to have a thorough understanding of what your user expects to be delivered in using this API, so that you only query for the data a user needs when the data is needed.
How I demonstrated the outcome on one or more internship projects/class projects
In the case of a Web API, an API key is needed to query Google Maps. For both Badger State Limousine and Faith Evangelical Lutheran Church, this was necessary to show the location of the business. These maps help users immensely in knowing what is near the establishment. A visual landmark, street formation, or other surrounding business can be a crucial deciding factor in a visitor’s willingness to travel. In addition, being powered by Google Maps allows the address to be opened in another tab and further adjusted for step-by-step directions and distance from their current location. Here I utilized the power of GoDaddy’s built-in CoBlocks, which has a pre-configured Map WordPress block that allows for an embed of an interactive map right on the webpage. This made it simple, just add the block, point to an address, and adjust the placement of the block alongside the others. I could change this to a static map if I wanted to, to reduce the strain of loading on the website and reduce the calls to the API, but I don’t ever anticipate the traffic of either of my internship projects to exceed the thresholds set by companies such as Google or Microsoft.
Links to mentioned projects:
https://badgerstatelimousine.com/contact-badger-state-limousine/
https://faithelc.org/contact-faith-church/
5. Build web-based software applications
- 5.1. code client-side languages to create web-basedapplications
- 5.2. code server-side languages to create web-based applications
- 5.3. debug web-based applications
- 5.4. test web-based applications
- 5.5. deploy web-based applications
- 5.6. demonstrate proficiency using web developer tools
- 5.7. implement strategies for developing secure web applications
What I knew coming into the program
When building websites before this program, I was very basic in my coding proficiency. If the editor did not have drag-and-drop functionality, I would not know how to achieve the effect I wanted. I would often struggle to find a solution, or even a workaround, because I simply did not understand how the code functioned, or how the code interacted with itself.
What I gained by completing the program/what I learned
Throughout multiple courses many of the web’s most popular languages were brushed upon—HTML, CSS, and PHP. Some of my early experiences within these languages were coding the website by myself. The Paradise Theater mock website was created as part of the Design/Implementation/Maintenance/Workflow course, and that was an insightful experience in delivering a professional-quality website mostly from scratch. While it does utilize the Bootstrap framework in portions, a knowledge of the syntax is required in both HTML and CSS to utilize such a framework. It is also necessary when things go haywire with the framework—with today’s modern responsive web it was crucial that I utilize the developer tools to understand why things were (or were not) appearing correctly on device screens both large and small.
How I demonstrated the outcome on one or more internship projects/class projects
WordPress instances are a great framework to launch a website, and the available themes are an invaluable resource in hitting the ground running. An issue that occurred was that the theme’s styling would often overwrite the styling that was intended. In some ways, this worked in my favor—adding new pages to an existing website was a breeze and I could draft a layout very simply, like for Faith Evangelical Lutheran Church, which I was able to create the framework of within a day. However, this worked against me when I wanted to change something specific, or something that did not offer configuration options within the WordPress block editor. This was the case for several elements in the Badger State Limousine website. For example, when wanting to add “acceptance” checkboxes for the Privacy Policy and Communication agreement, the theme of the website would hide the checkbox elements unintentionally. I had to use the Inspect tool of Firefox and the developer console to select the elements one-by-one, turn them off and on, and determine which one was causing the checkboxes to disappear. Then I was able to write a custom rule in the “Additional CSS” tab of the Customize menu in WordPress, which effectively restored the checkboxes.
Links to mentioned projects:
https://badgerstatelimousine.com/contact-badger-state-limousine/
6. Develop project documents
- 6.1. create mock ups
- 6.2. develop wire frame models
- 6.3. implement technical specifications
- 6.4. write comments about code
What I knew coming into the program
The previous program I was involved in (Interactive Media Design – Motion Graphics) gave me insight into developing mockups of graphical elements and layouts to a professional caliber. I have been familiar with photo editors like Photoshop since High School, but coming into this program after IMD, I was familiar with the entire Adobe Creative Cloud suite of apps. In terms of visual mockups I was very comfortable in my knowledge.
What I gained by completing the program/what I learned
Mockups are visual illustrations, but not just for visuals. In the IT-Web Development and Design program, I learned that mockups are helpful for visualizing data structures as well. It is important for the client to know where all data should be stored and sent, whether that is user-submitted data such as for contact forms, or client submitted data such as images and video to be displayed on the website. Project documents extend beyond the visuals entirely; when working on lesson plans over the course of this program, I have learned that there are a series of deliverables that you should present your client to ensure a comprehensive experience for both the user and the client, which include examining competitors and analyzing their websites to understand what customers expect or anticipate when visiting a website offering that service or product.
How I demonstrated the outcome on one or more internship projects/class projects
In the case of Badger State Limousine company, I first examined the current website’s layout and compared it against competitors to understand the strengths and weaknesses of the current website; where we could afford to improve the experience and what we no longer needed. Then I took to creating mockups within WordPress itself through multiple revisions. I found this easier than creating purely visual mockups because performing these changes through the editor gave myself and my client a better understanding of what was possible through WordPress and the theme we had chosen. While WordPress is incredibly robust and powerful, some themes and plugins can present issues in terms of “freemium” feature models. This is an issue we experienced with a few migration tools advertised through WordPress, where upon further investigation their claims of functionality were limited for those using the tools for free. Sites larger than a certain megabyte restriction by our hosting provider were not supported and restoring a backup by uploading it to the server first only resulted in the app requesting payment to unlock the feature. For these reasons, I would mockup in WordPress, take screenshots, and send those visuals and links to the client for review and approval.
Links to mentioned projects:
https://www.badgerstatelimousine.com
Reflection Essay: How I’ve Changed: Then and Now
Coming into this program, I thought that developing websites would be pretty straightforward. That the knowledge of coding wasn’t as essential–so long as I could navigate a web browser, I could find a WYSIWYG (What You See Is What You Get) or Drag & Drop editor to provide me with a functioning website that delivered on the needs of myself, the users, and the client. Designing for a website graphically will also translate 1:1 with my current design knowledge and publishing skills.
Quite honestly, I was naive to think that. I’ve changed my stance on the fundamentals of coding. It may not be necessary to code a fresh webpage for every client from scratch anymore–there exist frameworks and Content Management Systems for speeding up that process–but no matter what you use it is absolutely critical that you have a general understanding of what the syntax is for the languages of your site and how the code changes the appearance of the final webpage. Without this knowledge I would not have been able to troubleshoot when things went wrong, where they went wrong, or how they went wrong. Nor would I have had the capacity to make specific changes to the website for clients when asked; often a particular selector has to be overwritten to deliver the aesthetic the client is going for.
Also, I no longer think that a WYSIWYG is the way to go. It is difficult to explain, but the supposed design “freedoms” you are allowed in a drag-and-drop style editor become limitations once you begin to understand even basic CSS and HTML syntax, as well as use of a browser’s developer tools. Even with a powerful Content Management System running the show, I still had to troubleshoot when an element wasn’t appearing correctly using “Inspect Element” tools within my browser to identify the problem and create a solution that effectively overwrites the defaults set by the theme.
Finally, design hardly translates 1:1 when delivering to a website as opposed to a photo/art portfolio. High resolutions are great for art, but for any other type of webpage, images need to load fast, effectively, responsive, and cohesive. What I mean by that is:
- Fast, that the file size has to be small, lower than 8MB is preferred.
- Effectively, by being a lower resolution image (usually 640×480-1200×800).
- Responsively, by scaling to screen resolution to compensate for lower resolutions through CSS.
- Cohesively, by being in a similar aspect ratio and presentation page-wide, or element block-wide.
In summary, I have learned that the fundamentals are essentials, that WYSIWYG editors aren’t for every project, and that design needs to adapt to web. Likewise, myself–coming from a background from design, I have now adapted my philosophies and practices for success in future web development projects.