00:00 This video here for members is a quick video walkthrough of the design of VisiCalc. Now obviously I'm recording this before April 1st, but this was an April Fools' Day joke I released publicly.
00:15 It will release slash have released once you're watching this. And I wanted to walk through a bit of the design and look of it just to double check and make sure that, like, it comes across well that you are able to do templates like this, sort of.
00:34 If you're looking for either a retro feel or some kind of vintage feel, or even if you're just like the sort of weirdly neon dark tones or 80s-esque kind of flatness to it, I, I just wanted to walk through what I did to make this particularly like this.
00:53 One thing I did do is I included the user's guide, the commands, and the sheet itself. If you go to Google.
01:00 Google. You just look up VizzyCalc screenshots. This was my base material that I used. If we just go over to images here I just chose this neon one.
01:10 I, I thought, you know, this sort of a blueish tint one was okay, but the one that I saw most of the time was this green.
01:19 Then when I as it has more inspiration, I actually watched videos of it being used, which is actually very hard because it was only used from 1979 until 1983 mostly.
01:33 But I did watch in 2019. There was a an emulator that Dan Bricklin, who was the original inventor of this.
01:41 He used to show some of the features of it. And so I watched him use that in this sort of a recording.
01:48 And here's some more information, you know, history information. There's some spreadsheet history websites and stuff. And I had also, you know found this stuff earlier before I thought of this, I was searching for a research on my own spreadsheet history.
02:02 Articles that may be coming out soon as well. What's interesting is out of all of these options you can see the structural structure of it is the sort of L shaped is the same thing as spreadsheets are today, where you have an almost an infinite number of cells to the right and to the
02:22 down. And so that's, that's wasn't hard to recreate inside of Google sheets, right? Because this is what Google sheets looks like, except much, much more modern.
02:30 One thing I did is I did just take literally these screenshots and I grabbed the color from them. I didn't color fill color.
02:44 And I will show you the hex code was this 374243. It's a grayish, blueish tint. As you can see, or cyan.
02:57 This, I think made it look much, much older than if I just used stark black. That was a choice. And then with this green let's look at this hex color was 32FF32.
03:11 This one is much more crisp and clear. I probably could have made it a little less crisp, but I did want it.
03:19 So I did make an, a conscious decision here. To make it more crisp the green. So it wasn't so muddy and dirty that it didn't just look dirty.
03:29 It felt like it was really used. It was real. And then what surprised me is I had seen these colors, sort of this green color first, a lot of places.
03:41 And then when I started doing deeper I saw there was this white, there was this blue, and I, there is a real feature that you can change the color.
03:49 And so I ended up setting that color. In another video here on Better Sheets, I will go deeper into the code of this.
03:56 That I think is very interesting and shows off a really cool thing, which is the unedit function that's built into Google Sheets.
04:03 So check out that video, go look at that video if you're looking for more of the code and how it works.
04:07 Obviously you know, Google Sheets has many more options and many more features than VisiCalc did, but there was some really interesting features that VisiCalc did that no spreadsheet software does now which I can probably, I'll probably get into in that other video.
04:22 If you notice also the coloring here is also the same black, that sort of muddy black but also the background here is not a stark white.
04:32 We can look at that. It's this FB FB FB. So, this is a similar color to what I always say you should use in Google Sheets, which is not the stark white background, especially if you're using Google Sheets for a long time, hours on end.
04:48 Don't have a stark white and a stark black. The black is black and the white is white. Don't have those.
04:53 This is very similar to that. FB FB FB FB is what I recommend. And also if you check out sheet styles, the extension that I created, the add-on I created that's the FB FB FB is the paper style here.
05:09 Papyrus is a little bit darker. So this was I knew I definitely did not want it to be stark white.
05:18 I wanted it to have a little bit of sheen to it. The the I did choose Consolus for this part.
05:26 I think this is still Times New Roman here. The font here is a leg, a leg gray. I sort of just scan through a bunch of fonts.
05:38 I did try to find something more like Papyrus. That was sort of the original physical. Okay. Actually, I can probably show you.
05:44 I think I have the VisiCalc guide. Here, I use this PDF as sort of a guide of how to style this.
05:53 So I used a real manual. You really use this guide from the real VisiCalc. There's a 264 pages, by the way of the original VisiCalc guide.
06:03 . So you can see that VisiCalc there. What I saw, though, was the cover was very different. And I actively chose not to recreate this cover, because I don't think anyone really cares.
06:18 Like, it's just a cover of a manual that nobody reads anymore 40 years later. But, I did like to, I did want to keep some tribute to this in some way.
06:28 And so I thought this stark sort of whitish one was a little bit better, a little more clean as well.
06:35 And then the reference card you'll see here on the commands. This is the real reference card, or a very similar structure to, the reference card that was included in this guide.
06:47 And I will show you right now if I scroll to find it. So this is the real reference card here.
06:53 And you can see how it's designed. The top left corner is sort of the most common or most used function.
07:00 And then at the very top is the first thing you're going to type in. You have to, Just to type in some digit or some code like a slash or hashtag or did something semi-colon.
07:11 And then there's a line going down to what is the next item you can do. This is an interesting reference card, right?
07:17 This looks almost like a circuit board drawing from the, you know, 60s and 70s, you might say. That's how these computer systems were made, right?
07:27 They were much closer to zeros and ones than our modern software is, especially cloud-based software. But, so this thing, the people who designed this created this thought in that way, and you can see these crisp, you know, arrows the arrows, the lines.
07:44 The angles are very much like how a designer or a blueprint maker or electrical designer would lay things out. If you do this, then this, then this, then this, right?
07:58 Modern software and especially modern software guides, I think are literally written the opposite way. So this is the first thing you type is up here and then you go and see what it does.
08:09 Whereas modern help guides are, say, what do you want help with and then they show you how to do that.
08:16 Oh, you need to go to this part, this part, this part. So the little stuff here like formatting is right.
08:21 I don't know if you can see it right in the center here. Can I? Oh, I can zoom in a little bit.
08:27 There are format changes all on format and she's incredible and just specified format. You can see here defaults to global format default G is general format.
08:40 Dollar sign is dollar. So that's the one I did in my version of visit. Cal. You can even see that the arrows are move.
08:51 It is home up here. I did add the slash blank and the slash C. And you do have to type Y to confirm that is from here.
09:01 But you can see here, you know, this again, the white you get to do. It's sort of this tiny thing.
09:07 And then you have to figure, okay, where is it that I'm doing it? I think one of the reasons also it was done this way is that most people using this would have spent the time reading through this understanding the user's guy understanding all the steps.
09:20 It's a lot of steps to install it. A lot of steps to use it. A lot of. Very specific steps, not necessarily complicated, but just you gotta do them in this particular order.
09:34 Modern software needs to be more intuitive. Sort of you look at it and it needs to be almost paper-like, right?
09:42 A lot of stuff like Notion, Google Docs is like, start with the page. Oh, we know writing and I would say a lot of modern software is abstracted away from this kind of like, here's all the steps to do, this one thing.
09:54 You have to sort of feel your way through intuitively now through software. So I thought this was interesting to show you as well.
10:01 This is where I got the inspiration for that commands there. I think can look somewhere. And looking through the videos of it being used, I did notice that there's all caps.
10:16 So when you type in things here, it turns it into all caps. And a late addition when I was building this was the active cell is this, green.
10:27 I could not actually tell it from the screenshots. Almost all of the screenshots are this particular one where it was like buzz cut.
10:35 And the total is the active cell here. But I didn't infer that. I couldn't really like infer that from seeing these screenshots.
10:43 But I did figure that out once I saw the video of it. Being used and a physical being used, I saw I was like, oh, that that is the active cell.
10:50 So now in, you know, in Google sheets, modern software, it's an outline. But there, there was no outline. You had to, it was the whole thing.
10:59 And it was like very much a big, right? Clean a thing. You only had a few options. So when you do a command, say.
11:06 To see one the active cell will change. Literally the coloring will change there. The background and the text color will change.
11:16 The font I chose for here is press start to player. This is sort of a retro 8-bit kind of font.
11:25 It looked the most. Specifically closest, I guess, looked the most closest, the closest to visit calc here. That's about the only choice I made for the text.
11:40 So I have to say, sort of in conclusion having the retro feel was pretty specifically easy because I just took the colors like a drop from the original screenshots.
11:53 But then I did make some choices of using a sort of a grayish patina. I don't know instead of the, the stark white background, the choice of font was also on point.
12:08 Trying, I tried to find very specific fonts that were close. Oh, here's another one in code stands. There's all types of fonts everywhere.
12:14 Here's consola encode times new Roman Allegra. What I is here consola is here. Then press start to P here. Lots of fonts everywhere that was on purpose.
12:30 I guess to really get, make it really feel like it. And one of the biggest things I can say is if you're trying to create a sheet that has a particular feel one is definitely the colors and two is definitely the fonts are going to help make those feel, feels real.
12:47 Like. It feels real and it feels close to your branding. I think a lot of sheets that I make, especially in the sheet review section and here on better sheets you'll see me talk a lot about branding and I try to get the font right.
12:57 I try to get the colors right and take your existing business and put it in sheets. Don't let sheets sort of be just black and.
13:07 White and aerial, right? They can be much, much more. I hope you enjoyed this design walkthrough of VisiCoc 2023. Bye.