The project: DDC1975.CA

The Journey in Web Development and Graphic Design: From Process to Proficiency

Welcome to the behind-the-scences of developing a WordPress site!

Styling with CSS: Use CSS to add styles and visual elements to the WordPress site, including custom fonts, buttons, and other UI elements.

Developing the Backend with PHP and MySQL: Build a robust backend for the WordPress site using PHP and MySQL, creating custom functionality and user management systems.

Designing with Photoshop and CSS: Use Photoshop and CSS to create a custom design for a WordPress site, including a unique color scheme, typography, and layout.

Project Details:

The Project:

The project involved developing a professional portfolio website using WordPress and a customized theme. The website showcased my skills, achievements, and previous work to potential clients, employers, and collaborators. It had a user-friendly structure, customized design elements, essential features, and SEO considerations.

Project Scope:

It included creating pages for an about me section, portfolio gallery, resume/CV, contact page, and potentially a vlog section in ASL (American Sign Language).

Web Technologies & Tools:

+ HTML

+ CSS

+ JavaScript

+ PHP

+ MySQL

+ WordPress (CMS)

+ jQuery

+ Adobe Photoshop

+ Adobe Illustrator

Here are a couple of screenshots showcasing the webpages from the current DDC1975.ca.

I have created several portfolio websites over the years to showcase my work. You can view some of my older websites by clicking the links below:

Historical Site Versions of DDC1975.ca

Crafting Website Storyboards

Understand User Goals & Needs: Conduct research to understand what the users want from the website and what problems they aim to solve.
Define Key User Flows: Identify the primary paths users will take on the website to achieve their goals and ensure a smooth user experience.
Create Content Hierarchy: Organize the content into a hierarchical structure, emphasizing the most important information for users.
Design Wireframe Sketches: Create rough sketches of the website layout, outlining the placement of key elements and content.
Review & Iterate: Gather feedback from stakeholders and team members, and make necessary adjustments to improve the storyboard.
Finalize Storyboard: Once satisfied with the wireframes, finalize the storyboard before moving to the visual design phase.
Visualize with Design Elements: Add visuals, images, and graphics to the wireframes to provide a more accurate representation of the website's look and feel.
Ensure Mobile Responsiveness: Verify that the storyboard adapts well to different screen sizes and devices for a seamless mobile experience.
Seek Feedback & Adjust: Continuously seek feedback from users and stakeholders to refine the storyboard as needed.
Collaborate with Developers: Work closely with developers to ensure a smooth transition from storyboard to the actual website development process.

Web Development Strategy - Brainstorming and Layout

Define Purpose & Goals: Clearly articulate the website's purpose and outline the primary objectives you aim to achieve. Understanding the goals will guide all other decisions throughout the development process.
Identify Target Audience: Know your target audience inside out. Identify their needs, preferences, and pain points to design a website that resonates with them and delivers a compelling user experience.
Brainstorm Content & Features: Make a list of essential pages and features your website will have. Consider what content and media elements are required for each page, aligning them with your website's purpose and target audience.
Sketch the Layout: Visualize the website's layout by creating rough sketches on paper or using wireframing tools. Focus on the placement of key elements such as the header, navigation menu, content sections, and footer.
Design & Visuals: Choose an appropriate color scheme, typography, and visuals that reflect your brand and appeal to your target audience. Ensure the design is responsive and visually appealing across different devices.
Organize & Prioritize: Structure your content and features based on their importance. Arrange them in a logical flow to guide users through the website seamlessly.
Develop & Test: Start building the website using your preferred web development tools and technologies. Conduct thorough testing to ensure the website functions flawlessly on various browsers and devices.
Review & Refine: Gather feedback from team members or stakeholders and make necessary adjustments to improve the website's usability and design.
Launch & Monitor: After finalizing the website, launch it to the public. Continuously monitor user behavior and feedback to identify areas for improvement.
Continuously Improve: Keep the website updated with fresh content and new features. Regularly iterate on the design and functionality to meet evolving user needs and industry trends.

Old School Assignments

Interactive Expertise from B.C.I.T.: Showcasing Advanced Flash and ActionScript Projects

Explore my portfolio, once filled with Flash and ActionScript brilliance, which no longer display them on the internet, but here are the set up layout. From captivating animations to immersive multimedia, it showcases my expertise developed during my diploma program, including advanced Flash and ActionScript courses. Although Flash is no longer mainstream, these projects demonstrate my historical proficiency and my ability to adapt to modern tools like Adobe Animate.

A Web Technologies Portfolio Highlighting HTML, CSS and JavaScript Mastery

Explore a comprehensive portfolio that showcases my expertise in web technologies, cultivated through rigorous coursework at the British Columbia Institute of Technology (B.C.I.T.). Dive into a collection of projects demonstrating mastery in HTML and CSS, including responsive design, modern layouts, and old codes (Possibly a few errors. :) ).

Unveiling a Graphic Design Portfolio Powered by Adobe Photoshop and Illustrator

Discover a portfolio that illustrates my artistic finesse and technical prowess, honed through my studies at the British Columbia Institute of Technology (BCIT). Showcase my proficiency in Adobe Photoshop and Illustrator through a stunning array of graphic design projects, ranging from logos to digital artwork.

Conclusion

In this portfolio, I've embarked on a journey that spans from my earliest web endeavors to my formal education at B.C.I.T., culminating in a diploma in web technologies. Through past websites, old versions, and numerous assignments, I've not only honed my skills but also witnessed the evolution of web technology. However, this is not the end; it's just a checkpoint. I'm committed to the ever-changing landscape of the web, embracing every opportunity to learn, adapt, and evolve. The journey continues, and I'm excited to see where it takes me next.