Create - new page UI concept

[ibrarli]

todo

• Create page UI concept
  • @input 📦
    • Previous Design by Toshi
    • Feeback Provided by Nina
    • ui_concept_v0.0.1
    • stickers from assets
    • color palette
    • heading_title_magic_school_one
  • Create moodboard
  • @output 📦 moodboard_v0.0.1 from comment

---

• Create page UI concept
  • @input 📦
  • Make a concept draft on figma
  • @output 📦 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
    • 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

---

• Create page UI concept
  • Update on Sections list in figma
    • output: 🏭 sections_documentation from comment
  • Create new concept draft on figma
  • output: 🏭 ui_concept_v0.0.3 from comment

---

• Create page UI concept
  • @input📦
    • Resource_section
  • Include resource section and footer in our concept design
    • output: 🏭 ui_concept_v0.0.3 from comment
  • Update Moodboard
    • output: 🏭 moodboard_v0.0.2 from comment
  • Create Initial UI of Banner Section
    • output: 🏭 banner_v0.0.1 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 homepage UI
• @input 📦
  • 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 📦 homepage_v0.0.2 from comment

---

• Create mood board
  • Create multiple mood boards based on different relevant keywords
• @output 📦
  • 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 📦
  • final_moodboard
  • Design rough initial concept of banner illustration
• @output 📦 homepage_v0.0.3 from comment
  • Design wizard house for banner illustration
• @output 📦 homepage_v0.0.3a from comment
  • Separate and organized wizard amigos asset
• @output 📦 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 📦 homepage_v0.0.4 from comment
• @output 📦 portal_moodboard from comment

[ibrarli]

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]

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]

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]

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]

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]

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]

tasks - 2024.04.05

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

---

worklog

worklog-5

---

feedback

---

proposals

[ninabreznik]

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]

tasks - 2024.04.06

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

---

worklog

worklog-6

---

feedback

---

proposals

[ninabreznik]

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]

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]

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/

[ibrarli]

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 📦 homepage_v0.0.2

---

worklog

worklog-8

---

feedback

---

proposals

[ninabreznik]

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