DEV Community

Justin Kelly
Justin Kelly

Posted on • Updated on

Web Component Design Considerations

While building a web component, our project team considered various features and use cases that would be necessary for the design. When developing a card, we will have better control on the design of each particular area by sectioning off multiple elements. For example, we plan to work on the header and footer as two of the elements, which will be useful for information that is consistently on the top and bottom margins of the page. In addition to the header and footer, one element will be for navigation. A top navigation bar is one part of the user interface that is also consistent in its content, and provides users steady access to practical functions. We also plan to have an element to preview content which could be helpful for increasing the overall readability.

We expect the header, navigation, and content preview to be the most challenging to implement. The header and navigation bar will need to be synchronized in a way that keeps the two elements from becoming redundant. To address this, we need to make a decision on which information is included within the header, and which content should instead be placed elsewhere in the card or in the navigation bar. The glaring challenge for a preview element is determining what content is in the preview compared to what is hidden by default. The element needs enough content to be indicative of what is being previewed, and still be useful enough that it is worth having the preview element in the first place. After making the button, I feel much more confident collaborating using GitHub. I also think that designing this component will be easier now that we have had experience with the development process for a web component. We hope to keep it simple, and achieve a component that is functional and reusable.

Top comments (0)