Designers

[arneschreuder]

This is the discussion board for and with Designers.

[arneschreuder]

Please take a look at:

• https://nx.dev/storybook/overview-angular

[arneschreuder]

@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.)

[arlo216]

A few clarifications for the designers to be able to move forward:

@arneschreuder

1. Are we correct in assuming that the UI Engineers will be responsible for system design (like choosing of design patterns and data structures) and the actual implementation of our UI designs?

2. What will the expected process be for us to discuss and confirm design requirements with our client?

[arneschreuder]

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.

[arneschreuder]

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.

[d-azmanov]

This makes a lot of sense, thanks!

[reece-stephenson]

Would it be possible for the designers to get access to Adobe XD from our student emails?

[arneschreuder]

Err I am the wrong person to ask for that. XD

[Aramnand]

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.

[arneschreuder]

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.

[d-azmanov]

@COS-301/designers For those who haven't seen discord, there is a meeting this Friday, 9th March at 9:30am.

Meeting announcements

[arneschreuder]

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

[SeePeeYou]

@COS-301/designers There's a meeting today (16/03/2022) at 11:30 on Discord.

[SeePeeYou]

@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?

[SeePeeYou]

@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

[reece-stephenson]

Graduates website colour design discussion.

[reece-stephenson]

UP Logo Hex colours:

c48b3b (Gold)
d81630 (Red)
005bab (Blue)

[arlo216]

#01579B - CS Website Blue

[SeePeeYou]

[SeePeeYou]

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

[Aramnand]

Meeting minutes

[arlo216]

14 March [13:30-14:02]

13:30 colour palette discussed - proposed on Github
13:33 adobe xd not confirmed yet - individual software is currently being used as formal mockups have not yet started
13:35 Students and companies will have the same interface
13:36 universal header/footer/navbar. Search bars are confirmed to be feature specific
13:44 collaboration within features discussed
13:47 navbar will be the same for companies/students
13:53 navbar design brainstormed
14:01 Next steps: Final navbar/header/footer designs will be voted (universal elements). Next meeting Wednesday 11:30 to review UI Kit etc

Attendance: 16/20

• Mohamed Nizhar Aboobaker
• Sean Nkosi
• Tshego Manthata
• Musa Besmond Mabasa
• Reece Stephenson
• Matthew Marsden
• Steven Schormann
• Aryan Ramnand
• Daniel Azmanov
• Mumtaz Malik
• Charlotte van Zyl
• Joshua Brink
• Hamza Allimia
• Tariq Carrim
• Tertius de Jongh
• Risenga (RT) Sono

[arlo216]

16 March [11:30-12:32]

Tshego Manthata (@SeePeeYou) elected as Lead Designer

11:30 colour palette finalised
11:40 choosing finals of UI Kit
12:22 Mockups for Monday (Tuesday if necessary for IMY students)
12:25 Discussion regarding storybook
12:32 Meeting concluded - final decisions to be posted to github

Attendance: 17/20

• Matthew Marsden
• Daniel Azmanov
• Dylan Pietersen
• Aryan Ramnand
• Wesley Pachai
• Charlotte van Zyl
• Mumtaz Malik
• Hamza Allimia
• Tshego Manthata
• GO (Olumayowa) Shoderu
• Musa Besmond Mabasa
• Mohamed Nizhar Aboobaker
• Risenga RT Sono
• Reece Stephenson
• Steven Schormann
• Tariq Carrim
• Sean Nkosi

[Aramnand]

@COS-301/designers Based on an update by arne, final mockups will need to be done by Sunday.

[SeePeeYou]

21 March [13:00-13:55]

@COS-301/designers

13:00 We discussed the mobile friendliness of the components used throughout the webpages.
13:11 Overall progress of the designers, everyone is on track, most mockups have been uploaded onto the Design wiki.
13:15 @SeePeeYou(PWA Designer) to send @MatthewRobinMarsden(UI Kit Designer) the components she adapted to mobile for the UI kit.
13:25 We went through some mobile adaptations @SeePeeYou created for some pages and components,
https://www.figma.com/file/Cf4kPiiGSrvITHUzbtzydC/Untitled?node-id=0%3A1
13:30 PWA UI engineer and Designer to ensure that every webpage is mobile friendly.
13:45 Issue of concern: should every feature's design also include mobile design of their webpage? This will be answered by @arneschreuder in the questions thread but I will also update minutes with his answer.

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.
figma https://www.figma.com/file/Cf4kPiiGSrvITHUzbtzydC/Untitled?node-id=0%3A1
If you need any help with this please reach out to me on discord @SeePeeYou

Attendance: 9/20

