What Is This?
This is a concept for a UI designer and asset creation tool which is code-centric but includes some of the conveniences of visual design tools. I have two primary use cases in mind.
- Creating wireframes which can rapidly be converted to usable code, because they are code
- Creating marketing assets like splash images, social media headers, documentation assets, etc...
A tool like this may have some potential advantages:
- Very easy to keep your marketing assets up to date with the look and feel of your project
- No need to take screenshots of your software project or recreate elements of it in another tool
- Developers can continue to work with markup and CSS
I'm an individual developer and have found that creating and updating static assets (like OpenGraph images) is a big time sink. Recently I've switched to just using markup and CSS because I figured it'd save time and frustration in the long run, and it has. There might be existing tools already out there that do what I'm proposing but I haven't found them. If you know of one please let me know.
Examples
Live Editing
Working with the editor would look something like this. This example is very far from a usable tool but the general idea is there.
Alignment Helpers
The editor detects the common structures which come up to align things and chooses an appropriate method. In a real version the editor would lock or mark elements and styles it introduced.
Element Dragging
You can change the position of elements around by simply dragging them. The editor would let you use absolute/relative positioning or margins. You'd be able to move elements around the DOM structure with drag and drop. Additionally there would be snap points so you could precisely position an element relative to other elements, similar to guides in Photoshop.
Other Features
Some additional core features that I haven't created examples for...
Component System
- Create custom components with their own markup and styles, which can be used with a simple tag like
<my_component/> - Create a component by selecting an element in another webpage with a browser extension.
- Presets components for common widgets - text messages windows, social media posts, terminals, etc...
- Presets components for wireframing placeholders
OpenGraph Image Generation
- Preset viewport configurations for common OpenGraph image sizes - LinkedIn, ProductHunt, Twitter, etc...
- Can generate an image for all common OpenGraph image sizes with a single button
Feedback
If this is something you'd be interested in using please let me know.