
Civilization VI UI, but made in Webflow (a no-code tool) - daolf
https://webflow.com/website/Civilization
======
smt88
Flagged for misleading/clickbait title. Accurate (much less impressive) title
would be: "Civilization VI UI made in WebFlow"

~~~
daolf
amended

~~~
schniederinc
it's actually 'Webflow' \- no camel case

~~~
dang
Belatedly fixed. Thanks!

------
Kapura
This is the UI for civilization, correct? i didn't seem to be able to interact
with the... game part of the game.

Still, Civilization games have impressively complex UI, so even to approximate
that is quite a task.

~~~
sktrdie
Even if it was just state-transitions it would already account for 97% of what
React is used for

~~~
LoSboccacc
yeah even if it is just state transition, a good, depth UX is a huge part of a
game coding budget.

as a solo hobbyist game developer that can dedicate a couple hour/week a tool
like this can save me _months_ of tedious work, as long as establishing a two
way data channel between the ux state and the game state is easy enough.

------
0dmethz
This seems a little misleading. It's the game's UI built in Webflow, but the
_actual game_ is 100% missing from this.

~~~
MaxBarraclough
A real pity, in my opinion. It would have been great if they'd built a highly
polished web-based frontend for FreeCiv, rather than an ultimately unusable
(though still very impressive) tech-demo full of trademark violations, that
will presumably soon disappear under an avalanche of entirely justified legal
threats. It would have been a good deal more work, admittedly.

~~~
csharptwdec19
Well, on one hand it looks like WebFlow is primarily geared towards UI versus
complex logic.

OTOH I'm willing to bet that if someone built Civ 6 in a no/low code tool the
API costs would be astronomical.

