Applying Semantic HTML and Atomic Design Structures to Great Lakes Shipwreck Data
This is an ongoing project involving creating searchable and re-usable data structures around the vast data set (6000+ entries) of Great Lakes Shipwrecks that I’ve scraped.
My goal is to create a site that not only allows for a meaningful exploration of shipwrecks in the Great Lakes, but allows for a community of interest to develop and submit shipwreck data.
Creating Re-Usable Semantic HTML
The idea here is to create a semantic HTML structure independent of the final visual design of the site. Whether this info is laid out on a large or small screen or with any number of stylistic elements, the base information structure will remain the same.
Semantic HTML to Atomic Design Elements
The idea of Atomic Design is to create re-usable smaller structures from the semantic HTML elements and then use them to build the larger site elements. Here I’ve created the base elements to use later. The items on the left are used to construct the more complex elements to the right, which will be used to construct even larger structures for the site.
From HTML to Wireframe
Although this sounds backwards, the semantic structuring of the data in HTML leads to design structures that are more useful and re-usable in the visual design and development phases. Here I’ve developed wireframes using the structures from the semantic HTML and the principles of Atomic Design.
Sitemap and User Flow
Using the Figma design tool, I created a sitemap to document user flow.
I then began with low-fidelity explorations of user-stories for research-based personas.
Then I moved on to wire-framed storyboards depicting the same user stories.
Design changes at the atomic level are reflected throughout the wire-frames saving significant time. The “component” feature in the Figma design tool is especially useful for this. I am able to use the same process in Adobe XD, but I prefer Figma for the wire-framing process.
InVision App and Adobe XD become more useful in the next stage, involving more visual design and hi-fidelity prototyping.