• Matthew Marsden
• Daniel Azmanov
• Dylan Pietersen
• Aryan Ramnand
• Mumtaz Malik
• Tshego Manthata
• Musa Besmond Mabasa
• Mohamed Nizhar Aboobaker
• Tariq Carrim

[arlo216]

2 April [20:00 - 20:31]
20:00 Start of meeting
20:02 Matthew to meet with group tomorrow about universal components and mobile, lead designer will join to ensure mobile responsiveness
20:05 Our job as designers is to ensure uniform look with UI Engineer, make sure it is similar to mockup
20:07 Discussing working on repo
20:12 Discussion of who commits, correspond with UI Engineer to see where we can be of assistance
20:15 Mobile discussion, responsive design over different designs
20:24 Discussion of changing design if necessary, also agreed to speak to Tshego when uncertain about mobile as their feature is responsible for overseeing mobile adaption
20:31 Meeting done

[Aramnand]

Get individual feature wireframe by Monday.*
Next meeting at 10:30 Monday 14 March 2022.
Find out about what we could add to the wiki.
Add your points for this meeting on the GitHub discussion.
Sockets for the rest of the features for mobile development.
Discussion for Adobe XD taken place - Thabo will confirm with Stacey
We need to pair up with UI Kit Team - Next week.

[MatthewRobinMarsden]

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.

[d-azmanov]

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?

[arneschreuder]

Hi! So the designers design the UI Kit, the UI Kit implements

[arneschreuder]

@COS-301/designers the color palette you use has to be implemented in material themes. This is the UI engineers’ role

[d-azmanov]

@COS-301/designers - Wireframes designs

In 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.

[SeePeeYou]

@dylan2894 , I will update the student profile as per your request. Please message me at @SeePeeYou on discord regarding this matter.

[NYZCoder]

[dylan2894]

@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.

[MumtazMalik01]

Updated Student Blog Wireframe

[TCarrim88]

Admin Console [UPDATED]

[Aramnand]

@COS-301/designers Meeting today has been changed from 10:30 to 13:30.

[MatthewRobinMarsden]

@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

[MatthewRobinMarsden]

[d-azmanov]

Looks good! We can decide from these in todays meeting so we can all start on the proper mockups for our features.

[joshuabrink]

Potential Navigation

Top Navigation

Alternative Colour Pallet

Side Navigation

[joshuabrink]

Potential Logos

[reece-stephenson]

I liked this one that you posted with the navigation previously.

[SeePeeYou]

Other logos to consider

a.

b.

c.

• 174372 (primary)
• 182c75 (secondary)
• dc3545 (primary)
• d61b32 (secondary)
• c48939 (accent)
• 999999 (shadow)
  colour placement in the logo was determined by @ricecakesreece and I when we collaborated on Saturday 12/03/2022.

[d-azmanov]

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

[Aramnand]

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.

[arlo216]

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?

[arneschreuder]

@COS-301/designers remember to document the designs on the wiki here: https://github.com/COS-301/graduates/wiki/Design

[MatthewRobinMarsden]

@COS-301/designers Hello everyone, please fill out this poll by the end of tomorrow for the final UI Kit design.
https://strawpoll.com/polls/7rnzGkrLEgO

[MatthewRobinMarsden]

@arneschreuder Could you please look at what I have done on the wiki, just want to check if everything is fine.

[arneschreuder]

Looks good to me!

[MatthewRobinMarsden]

Thank you

[arlo216]

Headings/Subheadings/Body
Font, Colour, Size

[arlo216]

some ideas that I think are free - most of these are also available in some bold/italic version

[hamza-torres]

I'll be designing the 403 page, any opinions?

[SeePeeYou]

I really like this. Please share the font you used?

[hamza-torres]

The top fonts are from the Poppin family, the error message is in Brother 1816.

[MatthewRobinMarsden]

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

[TertiusDeJongh]

Here are the 2 layout designs I made for the reels/stories page... no colour yet, i just made a layout design so yeah...

[TertiusDeJongh]

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

[TertiusDeJongh]

Keep in mind, these are very basic....

[SeePeeYou]

FINAL DESIGN DECISIONS

@COS-301/designers These are universal elements that will be used throughout the website

[SeePeeYou]

Dropdown menu - Blue
Navigation bar - Blue
Buttons - Gray/Blue
Header - Example 2
Footer - Example 2
Cards - 6px boarder (0.325 rem) Bootstrap cards
Logo -

Primary colour palette

Background colour

font used in the header:
Segoe UI

[MatthewRobinMarsden]

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

[SeePeeYou]

Questions:

Please ask your questions here

[SeePeeYou]

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?

[arneschreuder]

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:

