Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create - new page UI concept #17

Open
8 of 38 tasks
ibrarli opened this issue Mar 26, 2024 · 20 comments
Open
8 of 38 tasks

Create - new page UI concept #17

ibrarli opened this issue Mar 26, 2024 · 20 comments

Comments

@ibrarli
Copy link

ibrarli commented Mar 26, 2024 •
edited
Loading

todo

  • Create page UI concept
    • Define sections of the page (components)
      • @input:
      • Identify sections on all of the input pages and make a list of all identified sections
      • add also some sections you could come up with based on the info on the meetup
      • list of identified should include a title of the section and a short description of what that section includes
      • list of recommended sections should include a title of the section and a short description of what that section includes
      • create a wireframe defining the rhythm of each section based on user experience
      • output: 🏭 List of Sections from comment
  • Design homepage UI
  • @input 📦 Stickers
    • Designed Banner Section
    • Designed About Section
    • Designed Why Join Wizard amigos section
    • Designed community section
    • Designed Who are we section
    • Designed What Can I learn Section
    • Designed Wizard Magic
  • @output 📦 homepage_v0.0.1 from comment
  • Design new homepage concept design
    • brainstorming and trying different things for the new concept design
    • Design the initial concept draft of the landing page
  • @output 📦 homepage_v0.0.4 from comment
  • @output 📦 portal_moodboard from comment
@ibrarli ibrarli changed the title Create - page UI concept Create - new page UI concept Mar 26, 2024
@ibrarli
Copy link
Author

ibrarli commented Mar 27, 2024 •
edited
Loading

tasks - 2024.03.24

  • Create page UI concept
    • Create a board on pinterest for Timeline section - 30 min
    • @output 📦 Pinterest board

worklog

worklog-1

feedback

proposals

@ibrarli
Copy link
Author

ibrarli commented Apr 1, 2024 •
edited
Loading

tasks - 2024.03.28

  • Create page UI concept
    • Research on previous work done
    • Put together all of the information provided
    • Created a mood board - 50 min
    • @output 📦 moodboard_v0.0.1

worklog

worklog-2

feedback

proposals

@ibrarli
Copy link
Author

ibrarli commented Apr 1, 2024 •
edited
Loading

tasks - 2024.04.01

  • Create page UI concept
    • add also some sections you could come up with based on the info on the meetup - 20 min
    • list of recommended sections should include a title of the section and a short description of what that section includes - 1 hr
    • create a wireframe defining the rhythm of each section based on user experience - 30 min
    • output: 🏭 List of Sections, ui_concept_v0.0.2

worklog

worklog-3

feedback

proposals

@ninabreznik
Copy link
Member

Thanks for the update. I checked the worklog and there is a few things missing:

  • list of identified and recommended sections should include a title of the section and a short description of what does that section include => so far we only have the titles, nothing about what is in each of these sections, can you please add this

  • created a wireframe defining rhythm of each section based on user experience => could you please add also the link to figma to the outputs in the previous worklog so I can later compare the sections document with your wireframe proposal and see if there is anything that would be smart to add

Thanks

@ibrarli
Copy link
Author

ibrarli commented Apr 4, 2024 •
edited
Loading

tasks - 2024.04.03

  • Create page UI concept
    • identify sections on all pages and make a list of all identified sections - 1 hr 5 min
    • list of identified should include a title of the section and a short description of what that section includes 20 min
    • output: 🏭 List of Sections, section_priority

worklog

worklog-4

feedback

proposals

@ninabreznik
Copy link
Member

It looks very good. I like how you approached it, it is definitely a good direction. I made a feedback video this time and we can definitely move to the next step now
https://share.vidyard.com/watch/MbLd68DgoQxxSSeARNTpiu?

@ibrarli
Copy link
Author

ibrarli commented Apr 5, 2024 •
edited
Loading

tasks - 2024.04.05

worklog

worklog-5

feedback

proposals

@ninabreznik
Copy link
Member

Looks great. I would maybe consider adding a footer section where users can find all the most important links and socials.

I added a resources section where i would like to share most important links to some friendly projects, technologies, list of tutorials, interviews etc. I am not sure what would be the best way to do so. We can literally just make a small section with just links, but maybe we can be more creative. It would definitely be links (up to maybe 6 different links, bit this might grow in the future).

Also, I noticed you don't have links to our assets yet, so please if you can add this to the inputs: stickers from assets (https://github.com/wizardamigos/assets/tree/main/Wizard%20Designs) and the color palette we have been using since our illustrator created these stickers for us (https://github.com/wizardamigos/assets/blob/main/Wizard%20Designs/Wizard_Amigos_-_Colour_Pallette_-_2022.pdf)

@ibrarli
Copy link
Author

ibrarli commented Apr 6, 2024 •
edited
Loading

tasks - 2024.04.06

  • Create page UI concept
    • Include resource section and footer in our concept design - 10 min
    • Update Moodboard - 1 hr 20 min
    • Create Initial UI of Banner Section 20 min

worklog

worklog-6

feedback

proposals

@ninabreznik
Copy link
Member

Thanks for the worklog.

  • there was misunderstanding about the menu bar, I didn't think footer should replace it, but rather that we also need a footer. having some sort of menu makes sense, we just have to define what exactly we need on it. Your initial suggestions seemed ok
  • regarding the moodboard:
    • you mentioned stars and I totally do like them. It really depends on the overall design, but the way you used them in the banner section, hey look very nice. Alex and Ali just designed a sparkles component, which we had in the past and we could (also) use this one. It makes sparkles when you move the mouse, it's quite cute.
    • also +1 for some non-linear divider between sections (waves, clouds... we need to find something wizardish, but definitely a yes from me)
    • for the visual elements, I think we shouldn't mix new illustrations with the existing ones as they are not the same style, but we could take some elements out of our existing illustrations (just a cat, or just a computer or just a wizard hat...) or if we figure out we really need some additional elements, I can ask our illustrator to make some additional ones so they match the style
    • good point about the visual element that makes it clear to people that it's about coding => this sitting wizard with laptop in his lap is actually the most popular sticker people took when we offered them to select one or many stickers, so you have the point here
    • reagarding the banner and additional information there (socials, number of members etc.) I am not sure. Maybe we have to try some clean versions and some versions with these additional info. From the first impression I feel it is too commercial, but maybe it depends on which info we put there. I's say, let's play and try out things and see what works best at the end. I don't oppose it, but I am also not super excited about it. Maybe it's also that in the inspiration design, the whole design is way more defined and in your example it's just a quick draft. So,let's try different options and see at the end.
    • definitely a yes to some sort of minimal header (either just a call to join the community or a hamburger menu with links to sections... I don't know, let's explore)
    • coin your own nft now banner inspiration looks nice and clean, I like it, maybe we need a tagline next to wizard amigos text only
    • i also like the other designs with big bold illustrations, ours are also very well done, so we can totally make them big and bold and as I said use full fetched illustration or just take parts of it, we have open vector files, so we are free to use any part we want from any of the illustration (they have many details that can be taken out and scaled)

@ibrarli
Copy link
Author

ibrarli commented Apr 8, 2024 •
edited
Loading

tasks - 2024.04.08

  • Design Homepage UI - 3 hr 10 min
    • Designed Banner Section
    • Designed About Section
    • Designed Why Join Wizard amigos section
    • Designed community section
    • Designed Who are we section
    • Designed What Can I learn Section
    • Designed Wizard Magic Section
  • structure figma files, create issues, issues and worklogs - 20 min
    - output: 🏭 homepage_v0.0.1

worklog

worklog-7

feedback

proposals

@ninabreznik
Copy link
Member

Thanks. I recorded a feedback video https://share.vidyard.com/watch/csGhURZQc5iDUU6xWsnZpt?

In it I mention a page with same html and data but different CSS and how it turns out completely different in each version, so just for inspiraton:

And another cool one where the designer did this whole page only with css and one single div. So all is css only. The page is also super friendly and cute so apart from some css tricks you can 'borrow' for inspiration, it is also a style that is closer to us.

@ibrarli
Copy link
Author

ibrarli commented Apr 9, 2024

tasks - 2024.04.09

worklog

worklog-8

feedback

proposals

@ninabreznik
Copy link
Member

Hi, you can find more detailed comments and discussion on Discord, but here's the summary:

  • the work you did looks super nice, but we still didn't find the right theme, so we can return to this placeholder page and continue after we found the mood/theme. But copying the theme we had so far, this is really awesome.
  • it is normal we search for the mood longer as it is the core of our identity, so don't think you are doing it wrong, it just needs many iterrations. We could do it ourselves, but it takes time and we need to work on other stuff, so we are hoping you can help us here
  • Ali said the timeline is done (but from coding point of view). The theming system we have for the components then enables us to go into any theme we want
  • moodboard should be a theme / which movie are we in => represented with images, art works, designs, anything really that shows that 'world' (so don't search for websites, but anything - photos, movie scenes, art, ...) => anything magical purplish wizardish
  • theme or mood of the brand can then be used for the webpage or game or a movie or anything we want to create for wizardamigos
  • theme/mood is basically throwing a user in a 'movie' about our brand and make them feel the 'story' through the visuals
  • when searching for the right theme don't limit yourself with (she said she doesn't like black, or gradient... here it's about the general theme, not about the website)
  • regarding additonal illustrations - the illustrator who made our current artwork is quite expensive, so I said, I hope we can avoid paying him. But I wasn't aware you can also do illustrations, so of course if we don't have to pay a fortune for new illustrations I am in general fine with having some additional elements if necessary (but they definitely have to fit the theme)
  • next iterration of the design should wait for not, until we find the right theme

@ibrarli
Copy link
Author

ibrarli commented Apr 12, 2024

tasks - 2024.04.12

worklog

worklog-9

feedback

proposals

@ibrarli
Copy link
Author

ibrarli commented Apr 14, 2024

tasks - 2024.04.14

  • Design new homepage concept design
    - Design rough initial concept of banner illustration - 3 hr

worklog

worklog-10

feedback

proposals

@ibrarli
Copy link
Author

ibrarli commented Apr 15, 2024

tasks - 2024.04.15

  • Design new homepage concept design
    - Design wizard house for banner illustration - 2 hr 20 min
    - @output 📦 homepage_v0.0.3a
    - Separate and organized wizard amigos asset - 1 hr 5 min
    - @output 📦 stickers_asset
    • logged task and worklog - 20 min

worklog

worklog-11

feedback

proposals

@ninabreznik
Copy link
Member

@Ibrar-Haidar let me also answer here:

  • let's not go into too many details just yet
  • let's first define the UI/UX concept for the whole page
  • theme: wizard adventure game
  • after the concept is confirmed, we go to sketch out the details (we are thinking to maybe add some futuristic elements - such as a dome instead of a castle (maybe), but we will see when the concept is there and then we can focus on final details)

Think hard/smart how to integrate the timeline and all other aspects of the page, it is a challenging task, so take your time to explore different options and when you are happy share the proposal for the concept. Also if in between you want some feedback, we are here and happy to give the feedback you need

@ibrarli
Copy link
Author

ibrarli commented Apr 20, 2024

tasks - 2024.04.20

  • Design new homepage concept design - 8 hr
    - brainstorming and trying different things for the new concept design
    - Design the initial concept draft of the landing page
    - logged task
    - @output 📦
    - homepage_v0.0.4
    - portal_moodboard

worklog

worklog-12

feedback

proposals

@serapath
Copy link
Member

feedback 2024.04.29

Feedback was provided on discord.
That feedback is supposed to be captured in a document that will be shared in the next worklog. That's the plan and it will also contain links.

Regarding the portal moodboard and page, it in the last worklog above. They look fantastic, but before continuing it needed a more fundamental discussion about the content and concept behind the wizardamigos page as a game.

So all, good, looking forward to the next worklog :-)

@ibrarli ibrarli mentioned this issue May 2, 2024
Open
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ninabreznik @serapath @ibrarli