Dart, grade and wireframe

Often analogies around blueprints are made when trying to explain to someone what user experience professionals do for a living, but recently I have been thinking back to my fashion design schooling and realized that pattern drafting has a lot of similarities as well.

Having participated in many different roles throughout my career to date, I have come to the conclusion that all of my experience in completely unrelated fields have a strong influence on how I work as a UX designer now. When I was in the process of getting my Fashion Design diploma, my favourite thing to study and work on was pattern drafting. It is synonymous with putting together a puzzle - much like designing an interface is.

In this post, I am going to try and put my theory to the test…

User research vs trend analysis
Before sitting down to design your architecture for a website or application, you start with researching your user and identifying needs and tasks. In pattern drafting, you research historical and current fashion trends and identify the garment features. A website user may require a shopping cart, whereas a person wearing a dress may require a pocket. The architecture and design has to accomodate this functionality.

Wireframe vs pattern draft
A wireframe identifies functionality, navigational and content requirements so that a developer can build what is being designed. A draft (pattern) identifies functionality, cut lines, orientation and sizing details so that a person constructing the garment can produce it. Wireframes show hierarchy and content weighting, drafts show dimensions and important design elements (ie zipper or button closure?)

Responsive vs pattern grading
Responsive design in the world of the ‘interwebs’ means designing an interface that is device agnostic. Meaning a design is created using a grid that can be resized and adjusted for smaller/bigger screen sizes (I am completely oversimplifying here as this gets more complex - but that is a whole other post). Grading is a technique used in pattern drafting where you adjust and mark the pattern for various sizes. Just as viewports in the online world have some set standards (ie 320, 600, 728, 1024), so does grading (ie for women’s garments size 8, 10, 12, 14).

Prototype vs muslin
Prototypes are often used in conjunction with an agile development and design process, whereby a simple version of an interface is created to test the design - generally a stripped down HTML site with no CSS or functionality. Often times a prototype can be very close to a fully functioning site depending on the project/approach. A muslin, in fashion land is a way to test the design of a garment. You use the cheapest material (simple weave, almost like a bedsheet), and sew your pattern. Often the zippers and closures are not finished and the design is fitted to ensure the design works as intended.

Development vs garment construction
During construction, a developer will use functional specification documentation in order to guide them on how the site/application should work, and thus how they need to build it. During garment construction, a machinist uses markings on the patterns such as dart ends (shaping that requires a distinct construction method) , notches (for lining up your fabric once it is cut, and determining front from back pieces), and grading. The pattern speaks the language of the person sewing the article of clothing, as the functional specifications speaks the developers language (onClick, onHover, on load events).

QA vs QA
Can you guess? Yes, just as we have quality assurance in testing beta launches of sites, there is also quality assurance in fashion products as well (or any product for that matter). For websites you are looking for bugs and broken functionality, for clothing you are looking for functioning zippers, structural issues like a poorly hemmed skirt, bad seams, loose buttons, etc.

So there you have it! If you ever want to experience designing a ‘GI’ (garment interface - yes I just made that up), here is great resource that I used: Patternmaking for Fashion Design

I am thankful that I had the opportunity to learn these skills as it makes me think about designing websites/applications just a little differently…