Giter Club home page Giter Club logo

design's Introduction

Instant Websites Design

Everything related to design/UI/UX in Instant Website

Welcome to the Design repository of Instant Website.

Here we practice participatory, inclusive and open design. What does this mean in practice? It means that anyone can get involed in any steps of our design process.

We currently keep track of open tasks in our TaskBoard

TaskBoard

The TaskBoard is for keeping track of what we're currently working on, who is doing what and at what stage a task is currently at.

Current columns and their meaning:

  • Problem Scoping - We have figured out that we want to solve something. At this stage, we try to nail down exactly what needs solving (including what doesn't need solving) and try to outline it as well as we can
  • Requirements Gathering - The problem has been properly identified, now we can start thinking about what requirements needs to be fulfilled in order to solve that specific problem.
  • Design - A task moves to this column once it's ready to start being designed. If a task is not assigned to someone here, it's up for grabs for anyone to self-assign and start working on.
  • Feedback - Once the design is ready to be reviewed and no more design is currently needed, a task goes into this column. Once here we leave feedback on the work done and try to iterate until the design is as good as it can be
  • Implementation - If there is any work needed for implementing the design, it will be done at this stage
  • Completed - As the column says, everything is done

Links

Instant Website Landing Page in Figma

https://www.figma.com/file/ARy67X7zcUXwOuUywMhQBa/Landing-Page

Figma file responsible for the website that ends up at https://instantwebsite.app and https://beta.instantwebsite.app If you want access to edit the file, please open a new issue in this repository

Instant Website Community Chat

https://discord.gg/3xwAnZAh7m

For any real-time discussions around Instant Website

Open Design Resources

https://www.figma.com/file/i7xYFVP2SWweCAZqp0QoGJ/Open-Design-Resources?node-id=0%3A1

A starting point for people interesting in Open Design. Made by the great people hanging out in #open-design @ Friends of Figma Slack

#open-design in Friends of Figma Slack

https://join.slack.com/t/friendsoffigma/shared_invite/zt-ik34xnbk-YhDjaoGrMSWzBygdmbfP~Q

A Slack channel in the Friends of Figma Community for discussing Open Design

design's People

Contributors

victorb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

design's Issues

Add "Contributors" page

Thanks to @CCoupris we have a new, awesome design for the landing page in the works \o/

In tandem with this, it would be nice to have a page dedicated just to the people who helped make Instant Website what it is.

This page could be linked in the footer, probably next to the "About" page, or maybe as a section on the About page, unsure.

Here we can list (optionally, depending on what people want):

  • Name
  • What they contributed
  • Any links they want attached
  • Maybe a profile picture

Add "Open Design" section to website somewhere

The landing page doesn't mention anything about the design process we're trying to implement. Would be nice to have a specific page for it somewhere, but we might want to wait until we have more details about it.

Same design in Dashboard as for Landing Page

Current design on the landing page and inside the dashboard is vastly different, mostly because the Dashboard was built as-needed without any upfront design while the landing page was built almost exactly the opposite way.

Would be great, once a general theme and design have been nailed down, to unify them to look more alike.

Custom illustrations with copyleft/open license

Current illustrations on the landing page are illustrations that have been picked and licensed from Adobe Stock.

Would be much nicer if we had a set of custom illustrations that not only fit better with the landing page, but are also copyleft/open for others to reuse/remix as needed.

Making illustrations from scratch is way above my skill level though, hence licensing illustrations from Adobe Stock was done instead.

What does open / open sources design mean for you?

Would be great to have more thoughts and feedback from people around what open / open sources / copyleft design actually mean to them, so we can make sure the process is open and inclusive enough for others to want to contribute.

Plugin V2 Design

Current plugin is lacking a lot of features that would make the UX a lot better.

  • Select which website in Instant Website to be connected to (dropdown with a list of websites)
  • Login without copy/paste tokens (a button for triggering the login + show current logged in user)
  • Select which account we're authenticated with (dropdown with list of currently logged in users)
  • Properties panel for adding attributes to elements (we want to be able to add videos via URLs for example), should be able to be easily extended in the future as we add more attributes
  • General settings for the current website (like starting page, description and so on), also easily extendable
  • Loading states for when you change connected account/website and we need to reload resources from Instant Website

Existing features that should also be in V2:

  • Create/update the website
  • Link to Dashboard and Instant Website landing page

The design of the plugin should follow the general design of Figma so it looks familiar to the users. See UI2: Figma's Design System and Figma Plugin DS UI Library. Another community file with some reusable elements: https://www.figma.com/community/file/783443376634935772

Create use case examples

In order to show what Instant Website can be used for, it'd be great to have bunch of example websites created with Instant Website.

I've created a couple of issues that can all be worked on independently, and once they are created we can link them from the Instant Website website.

The basic idea here is that we create independent websites for each one of these that showcase how Instant Website can be used. So for the documentation use case, we create an example website that could act as a base documentation website.

Current issues:

  • Landing Page #11
  • Documentation #12
  • Portfolio #13
  • Data Visualization #14
  • Story #15

Figure out how to actually manage "Open Design" process and where to host it

Currently using the GitHub issues here, but that might not be the best way of managing this.

Secondly, we can take a look at Notion. Unsure how their pricing would work for us (think we have to pay per user, which is not gonna work for a truly open and inclusive process), but need to take a deeper look.

The tool needs to at least support (ad-hoc or natively):

  • Creating/closing tasks that should be done
  • Assigning people to tasks
  • Facilitate discussions around specific tasks
  • Ideally have a way of setting up dependencies between tasks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.