Year
January - April, 2013
Type
Team, Academic
Role
Front-End Web Designer,
UX/UI Designer
Tools
HTML5, CSS3,
Media Queries, Balsamiq
Amelie is a wedding website, created for a hypothetical fashion company. The current version of the website is an updated website in which I recently made changes to. The initial code was developed in 2013 for a web design class.
Lesson
Project Brief
Create a local two-person fashion company approached your design team to build a website through which they would like to promote and sell their clothing. They focus on creating personalized outfits for specific occasions and they would like to ensure the website emphasizes this personal element. They also mention that the resulting site shouldn't feel 'corporate'.
My Role
I produced all of the code for this website, written in HTML5 and CSS3, some visual assets and some written material.
My partner came up with the initial theme of a wedding website, some of the written material and the company logo.
Challenges
One of the requirements and challenges during class was to restrict any use of Javascript unless it was absolutely necessary, so I have used CSS3 to create all of my interactions, minimizing overhead and remaining faithful to class requirements when having to revamp and update the website afterwards. There is still currently no javascript used for this website.
Reflection
Overall, there were some limitations to making the website because we chose not to use any Javascript for the website. Although creating the website with only HTML5 and CSS3 yields less overhead for website loading times, minimal lag would occur if Javascript was used sparingly.
If I were to revisit the project again in the future without setting restrictions, I would add javascript for some basic interactions such as the overlay menu so that there would be a good balance of Javascript and CSS3, relying more on CSS3 for less overhead.
This is because there is a minor issue when users click on the mobile menu on the top right corner. The web page view is automatically pushed to the very top of the web page and it is not possible to disable scrolling without doing this and without javascript.
Design Process
Initial Site Map
Initial Site Map
This was the initial site map used when I created the balsamiq wireframes for the website. The main change we decided to make was separating the "verbal sketch" from the "bridal ware" page, placing it as a link on the navigation and changing the name of it to "custom" because it was important page for users to visit. We also made the "custom" page accessible from the home page by clicking on the splash image.
We also merged bridal ware, groom ware, maid ware, and accessories into one gallery page and made the product page accessible from all of these web pages by clicking on any product. We also simplified the complexity of the "product" or "product description" page by removing an "alterations" page and linking the product page to the "contact" page for appointment bookings. We decided to make this design decision because interacting with a web page would not be as effective as meeting in person and communicating with the customer on their thoughts of specific alterations.
The "checkout" page was unattached to the "appointment booking" page and linked to the "product" or "product description" page. The web page was also renamed to "cart" and we made it accessible on the navigation.
The "personal account" page was scrapped due to time constraints and the background page was renamed into the "designers" page without "customer experiences" or testimonials because we felt that this content was not a priority.
Initial Sketches
Initial Sketches
These were some of the initial sketches that I made with my partner's input on layout ideas for the website. Some of the main layout ideas remained, but some of them were scrapped when we realized that the ideas were too complex, creating information overload and because we were limited with time.
Balsamiq Wireframes
Balsamiq Wireframes
I created these wireframes in balsamiq individually, following my initial sketches.
Information overload and time constraints caused us to condense some of these web pages such as the "home" page, the "gallery" page and the "product" page. Improvements were made to other web pages such as the "verbal sketch" page, which was collapsed into tabs and turned into the "custom" page.
The "purchase" page was broken down into three web pages, which consisted of a "purchase" page, "cart" page and "receipt" page for less information overload on users.