Designers #6
Replies: 30 comments 90 replies
|
Please take a look at: |
|
@COS-301/designers please take a look at https://nx.dev/storybook/overview-angular this is such a good way to design. Work with the feature team that does the UI-Kit. They almost HAVE to use this. For mockups and stuff, keep it simple. Draw.io is literally fine. Invision/Adobe XD helps as well. Please don't just focus on design, but also consider UX. (Skeleton loaders, alerts, language etc.) |
|
A few clarifications for the designers to be able to move forward:
|
|
Hi @arlo216 so the UI engineers are primarily responsible for the app/front-end development. You guys have the responsibility of the implementation of your feature's front-ends. Importantly, do not confuse the role of designers with UI Engineers. The Designers are responsible for mockups, wireframes, storybooks etc. The UI engineers need to mostly do the implementation on Angular. You have a huge dependency on the @COS-301/designers and @COS-301/business-analysts , because you will only implement what they defined in the requirements and what their designs show. The designers will do the theme, the corporate identity, etc. You have to implement it. Think of it as Designers do work in Invision/Adobe XD, storybook and hand that over to you to implement. Lets say there is a UI Kit, the Designers design it, the UI Kit develops it and the UI Engineers use it. |
|
Ito verifying designs and stuff with the client. Good question. Since I am the client, I will review it, but I dont have too much of a preferrence, I might just guide a bit. The students can decide for themselves if they are happy. However, the requirments say that it has to conform to UP/Tuks/CS look and feel. But once again, this is the designer's problem, not the UI Engineers. |
|
This makes a lot of sense, thanks! |
|
Would it be possible for the designers to get access to Adobe XD from our student emails? |
|
Err I am the wrong person to ask for that. XD |
|
Hey @arneschreuder, Would it be possible for a Clickup discussion board to be made for us as well. We then can record our meetings for reference as well as for evidence purposes. |
|
That is a good question. I am unsure. I can speak to Stacey about it. However, the documented outcome is most important, as that is what we will be evaluation. So the minutes of a meeting, decisions made etc. |
|
@COS-301/designers For those who haven't seen discord, there is a meeting this Friday, 9th March at 9:30am. Meeting announcements |
|
Hi There. As mentioned, please use the discussion boards to capture these discussions. It is fine if you use discord to have the actual meeting, but please make sure to document decisions and/or minutes on the discussion boards and Wiki :) |
|
@COS-301/designers There's a meeting today (16/03/2022) at 11:30 on Discord. |
|
@COS-301/designers Hello everyone, can we meet tomorrow, Monday 21/03/2022, at 13:00 to make sure that we are all on track? |
|
@COS-301/designers There's a meeting on Saturday 02/04/2022 at 12:00. Update: @COS-301/designers the meeting will take place on discord at 20:00 |
Graduates website colour design discussion. |
|
UP Logo Hex colours: c48b3b (Gold) |
|
#01579B - CS Website Blue |
|
|
|
@ricecakesreece(Reece Stephenson) and I (Tshego Manthata) inspected the CS website and Up portal to assemble a possible colour palette for the website. (This is subject to a vote) |
Meeting minutes |
|
14 March [13:30-14:02] 13:30 colour palette discussed - proposed on Github Attendance: 16/20
|
|
16 March [11:30-12:32] Tshego Manthata (@SeePeeYou) elected as Lead Designer 11:30 colour palette finalised Attendance: 17/20
|
|
@COS-301/designers Based on an update by arne, final mockups will need to be done by Sunday. |
|
21 March [13:00-13:55] @COS-301/designers 13:00 We discussed the mobile friendliness of the components used throughout the webpages. Please note: If it is decided that every webpage would also need a mobile visualization, I already set up templates for everyone to adapt in figma https://www.figma.com/file/Cf4kPiiGSrvITHUzbtzydC/Untitled?node-id=0%3A1 I made this link so that @COS-301/designers can edit the frames. Please duplicate (Ctrl+d) and work on that copy UPDATE @COS-301/designers It was decided that each page would also need a mobile design. @arneschreuder said "each feature will design their own feature to be mobile responsive. But the designer for the PWA/Mobile team must help here and ensure that this gets done. " . Please check out my mobile adapted components to aid you design your webpage's mobile adaptation. Attendance: 9/20
|
|
2 April [20:00 - 20:31] |
|
Get individual feature wireframe by Monday.* |
|
I am part of the UI Kit team, I will be creating a mock Adobe XD wireframe for the UI Kit for the rest of the designers to review during the meeting, I will not be able to attend because of another lecture. |
|
Good day @arneschreuder Just for some clarification of the workflow between designers and the UI Kit team. From my understanding, it seems as though the UI Kit feature is responsible for doing very similar work to designers (e.g. Storybooks, wire frames, skeleton loaders, mockups in Adobe XD). Do they design (with help from designers) the overall UI components, look and feel of the system, and then each designer from each team uses those components to make specific wireframes and mockups for their respective pages? |
|
Hi! So the designers design the UI Kit, the UI Kit implements |
|
@COS-301/designers the color palette you use has to be implemented in material themes. This is the UI engineers’ role |
@COS-301/designers - Wireframes designsIn the next meeting, we will need to decide on universal a nav-bar and a footer that everyone will use for their features since it affects everyones wireframes. |
|
@dylan2894 , I will update the student profile as per your request. Please message me at @SeePeeYou on discord regarding this matter. |
|
|
|
@SeePeeYou Below is the wireframe for the Request for Access contents as it will be seen on the desktop student profile page. Please add this functionality into your mobile PWA student profile page wireframe.
|
|
|
|
Admin Console [UPDATED] |
|
@COS-301/designers Meeting today has been changed from 10:30 to 13:30. |
|
@COS-301/designers I have just completed the first draft design for the UI Kit, here is an adobe preview link where you can review it. https://xd.adobe.com/view/0fad8035-2c28-41f8-9970-07dad914b65a-5afe/ For anyone who wants to look through the original XD document, here is a google drive link to it. https://drive.google.com/drive/folders/1Zn1WLGapaXL-ddRL6HaUzjWKPAsotTZ2?usp=sharing |
|
|
|
Looks good! We can decide from these in todays meeting so we can all start on the proper mockups for our features. |
Potential NavigationTop Navigation
Alternative Colour Pallet
Side Navigation
|
Potential Logos
|
|
I liked this one that you posted with the navigation previously. |
|
Other logos to consider a.
|
|
Nav bar discussion: Please propose the pages and order of pages to be included in the navbar. Also include if there will be any drop downs in the navbar as seen by @joshuabrink1 profile drop down. Upvote the navbars you like :) |
|
I'll be fine with any order, just incorporate notifications as it will be an expandable dropdown menu or a page since there might be a long list depending on the user. |
|
just some ideas for layout not for a final navbar design. the transparent tabs are dropdown menus. Also wondering if we should just combine the header and navbar into one element? |
|
@COS-301/designers remember to document the designs on the wiki here: https://github.com/COS-301/graduates/wiki/Design |
|
@COS-301/designers Hello everyone, please fill out this poll by the end of tomorrow for the final UI Kit design. |
|
@arneschreuder Could you please look at what I have done on the wiki, just want to check if everything is fine. |
|
Looks good to me! |
|
Thank you |
|
Headings/Subheadings/Body |
|
some ideas that I think are free - most of these are also available in some bold/italic version |
|
I'll be designing the 403 page, any opinions?
|
|
I really like this. Please share the font you used? |
|
The top fonts are from the Poppin family, the error message is in Brother 1816. |
|
@COS-301/designers I have finished the UI Kit final Version 1.0, please have a look at it before the meeting using this preview link. I would like to thank @hamza-torres for giving a bit of inspiration for some of my design changes with their design above. This is version 1.0 as there are still a couple of designs I couldn't choose between, so after the meeting today I will apply all agreed upon changes immediately after the meeting for version 2.0 which is what we will use for UI Kit front end implementation. Original File link: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing Preview link: https://xd.adobe.com/view/6e6af053-a90c-4ac9-9051-0e3a29915ded-3b39/ Images: |
|
Here are the 2 layout designs I made for the reels/stories page... no colour yet, i just made a layout design so yeah...
|
|
I am trying to make more but will add the colour etc when i get a better idea of how the navbar and footer will look |
|
Keep in mind, these are very basic.... |
FINAL DESIGN DECISIONS@COS-301/designers These are universal elements that will be used throughout the website |
|
Dropdown menu - Blue
font used in the header: |
|
@COS-301/designers I have finished the final UI Kit version 2.0 design, I will upload it to the wiki as well. Thank you to @joshuabrink1 for the logo design. Preview Link: https://xd.adobe.com/view/99253539-5aa0-48eb-81c1-4e4e99a3d1e1-cc76/ Original File Link: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing Images: |
Questions:Please ask your questions here |
|
Good evening sir, @arneschreuder, I hope you are well. Earlier in the splint, the mobile PWA PM(@druha4087 ) asked how we could go about implementing the PWA functionality and you suggested that we work closely with the UI kit team to ensure mobile friendliness throughout the website. We interpreted this as we would have to work with the UI Kit team to adapt whatever components they create to mobile. Does this mean that the designer and UI engineer roles are obsolete in the PWA team? |
|
Hi There. Thank you for bringing this up. So far this has seem to be the biggest confusion for the teams. Ok, so lets try clarify here. You should not think of things as absolute devisions of labor based entirely by the constraints of a feature/team or role. Sometimes these things overlap and then we work together. Ok, so in terms of Mobile Readiness:
|
|
@arneschreuder Hi Sir, there is still some confusion regarding the UI Kit and Mobile design team, the rest of the designers have expressed some concerns with your earlier answer, earlier you mentioned how the UI Kit will solely be responsible for designs for mobile and how the PWA teams designers and UI Engineer are not obsolete even though they do not design or implement anything regarding the UI Kit for mobile. By not Obsolete, do you mean that the PWA team would collaborate and work with the designers and UI Engineers? (such as the designs being done together by the UI Kit designer and PWA designer) or would it merely be done by the UI Kit designer then reviewed by the PWA team? Also, will the other designers features be required to have a mobile design version or will the PWA team be solely responsible for a mobile version implementation. |
|
So answer you. Please can you help elaborate:
Where did I say the UI Kit is solely responsible for designs for mobile?
Yes, this is a collaborative effort between the designers (of all features), the UI Engineers (of all features) since they need to implement the designs and the PWA/Mobile feature team. Here is the chain of questions: Lets say I can not install the app on my phone, then I am going to ask the PWA/Mobile team why that is the case. If the mobile designs are not mobile responsive, again I am going to ask the PWA/Mobile team and they will tell me "the designs did not include this" and then I will not blame the design team. I will blame the PWA/Mobile team, because their ultimate responsibility is to unsure that the app is usable on mobile. Please do not see it so clearly black and white. There should be an overlap, but someone concrete has to be accountable.
again:
|
|
UI Kit is responsible for providing a reusable UI component library. The components they provide must be mobile friendly. Where does this come from? The designers. How implements it: The UI Kit and UI Engineers. (UI Kit does the library, UI Engineers use it). Who is accountable for all things mobile? PWA/Mobile team. Does that mean they need to do the implementation? No. Does that mean they will help with the implementation: Yes. |
|
Hi Matthew, Good day, can you please export this file as an svg and upload to the drive so I can import it into figma. Thanks in advance. |
|
Here is a link to the UI Kit with svgs for the components. https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing |
|
Thank you ... |
UI Kit Requests:This thread is for requests to add or change components in the UI Kit. |
|
I will add green as well as a disabled version for the buttons. It should be up tomorrow. |
|
it has been updated, check UI Kit progression for the link |
|
@MatthewRobinMarsden These are my components for the admin console, will you please add it to the UI Kit |
I will look to add them to the UI Kit later today. |
|
The admin component version has been updated, my apologies it took so long, please contact me if there are any issues with it @TCarrim88. |
Mock-designs discussion/questions |
|
Hello everyone, I haven't seen any designs yet to be able to standardise font sizes for headings, sub-headings and body text. Ive done what I think fits. I'll link my Figma project below if anyone wants to see spacing, sizing, font, colours and how to do animations. You can click the present button in the top right corner to use clickable/hoverable buttons. Please let me know if I should change anything. https://www.figma.com/file/9t9FpGeWPWDKeCv4Y2HlKq/Student-Explore?node-id=0%3A1 |
|
@SeePeeYou The UI Kit version 4.0 is up, this includes the mobile components. Please look at it. The links are in the UI Kit progression. Images: |
Storybook Thread@COS-301/designers Use this thread to discuss anything Storybook related |
|
Well, I've heard from some UI engineers that they were confused why designers would do storybook in the first place, since that leave very little Angular development for them. Maybe we could ask the UI engineers their opinion, to see if they want to do just create the components from our mock-ups instead of the designers coding them first for UI Engineers to use(since the mock-ups already do have some properties like size, width, colour, rounding e.t.c since we all used the likes of Figma and Adobe XD). |
|
As far as the reason for why Storybook doesn't work, it seems like it is an issue with the names of files and folders of Angular 13 that storybook doesn't know how to access and edit (Saw this somewhere on Stack-overflow) |
|
Hi @arneschreuder, we aren't sure where to go from here with Storybook not working. No one has managed to get it to work and we don't want to halt the project any longer (especially if it it simply isn't compatible with Angular 13). I've spoken to the designers and everyone is on board with going straight to develop the angular components along side their teams UI engineers. I have spoken to the lead UI Engineer @Ruben-Brits and he will speak to the other UI Engineers to to confirm that this is fine with them. We would like your approval to go a head with this so we can start making some real progress again. We don't want to just move on without getting storybook to work, and then later on lose marks for it :( Thanks! |
|
Hi @d-azmanov I would say chuck out storybook. If it doesn't work, it doesn't work. It will cause too much refactoring to add something that is debatable at this point in time. So I agree, get started with Angular components then. |
|
Remember, the main goal is to have features in the release. That gives you good marks. All the other elements are supportive to this goal. If something comes in the way of meeting that goal, chuck it out. |
Uh oh!
There was an error while loading. Please reload this page.
This is the discussion board for and with Designers.
All reactions