• The designers design both desktop browser size as well as mobile responsiveness.
• The UI engineers implement this accordingly.
• The Mobile/PWA team is responsible for everything that means the app is run on mobile. So although the designers will design it, how would they have known? You are responsible for reminding them, like hey, this thing has to run on mobile, can we please get mobile designs. That then does not mean that the designer and the UI engineer in the PWA team is obsolete. Since the designer will be part of the designs anyway and the UI engineer as well. But the UI engineer should also help all the other UI engineers to ensure their features are mobile responsive. This is just a part of the Mobile/PWA teams responsibility. The installation and the meta that goes hand in hand with a PWA is a requirement. Think of offline functionality, this is a requirement special to the Mobile/PWA team.

[MatthewRobinMarsden]

@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.

[arneschreuder]

So answer you. Please can you help elaborate:

earlier you mentioned how the UI Kit will solely be responsible for designs for mobile

Where did I say the UI Kit is solely responsible for designs 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

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.

would it merely be done by the UI Kit designer then reviewed by the PWA team

again:

• Designs (desktop and mobile): Designers
• Implementation of designs (desktop and mobile): UI Engineers
• Accountability for mobile: PWA/Mobile team. This team has a designer and a UI engineer, which represents their team in points 1 and 2 above. That doesnt mean that those roles will design and implement everything related for mobile. For example: 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. The UI Engineer, same thing. Will help with implementation, but ensure that it gets done. These roles have other responsibilities that are unique to the PWA/Mobile team. For example: Designer: Is there some banner to show you are offline? UI Engineer: How is data handled offline?

[arneschreuder]

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.

[MatthewRobinMarsden]

UI Kit Progression:

This thread showcases the progression of the UI Kit throughout its development.

First Draft:

Original document link: https://drive.google.com/drive/folders/1Zn1WLGapaXL-ddRL6HaUzjWKPAsotTZ2?usp=sharing
Preview link: https://xd.adobe.com/view/ceee85ec-16d8-434b-8bce-4544a7ca2e87-9bbd/

Final Version 1.0:

Original document link: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing
Preview link: https://xd.adobe.com/view/e70e1947-3b0d-499b-863b-fe8f1e1602fa-b25d/

Final Version 2.0:

Original document link: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing
Preview link: https://xd.adobe.com/view/b0091382-f5a7-4b7d-9e69-d532e626a77d-e55a/

Final Version 3.0:

Original document link: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing
Preview link: https://xd.adobe.com/view/66368712-a1b0-4d02-8966-90d1b5817658-3365/

Final Version 4.0 (Mobile Inclusion):

Original document link: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing
Preview link: https://xd.adobe.com/view/71851d74-ae93-4208-b7ea-146d761c4084-24d6/

Final Version 5.0:

Original document link: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing
Preview link: https://xd.adobe.com/view/eaea7342-093d-4872-a08e-6a8af4ceb848-bfb9/

Final Version 6.0 (Admin Mode Inclusion):

Original document link: https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing
Preview link: https://xd.adobe.com/view/9d6bc299-ed53-4d1b-9cd1-8539f28d943a-c838/

[GO-Shoderu]

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.

[MatthewRobinMarsden]

Here is a link to the UI Kit with svgs for the components.

https://drive.google.com/drive/folders/1s39ThrJ020QVkRg61iH-0Rd7BxV6-MdF?usp=sharing

[GO-Shoderu]

Thank you ...

[MatthewRobinMarsden]

UI Kit Requests:

This thread is for requests to add or change components in the UI Kit.

[MatthewRobinMarsden]

I will add green as well as a disabled version for the buttons. It should be up tomorrow.

[MatthewRobinMarsden]

it has been updated, check UI Kit progression for the link

[TCarrim88]

@MatthewRobinMarsden These are my components for the admin console, will you please add it to the UI Kit
https://drive.google.com/drive/folders/1dUI2hYZXzOCOzNU3irabpZa3a_pIlnxT

[MatthewRobinMarsden]

@MatthewRobinMarsden These are my components for the admin console, will you please add it to the UI Kit https://drive.google.com/drive/folders/1dUI2hYZXzOCOzNU3irabpZa3a_pIlnxT

I will look to add them to the UI Kit later today.

[MatthewRobinMarsden]

The admin component version has been updated, my apologies it took so long, please contact me if there are any issues with it @TCarrim88.

[d-azmanov]

Mock-designs discussion/questions

[d-azmanov]

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

[MatthewRobinMarsden]

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

[SeePeeYou]

Storybook Thread

@COS-301/designers Use this thread to discuss anything Storybook related

[d-azmanov]

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

[d-azmanov]

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)

[d-azmanov]

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!

[arneschreuder]

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.

[arneschreuder]

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.