Hi, I'm Magdalene Dimapilis
UX Designer & Front-End Developer
Hi, I’m Magdalene Dimapilis, a passionate and driven student currently pursuing a diploma in Web Design and Development at Northern Alberta Institute of Technology (NAIT). I’m in my third term and just one step away from completing my studies and stepping into the professional world as a web designer and developer. My journey so far has been one of self-discovery, growth, and embracing change, and I’m excited about the opportunities that lie ahead.
Who Am I?
Hello and welcome to my digital world, where creativity meets code!
I was born and raised in the Philippines, which is where I initially pursued a different profession. I studied three terms of a nursing program and acquired a lot of knowledge in healthcare and patient care. Despite nursing being a rewarding occupation, I knew that my heart was not there. I was fascinated by the world of the virtual, the way sites work, how designs become a reality on a screen, and how technology makes it possible to achieve smooth, engaging user experiences.
In 2023, I made the life-changing decision to pursue my interest in web development and design in Edmonton, Canada. It was the beginning of a new, fresh start for me as a person and a working professional. Ever since I started at NAIT, I have been trying to hone my front-end and back-end development, UI/UX design, graphic design, usability, and so on.
As I head into my final term at NAIT, I'm excited to keep learning, designing, and pushing myself further. I hope to be a well-rounded web developer, tackle innovative projects, and have a career where I can positively contribute through my efforts. I'm particularly interested in front-end and full-stack development, where I can combine my design sensibility with technical ability to create meaningful digital experiences.
Apart from study, I enjoy learning new technology, staying updated with the latest design and web development trends, and working on personal projects that challenge my creativity and technical skills. I am always open to learning, growing, and collaborating with individuals who share the same enthusiasm for web development as myself.
My Recent Work
A selection of my recent projects showcasing my skills and expertise.
Tour Website
This is a project from one of my courses in my first term in Web Design and Fundamentals I. In this project, I created and implemented two new pages, the Tour Page and Checkout Page by importing the given Figma file and extracting required images with optimized file formats and correct naming conventions.
Employing a 960px centered page layout, I incorporated the index page of Assignment 3 and connected all three pages in the main navigation, maintaining consistency in the header, footer, and overall design. I semantically marked up the new pages, structured the content appropriately, and created a functional form on the Checkout Page with field sets, associated labels, and valid inputs to enhance usability and accessibility. I further included CSS styling to the main content, applied consistent typography and layout per the Figma design, and validated the HTML to conform to web standards. This was a process that produced a coherent, effective, and accessible website.
My Role
Lead UX Designer & Front-End Developer
Tools Used
Figma, HTML, CSS, Validation Tool
Key Learnings
I learned in this project how to import and utilize Figma files correctly to design for the web by extracting assets and utilizing consistent layout and styles. I gained a better understanding of semantic HTML through writing properly structured, accessible content and validated forms with properly linked labels and inputs. I also learned how to build a 960px centered page layout and how to manage navigation links between pages for a correct user experience. In addition, I built my CSS skills by maintaining consistent typography, spacing, and visual design as well as adhering to web standards and validation practices, which collectively assisted in the creation of a professional, functional, and consistent website.
Business Portfolio Website
I made this project in my previous term in Web Design and Fundamentals II. Within this project, my role was to design and develop a responsive three-page website for a fictional architectural firm. In the beginning, I turned the whole content into HTML, adding the tags and meta descriptions for each page, and I also built the top-level navigation and the footer menu.
I aligned the layout with the help of the flexbox feature, and I set the CSS directives for flex containers and flex items to develop a dynamic and very flexible design. I saw to it that the layout was flexible by the use of such units as percentages and ‘em’ when the screen size was different. Then I made the media queries for three views so that they are responsive, and I also adjusted the layout and style depending on different breakpoints, and finally, I set the biggest screen to be larger and it was able to have the width of the whole page.
All the way I strictly followed a clean, validated HTML structure, effective use of advanced CSS selectors, and fluid web design principles to deliver a polished, responsive website
My Role
Lead UX Designer & Front-End Developer
Tools Used
Figma, HTML, CSS, Validation Tool
Key Learnings
For this project, I learned how to develop a responsive web page using flexbox for designing the layout, the creation of semantic HTML content that can handle different screen sizes and the use of relative units such as percentages and em for dynamic designs. I became skilled in utilizing media queries to set up different layouts for various mobile devices and creating designs with a maximum width for large devices. Besides, I perfected my skills in ensuring access for people with disabilities, SEO, and using advanced CSS selectors to tailor certain pieces of content.
E-Commerce Food Website Redesign
This is a project from my Web Design and Usability I course. In this project, my main mission started with the homepage enhancement of Rustic Gelato that consisted of recognizing and solving five main errors of usability which are connected with navigation, focus, and forms. The process involved visualizing the design mock-up and making alterations to its layout, placement, color, and the size of various structural elements, thereby improving the user experience and allowing them to see everything they had to.
My Role
Lead UX Designer & Front-End Developer
Tools Used
Figma, HTML, CSS, Validation Tool
Key Learnings
For this project, I learned how to develop a responsive web page using flexbox for designing the layout, the creation of semantic HTML content that can handle different screen sizes and the use of relative units such as percentages and em for dynamic designs. I became skilled in utilizing media queries to set up different layouts for various mobile devices and creating designs with a maximum width for large devices. Besides, I perfected my skills in ensuring access for people with disabilities, SEO, and using advanced CSS selectors to tailor certain pieces of content.
My Expertise
Technologies and methodologies I've mastered to deliver exceptional digital experiences.
Design
Figma
User Research
Wireframing
Prototyping
Development
React
Next.js
Tailwind CSS
JavaScript
Get In Touch
Have a project in mind or want to discuss a potential collaboration? I would love to hear from you.
dimapilismagdalene@gmail.com
Phone
+1 (780) 699-8633
Location
Edmonton Alberta, CA
Availability
I'm currently available for freelance projects and consulting work. My typical response time is within 24 hours.