------
daolf
All credits to
[https://twitter.com/SarkisBuniatyan](https://twitter.com/SarkisBuniatyan).

Apparently he's having a livestream the 29th showing how he did it.

~~~
timdorr
You can open up the "source" in their preview editor here:
[https://preview.webflow.com/preview/civilization?preview=d94...](https://preview.webflow.com/preview/civilization?preview=d9435087458c2a7101726d996c13b553)

~~~
komatsu
I fear that this is going to be encountered more and more often:

Message Box: _Before you dig in, note that while sites built in Webflow work
in all modern browsers, we don’t actively support use of the Designer in
Mozilla Firefox. For the best experience, use the Designer in Chrome or
Safari. If you’d like to see us support this browser, let us know about any
bugs you run into. Happy designing!_

~~~
jeroenhd
That explains why I couldn't get this demo to work for me. Sad. Guess I won't
be recommending WebFlow to anyone.

~~~
probszachsean
Just use the live site link, it'll work in any browser. Only the Designer (the
tool that you work in to build the websites) don't work in Firefox, every
published site does.

[https://civilization.webflow.io/](https://civilization.webflow.io/)

------
odomojuli
Amazing. Some of the buttons don't quite register or click on time but the
functionality seems to work all the same. Couldn't quite figure out how to
found a city or move my warrior.

This thing loads faster than my actual copy of Civ VI.

~~~
non-entity
bit of a random tangent, but Civ VI does not run well on Linux at all, even
with good specs, even unplayable depending on you exact OS.

~~~
zimmertr
I have it running on Arch Linux about as well as MacOS. Which plainly speaking
means absolutely awful.

My biggest frustration is that the game crashes when it attempts to submit a
play by cloud turn if webhooks are turned on. And it has for a year now. With
no indication it will ever be fixed.

And don't get me started with the game on MacOS completely ignoring mouse
clicks for the right third of the screen.

~~~
non-entity
I tried it on several Ubuntu versions and it was completely unplayable.
Extreme lag in single player and even attempting to start a multiplayer game
will freeze. I was able to play it on Fedora 32 (I suspect the more up to date
kernel probably helped) but it had to be in the lowest settings. Of course I
also have an Nvidia card so I probably asked for it.

They also completely broke cross platform play a while back, although there
was a hack to "fix" it (fix meaning per-turn de-syncs)

------
non-entity
This is a very interesting showcase of what seems like a capable no code tool.
I dont think I've ever seen this much power in one, especially a web based
one, in fact most no-code developed apps ive used are nothing more than plain
old forms, hardly worthy of the app title.

I played with some random no code tool I could find a few years ago, mostly in
the mobile sphere and they seemed very bad producing bloated cookie cutter
applications. Ivenever beleived no-code tools would ever see much adoption but
I'm not sure anymore.

~~~
Nilef
Nocode is much more than that these days! Check out
[https://nocode.tech](https://nocode.tech) and
[https://nocode.tech/learn](https://nocode.tech/learn)!

~~~
jrumbut
Ironically a large part of my current job is writing code that runs
on/interacts with a no/low code platform.

I would advise developers worried about these kind of tools to focus on the
skill that really differentiates a developer who is basically effective from
one who isn't, which is data modeling.

These things shine a spotlight on your high level data skills because you
can't just code around bad database design decisions early in the project.

When the data is exported, your low level attention to detail and consistency
come into focus. Did you encode Yes/No questions consistently? Were there free
text fields where there should have been predefined options?

These low code/no code options are just revealing that coding was never the
hard part of making software.

~~~
justaguyhere
_Ironically a large part of my current job is writing code that runs on
/interacts with a no/low code platform._

Could you please elaborate? What tools do you interact with? Is this mostly
backend work, getting the data out of no code tools for further processing?

~~~
jrumbut
I work with QuickBase and a few others. Data cleaning/import/export like you
said are a big part of it but the larger aspect is client side JavaScript and
working with whatever embedded language the platform has.

The other part is building custom apps that run alongside the no-code app,
often backed by the API. I've implemented some fun things like transactions
that lock so you don't have simultaneous write problems and full text search.

If you are in that business, the distinguishing features that I would look for
is being able to use the relational model, an API or way to run code, and
regulatory compliance (HIPAA, FERPA, 21 CFR Part 11). Native transactions
would be a miracle (for instance update a record and associated child records
and roll back if validation fails).

~~~
justaguyhere
Thank you. Didn't know about QuickBase, looks interesting. It isn't cheap
though!

I'm thinking about picking up some freelance work in this area. Not really
sure where to start

------
SarkisB
Hi everyone! Sarkis here, the creator of the project.

Thanks a lot for sharing it along with your kind words and constructive
feedback. Happy to answer any questions you have. I'm a product designer
specializing in software prototypes and MVPs. I'm on a mission to unlock and
share the full potential of nocode tools.

Unfortunately, they are often viewed as primitive website builders. So I
rebuilt Civilization VI's entire UI and UX to demonstrate how far you can push
nocode today. This is the largest cloneable Webflow project ever released
featuring 12,400 elements, 1800 styles, 1200 assets, and 400 interactions. The
interface can easily be hooked up to a backend to incorporate functionality.
This is not a playable game but a demonstration of how far we can push nocode.
It took roughly two weeks during my spare time. ‎ This prototype is a loving
tribute to Sid Meier and one of my favorite games of all time. I've integrated
all 46 leaders along with their soundtracks and nearly every feature in the
game. The project stands at a whooping 124GB and runs on one single screen. So
yes, you may notice lags from time to time depending on what machine you're
using. ‎ The next time someone tries to dismiss nocode or asks you what's
possible, just ping them this link.

Civilization.webflow.io

Learn more on Webflow.com/sarkis

Follow my work on Twitter.com/sarkisbuniatyan

Watch the masterclass tomorrow on YouTube
[https://www.youtube.com/watch?v=ZXAGmosa7R8](https://www.youtube.com/watch?v=ZXAGmosa7R8)

------
wazoox
My desktop PC is a ~2009 dual core machine, but this is actually almost
usable, the main annoyance being the slow mouse cursor. Everything else just
works fine. Impressive.

~~~
SarkisB
I nearly broke webflow itself building this. So I wouldn't be surprised if you
encounter a bit of lag ;)

------
RubenSandwich
Hello folks,

Webflow engineer here. (On the accessibility team.) We are on a mission to
dramatically make it easier to build for the web and are hiring across a bunch
of roles:
[https://boards.greenhouse.io/webflow](https://boards.greenhouse.io/webflow).

Feel free to reach out with questions about the roles. Contact me at (my first
name) at webflow.com.

------
branon
Amazing, but feels like it doesn't belong in a browser. Will run very slowly
on everything besides reasonable fast Intel hardware.

~~~
SarkisB
It's a prototype designed to push Webflow to the edge.

Everything will eventually end up in a browser :)

------
darepublic
Was somewhat janky but quite impressive nonetheless. Whats not as clear is ..
how easy is it to make this UI in webflow. I can easily imagine making this in
React.. how much less time would it take in webflow? Or is the appeal purely
accessibility to non devs.

~~~
SarkisB
I developed this in two weeks during my spare time and it was a breeze. The
hardest part was extracting all the assets from the game one by one manually
by screenshoting, editing, and uploading.

~~~
darepublic
thanks for replying. I don't know if you're a dev but if you are would you say
this is faster for you than developing via traditional means

------
gruez
Is it me or does the whole thing feel a little... sluggish (on firefox), even
on the main menu? I get it's supposed to be no-code so it's not optimized, but
the whole thing feels significantly more sluggish compared to the feature set
it offers.

There's also some differences from the original

* there's a weird parallax effect if you move the mouse around

* the cursor rotates when you hover over an element, so it ends up pointing straight up

* the menu opening/closing transitions

* when you're creating a new SP game, the leader/civilization information that you get when hovering over a civilization is missing

* none of the sliders work (they "work" when you hover over them, but they don't stick after your release your mouse or leave the hover area)

~~~
SarkisB
This is the largest Webflow project ever made, it completely pushes it the
edge and runs entirely on one screen. So you might notice lags depending on
what machine and browser you use. This is not a typical website or a
reflection of Webflow projects in general.

I'm a product designer and I love Civilization.

I made some personal additions to the prototype that I felt looked and worked
better in my subjective opinion.

I integrated nearly every feature, left out some details because the project
was already too heavy. But things like the leader info could be easily added.

The sliders aren't meant to work but can easily be set up with logic. I left
it out to avoid confusion.

In addition to making additions to the prototype, I also discovered dozens of
mistakes across the UI and fixed many of them or completely replaced them.

------
jbarrozo
I looked at it thru webflow designer, I was like, you're amazing!! I can't
count the hours it took for you to get this.

~~~
SarkisB
Cheers! :)

------
deklerk
What in the world. This is incredible. Could we have a blog post about how
this is achieved? Is there webassembly involved?

~~~
maerm56
It's just images and videos, like InVision or other tools like that. Click
button -> change / overlay an image or play a video.

~~~
SarkisB
This isn't a bunch of slides with hotspots lol

But to your point, isn't what you described most of the web?

------
duxup
My browser is dying here so I'm not able to really get a feel for how it
plays...

I wonder, is the AI any better? (obviously this effort maybe isn't about AI).

I've played a lot of Civ but VI really turned me off with the AI's random
decisions to just rage quite / inability to actually fight a war with ANY
coherent effort.

~~~
Hamuko
> _My browser is dying here so I 'm not able to really get a feel for how it
> plays..._

I don't think it does.

------
jnwatson
I'm genuinely super confused. This could be done in Flash in a couple hours.
Am I missing something or is this just mostly static images with button
transitions? Like what you could do in Powerpoint.

~~~
SarkisB
I will personally give you a blowjob if you can do this in Flash or Powerpoint
in a few hours :)

------
nemacol
I am curious how this is legal. Sorry if this is an ignorant question.

~~~
non-entity
I wager it isn't, sadly but its still incredibly cool.

~~~
nemacol
Thank you for the reply.

------
spcebar
I know "you may only witness our glory on desktop" is a joke, but it comes off
as very arrogant.

~~~
speedgoose
Yes. And it would have been more interesting to show a responsive UI.

~~~
SarkisB
Civilization is originally a desktop-only game with a complex UI. Please feel
free to clone my prototype, make it fully responsive, and attach a more
appropriate joke in the 404 page :)

------
brianbreslin
This is bananas. Didn't know webflow was that extensible.

------
hkcray
Shows how webflow and the like are the future of web dev

------
scott31
Crashed my browser

------
eloff
That's completely insane. Clearly WebFlow is more powerful than I thought.
Props to Sarkis for pulling this off.

~~~
non-entity
This is certainly one of the most impressive works I've seen done with a no-
code tool.

------
wrink
Holy Crap - nice work

------
safog
Incredible stuff!

I'll need to check out some of the no-code tools again, the world has come a
long way from WYSIWYG html tools.

