Hacker News new | past | comments | ask | show | jobs | submit login
Starting design work in a spreadsheet (clearleft.com)
123 points by hazelnut-tree on July 5, 2023 | hide | past | favorite | 34 comments



I also use spreadsheets but not for content. Not only is it not guaranteed to be available before the design starts, but "design" is much more than just making the UI look nice. Also, applications (which is what I tend to work on) are much more than content.

My method is meant to expose the business rules. I start out with a single column, and I list every "rule" of the application. So something like "A user cannot export their dashboard without a premium account". Once I have a complete list, I go back and tease out any significant nouns and verbs.

So given the sentence "A user cannot export their dashboard without a premium account", the significant terms are "user", "export", "dashboard", and "premium account".

For each of these terms, I create a separate checkbox column and mark the checkbox if the rule applies to that term.

Once you've done this with enough rules, you'll start to see your domain model form. It exposes all sorts of inconsistencies in your rules and forces you to be very clear about how the application is expected to behave. It also forces you to clarify your language because there will be multiple terms that refer to the same concept, and part of the process is removing these duplications.

It's a great way to get clarity around your product before you start building out the experience.


This sounds highly interesting. I'm having a bit of a hard time imagining how this would work for more than let's say 10 rules though, as sometimes they're just not that connected (thinking in nouns and verbs). How do you tackle this? Would you mind sharing an anonymized spreadsheet example?


I’m fine sharing a real example. The sheet below was for a real estate social media app called RealTrade. You may not understand all of the rules without understanding RealTrade but you should be able to get the gist of it.

The blue columns are nouns and the orange columns are verbs. Respectively I was calling these “domain entities” and “domain actions” since this process was inspired by DDD:

https://docs.google.com/spreadsheets/d/1qetSXVpiDKLEVt0hE6pk...


I may write an article describing my process because I do think it’s interesting. But I haven’t really fleshed out what happens after that. Back when I created this, I moved to draw.io and drew up some entity relationship diagrams, but you could take it in a ton of different directions.


Learned functional programming in Excel. Or rather, I had a problem that I knew should be solved in a functional manner and I prototyped it in Excel. This was before I'd ever heard the term "functional programming."

I translated that prototype into JavaScript to implement a somewhat complex web page that had a lot of interrelationships between inputs. This was back when "DHTML" had just become a term of art. It worked perfectly and I'll never forget when, months later in a meeting, a tester was asked if that part of the project was ready; she said "Yeah, he did it. I don't know how he did it but it works."

I keep thinking there is a need for some sort of "next level" spreadsheet software. There are a bunch of uncoordinated ideas in my head for what that would look like, and I haven't seen anything like it emerge yet.


Do you think you could articulate any of them? I'd be interested to hear your thoughts, however incomplete they may be.


Big spreadsheet advocate. I use spreadsheets for everything, basically my entire life is organized in a big excel file. All my finances, to do lists, notes, calendars, etc. Excel is flexible enough you can build almost any "app" inside it. Relevant to the OP, I'm using a CSV file right now to hold/organize the content for a website I'm building (it's highly templated, and in-framework templating seemed like a nightmare...easier to just generate the files out of a spreadsheet).

Similarly, I have known many people who use powerpoint for design work. UI design, interior design, even blueprints/architectural drawings. It just works, everyone already has it.


My wife just uses Excel like graph paper. She likes that you can write lists anywhere on the page. It's hard for me to watch but it works well for her.


The number of times I have bitten my tongue as my wife adds up numbers in Excel using her phone calculator…


How do you manage multiple TODO lists or projects within Excel? I notice that having many projects leads to many lists. For instance you can pile all of your tasks together, separate them by project, or by context. Triaging tasks and prioritizing across projects becomes a major undertaking by itself.

My question is not particular to Excel of course, but you seem like an organized person so I figured I'd ask.


Seconded regarding the versatility. I ran a pre-admission clinic from a VBA app inside Excel for a major university hospital.


I almost think the spreadsheet part of the article is a red herring. It's being used as a literary device to tie together a few useful investigatory methods in a way that puts a bit too much emphasis on the tooling at the expense of the real advice, which is to profile the project and get a good sense of what you're working with before you move on to development.

To put it another way, if you were to boil this down to a one-liner to a colleague, "investigate before developing" is useful advice and "use spreadsheets" is not.


While I agree with you that they focused way too much on using spreadsheet as a tool, I don't think that "use spreadsheet" is not a useful advice. If utilised properly, a spreadsheet could simplify one's life in many ways!


It can be contextually useful advice.


My biggest love of designing (document layout) in a spreadsheet is that I can set oh so many format bits a certain way, say a column width and it stays the same.

Compared to the last couple days at work, where a previously existing dynamic(ish) table of contents in a word document is driving me absolutely batty with how it tries and/or fails to format lines as I edit them to reflect further changes to the document. I want to scream and tear my hair out, good god.


There’s a “show fields” or something (alt-f9?) that turns a dynamic ToC into a code that doesn’t recalculate whilst working on the document.


You might have just saved my hairline.


“every spreadsheet is an app waiting to be born” or something.

But seriously; I love working in a csv to start and then just parsing it into whatever go or rust or Python I’m working with when it comes times to scale it up further. A lot of MVPs would be better suited as a Google sheet shared between customers or friends.


I love spreadsheets! I start with a design doc which usually contains tables in my process: https://github.com/ryanallen/designDoc


The "CLICK TO USE THIS TEMPLATE" link directs to a 404.


That is a Github issue. If you mark a repository on Github as template repository, they create this nice green button, "Use this template", which links to `<repo-url>/generate`, but this button is only visible to logged in users, and URL only works for logged in users.

This is very inconvenient for people who create template repositories. This becomes especially problematic, and makes me wonder what Github product managers are smoking really, that the big green "Use this template" only shows up on wide screen, if your browser is not wide enough the Github product team has decided to hide the most important button of the page.


Oh yeah I was on mobile. You're saying the solution for now is to try this on desktop and look for the button?


I find it almost easier to go straight to interaction prototyping with some of the new tools which make it really easy, like Principle for Mac: https://principle.app/


Related: UI Drafter is specially designed for content design.

https://uidrafter.com

I look forward to hearing from you


Mmmmm, I think before Figma a pen and a paper are easier than that tool, even Google Slides or draw.io are better.


For graphic design yes, but for content design, although paper is easier is not as efficient. For example, when reordering, and grouping sections.

And as you mentioned, even PowerPoint click-through prototypes are valuable and familiar.


It takes some discipline to take the extra steps to use it at first but google drawings is great. Make it is in drawings, then embed it in google docs and google slides that stay up to date.


The best design tool I’ve used is gravity sketch with the oculus quest. Generally I don’t think VR is that great but once the UI and UX are perfected designing physical things will be far superior in VR.

With 2D things like websites I still find sketching to be the best tool.

Ideally there would be a nice app that lets you sketch and create forks of sketches when certain things are pressed. balsamiq does this but the UX isn’t good enough imho.


I know someone who used Excel to design the custom pool in her backyard. It turned out great!


I used Excel sheets with a small grid scale & cell merges to build page layout prototypes for a startup. Didn't have to climb the Figma learning curve (no disrespect to Figma, I'm sure it's great). Would do it again.


Just for drawing mock app screens, I have found Balsamiq[0] to be pretty good (you can do a bunch of stuff with the trial version itself). Not affiliated with them in any way.

[0]: https://balsamiq.com/


Interesting article. I think a big challenge here is crunching the data.

I was looking to see if this scraping is a Sheets feature or something, but it's not clear if the author manually visited all of these pages and extracted all the headers.


>but it's not clear if the author manually visited all of these pages and extracted all the headers.

"For this article I’ve used Screaming Frog to carry out the content scrape"

https://www.screamingfrog.co.uk/seo-spider/


Oh I missed that, thanks!




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: