Create - new page UI concept

Ibrar-Haidar commented 3 months ago

`todo`

[ ] Create page UI concept
- @input :package:
- [ ] Create moodboard
- @output :package: moodboard_v0.0.1 from comment
[ ] Create page UI concept
- @input :package:
- [ ] Make a concept draft on figma
- @output :package: ui_concept_v0.0.2 from comment
[ ] Create page UI concept
- [ ] Define sections of the page (components)
  - @input:
  - old wizard amigos page
  - code camp 2022
  - code camp 2023
  - wizard amigos meetup
  - [x] Identify sections on all of the input pages and make a list of all identified sections
  - [x] add also some sections you could come up with based on the info on the meetup
  - [x] list of identified should include a title of the section and a short description of what that section includes
  - [x] 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: :factory: List of Sections from comment

[ ] Create page UI concept
- [ ] Update on Sections list in figma
  - output: :factory: sections_documentation from comment
- [ ] Create new concept draft on figma
- output: :factory: ui_concept_v0.0.3 from comment

[ ] Create page UI concept
- @input:package:
  - Resource_section
  - [ ] Include resource section and footer in our concept design
    - output: :factory: ui_concept_v0.0.3 from comment
  - [ ] Update Moodboard
    - output: :factory: moodboard_v0.0.2 from comment
  - [ ] Create Initial UI of Banner Section
    - output: :factory: banner_v0.0.1 from comment

[ ] Design homepage UI
- @input :package: 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 :package: homepage_v0.0.1 from comment

[ ] Design homepage UI
- @input :package:
  - Feeback by Nina
  - zen garden - same HTML different CSS
  - A single div
  - [ ] Create New moodboard on pinterest
  - @output 📦 pinterest_moodboard_v0.0.1
  - [ ] Design template for homepage
- @output :package: homepage_v0.0.2 from comment

[ ] Create mood board
- [x] Create multiple mood boards based on different relevant keywords
  - @output :package:
- purple_moodboard from comment
- wizard_moodboard from comment
- wizard_cat_moodboard from comment
- spell_magic_moodboard from comment
- pink_moodboard from comment
- fantasy_moodboard from comment
- wizard_items_moodboard from comment
- Sorcery_moodboard from comment
- wand_mooboard from comment
- Mage_moodboard from comment

[ ] Design new homepage concept design
- @input :package:
  - final_moodboard
  - [x] Design rough initial concept of banner illustration
- @output :package: homepage_v0.0.3 from comment
  - [x] Design wizard house for banner illustration
- @output :package: homepage_v0.0.3a from comment
  - [x] Separate and organized wizard amigos asset
- @output :package: stickers_asset 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 :package: homepage_v0.0.4 from comment
  - @output :package: portal_moodboard from comment

Ibrar-Haidar commented 3 months ago

tasks - `2024.03.24`

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

worklog

worklog-1

feedback

proposals

Ibrar-Haidar commented 3 months ago

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 :package: moodboard_v0.0.1

worklog

worklog-2

feedback

proposals

Ibrar-Haidar commented 3 months ago

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: :factory: List of Sections, ui_concept_v0.0.2

worklog

worklog-3

feedback

proposals

ninabreznik commented 2 months ago

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

Ibrar-Haidar commented 2 months ago

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: :factory: List of Sections, section_priority

worklog

worklog-4

feedback

proposals

ninabreznik commented 2 months ago

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?

Ibrar-Haidar commented 2 months ago

tasks - `2024.04.05`

Create page UI concept
- Update on Sections list in figma - 40 min
  - output: :factory: sections_documentation
- Create new concept draft - 20 min
- output: :factory: ui_concept_v0.0.3

worklog

worklog-5

feedback

proposals

ninabreznik commented 2 months ago

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)

Ibrar-Haidar commented 2 months ago

tasks - `2024.04.06`

[ ] Create page UI concept
- Include resource section and footer in our concept design - 10 min
  - output: :factory: ui_concept_v0.0.3
- Update Moodboard - 1 hr 20 min
  - output: :factory: moodboard_v0.0.2
- Create Initial UI of Banner Section 20 min
  - output: :factory: banner_v0.0.1

worklog

worklog-6

feedback

proposals

ninabreznik commented 2 months ago

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)

Ibrar-Haidar commented 2 months ago

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: :factory: homepage_v0.0.1

worklog

worklog-7

feedback

proposals

ninabreznik commented 2 months ago

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:

https://www.csszengarden.com/pages/alldesigns/

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.

https://a.singlediv.com/

Ibrar-Haidar commented 2 months ago

tasks - `2024.04.09`

Design Homepage UI
- Create New moodboard on pinterest - 1 hr 20 min
- output 📦 pinterest_moodboard_v0.0.1
- Design template for homepage - 30 min
  - @output :package: homepage_v0.0.2

worklog

worklog-8

feedback

proposals

ninabreznik commented 2 months ago

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

Ibrar-Haidar commented 2 months ago

tasks - `2024.04.12`

Create mood board
- Create multiple mood boards based on different relevant keywords
  - Purple mood board - 50 min
  - wizard mood board - 1 hr
  - wizard cat mood board - 30 min
  - magic and spell mood board - 20 min
  - pink mood board - 20 min
  - fantasy mood board - 30 min
  - wizard items mood board - 45 min
  - sorcery mood board - 5 min
  - wand mood board - 25 min
  - mage mood board - 30 min
    - logged task and worklog - 20 min
    - @output :package:
- purple_moodboard
- wizard_moodboard
- wizard_cat_moodboard
- spell_magic_moodboard
- pink_moodboard
- fantasy_moodboard
- wizard_items_moodboard
- Sorcery_moodboard
- wand_mooboard
- Mage_moodboard

worklog

worklog-9

feedback

proposals

Ibrar-Haidar commented 2 months ago

tasks - `2024.04.14`

Design new homepage concept design
- Design rough initial concept of banner illustration - 3 hr
  - logged task and worklog - 20 min
  - @output :package:
- homepage_v0.0.3

worklog

worklog-10

feedback

proposals

Ibrar-Haidar commented 2 months ago

tasks - `2024.04.15`

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

worklog

worklog-11

feedback

proposals

ninabreznik commented 2 months ago

@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

Ibrar-Haidar commented 2 months ago

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 :package:
- homepage_v0.0.4
- portal_moodboard

worklog

worklog-12

feedback

proposals

serapath commented 2 months ago

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 :-)

wizardamigos / new-webpage