codecamp tools concept & design #88
Comments
|
worklog video |
|
|
feedback here are two links you could check for details about codecamps:
I think what you found is a cool example of a little "code camp curriculum" {
"lesson1": ["lesson2", "leeson5"],
"lesson2": ["lesson3", "leeson5"],
"lesson3": ["lesson4", "leeson6"],
"lesson4": [],
"lesson5": [],
"lesson6": ["lesson7"],
"lesson7": [],
}The data would look more complex, but in essence there are 7 lessons in this code camp and for each we list the prerequisite lessons. We can write a program later on to draw the little curriculum skilltree automatically. It doesn't matter if there are 7 or 100 lessons. This is up to the teacher and the lessons they make. when there are only a few lessons, it is easy to navigate, but it gets more difficult if there are a lot of lessons involved. Also - we probably need to keep in mind, that a single lesson could have 0 or 2 prerequisite lessons, but it is also possible that a simple lesson will have 20 prerequisite lessons, which might be more difficult to visualize if we don't have a good strategy. Lastly |
|
|
feedback
thx. agree with the above (just if you could update the
But the upper parts seems to have a menu bar with 4-5 icons.
The menu bar and all that should be move to the bottom.
I like it.
why does the top menu repeat in the sidebar? Can we instead move the top and side bar menu bar on the bottom? All of this needs to be "mobile first" :-) can we do that in the net iteration of the wireframe? The codecamp page is more an overview page Also imagine that:
The rest of your questions, i can't yet answer well, because i first would need to see the changes above, but the wireframe to be mobile first :-) One little idea for curriculum visualization using just emojis was: So to describe the above with words: ...but those details and what they are about is anyway visible to the user when they open the workshop and it opens in a new browser tab anyway. I know the above curriculum is very dense and not super pretty, but for mobile first and during wireframing, maybe it is a quick way to get started and then we can see how to make it nicer. Looking forward for the next iteration wireframe that includes all your notes and stuff, cheers 👍 :-) |
|
So on this screen it shows a bottom menu 👍
and in the middle of the screen it has again
I think just having the menu on the bottom is enough.
Have you seen the previous diagram i did draw? This diagram is maybe not trivial to understand, but it is essentially a file system, with folders and sub folders for each workshop in the codecamp. One file - the Maybe we have to brainstorm a bit about the details so you can better understand this structure, but it could help us visualize the "codecamp curriculum" on mobile or even in the terminal :-) |
|
I collected some examples for how people use figma. see for example Now we cant pay to learn certain new figma features sadly, but there are plenty of youtube videos which might help for some of the techniques, and there are a lot more on youtube. Also regarding my previous feedback. first - bottom menuSo it would be cool to simplify the menu on the bottom to:
second - workshops section of codecampIf you don't understand the diagram well and the description above, lets maybe discuss questions and details in the discord chat 🙂 The issue in your new wireframe is, that the workshops are only disconnected categories or cards in a list. This should rarely or never be the case. Also:
So yes, it should definitely be more like the one with lines that connect lessons you show at the end of the worklog video But, as you can see above, maybe the entire thing could be like a file explorer ...not really, but at least similar. There are again more videos that teach how to do clickable prototypes and we can't really pay for the learning time, but this would be helpful to show how exactly a user can navigate the codecamp |
|
|
|
feedback For example, in order to show every "workshop" from the skill tree behind http://www.dungeonsanddevelopers.com/ we could do it like below. Every The last number (21.) shows the entire codecamp fully expanded and it might still fit on one single mobile screen. |
|
|
|
|
feedback
|
|
hmm, I saw the video, but i didn't imagine it like that. In your video you say there is no space for "server programming" to expand. But see below - things just move out of the way to make enough space for it to expand. This is not possible in the top to bottom layout, because every entry has a title and that title can be long, so you have to create a lot of space ...but in the left to right layout below, every title only needs as much space as the height of the letters, which is very little, so it is easier. task: can you please try to fit in every workshop that is listed in dungeon and developers website (see below) and if they don't fit on one screen, can you make it draggable or scrollable and how that would look like? I think once we have that we are done and can make a high fidelity design // 21.
📌📂┬🗂️dungeons&developers-codecamp🔗
├📂┬🗂️User-Discovery🔗
│ ├📂┬🗂️Graphic-Design🔗
│ │ ├───🗂️Graphic-Design-Tools🔗
│ │ └📂┬🗂️User-Experience-Design-Mastery🔗
│ │ ├───🗂️User-Testing🔗
│ │ └───🖇️web-Development-Mastery🔗
👉 │ └📂┬🗂️Prototypes🔗
│ └───🖇️User-Experience-Design-Mastery🔗
├📂┬🗂️Database-Authoring🔗
│ └📂┬🗂️Advanced-DB-Management🔗
│ └───🖇️web-Development-Mastery🔗
├📂┬🗂️Server-Administration🔗
│ └📂┬🗂️Deployment🔗
│ └───🖇️Server-Side-Development-Mastery🔗
└📂┬🗂️HTML🔗
├📂┬🗂️CSS🔗
│ ├───🗂️CSS-Tools🔗
│ └📂┬🗂️Web-Design-Mastery🔗
│ ├───🗂️jQuery-Effects🔗
│ └───🗂️Web-Development-Mastery🔗
├📂┬🗂️JavaScript🔗
│ └📂┬🗂️JS-Liraries-and-Frameworks🔗
│ └📂┬🗂️Frontend-Development-Mastery🔗
│ └───🖇️Web-Development-Mastery🔗
├📂┬🗂️ServerSide-Programming🔗
│ └📂┬🗂️Server-Side-Frameworks🔗
│ └📂┬🗂️Server-Side-Development-Mastery🔗
│ ├───🗂️User-Authentication-and-Authorization🔗
│ ├───🖇️AJAX-and-APIs🔗
│ └───🖇️web-Development-Mastery🔗
└📂┬🗂️SEO🔗
└📂┬🗂️Analytics🔗
└───🖇️web-Development-Mastery🔗 |
|
|
|
|
|
@todo@input📦what have we built hackmdfrom History : How it all started #45@input📦history content slidesfrom History : How it all started #45@input📦brief summary slide deckfrom project brief @mimi_uxui-dev #42@input📦concept outline descriptionfrom get familiar with wizardamigos #46@output📦figma wireframe1fromcomment@output📦 :figma wireframe 2fromcomment@output📦 :figma wireframe 3fromcomment@output📦 :figma wireframe 4fromcomment@output📦 :figma wireframe 5fromcomment@output📦 :figma wireframe 6fromcomment@output📦 :figma wireframe 7fromcomment@output📦 :figma wireframe 8fromcomment@output📦figma wireframe 9fromcomment@output📦figma wireframe 10fromcomment@output📦figma wireframe 11fromcomment@output📦figma wireframe 12fromcomment@output📦figma wireframe 13fromcomment@output📦figma wireframe 13fromcomment@output📦figma wireframe 13fromcomment@output❓codecamp viewer slides@output❓codecamp viewer linked markdown file per slide in "./slides/<slidename>.md"@output❓codecamp viewer wireframes@output❓codecamp generator slides@output❓codecamp generator linked markdown file per slide in "./slides/<slidename>.md"@output❓codecamp generator wireframes@info! Important: Skip the design/implementation of Code Camp to keep things simple for nowThe text was updated successfully, but these errors were encountered: