Wireframing Using Semantic HTML and Atomic Design Structures

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s