Stats: 3,190,106 members, 7,939,468 topics. Date: Wednesday, 04 September 2024 at 06:27 AM |
Nairaland Forum / Science/Technology / Programming / 2022 Experiment 1: Becoming A Product Designer (10776 Views)
17 Year Old aspiring Frontend Developer / Product Designer / Product Designer - UI /UX / A Thread On My Experiment With Reinforcement Learning & Artificial Intelligence. (2) (3) (4)
(1) (2) (3) (4) (5) (Reply) (Go Down)
Re: 2022 Experiment 1: Becoming A Product Designer by ElGabi(m): 11:38am On Oct 03, 2022 |
SKhanmi:Thanks so much. I will appreciate that. 1 Like |
Re: 2022 Experiment 1: Becoming A Product Designer by Emeraldfynest(m): 11:58am On Oct 03, 2022 |
Oh wow, interesting. Thank you so much for this. SKhanmi: 1 Like |
Re: 2022 Experiment 1: Becoming A Product Designer by Alphaman007: 11:59am On Oct 03, 2022 |
SKhanmi:Cool. Yea i attended his previous low code bootcamp and i have no idea on projects i can work on lol |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 1:38pm On Oct 03, 2022 |
Alphaman007: Lol, you could create interactive mobile applications or a web portal. Many possibilities exist. |
Re: 2022 Experiment 1: Becoming A Product Designer by Alphaman007: 1:54pm On Oct 03, 2022 |
SKhanmi:Yea, kind of like a project to work on. |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 12:51pm On Oct 04, 2022 |
Got to the HTML& CSS section, skipped many parts since I already know how to create basic pages, he didn't also go deep that much and I understand, before the students start grumbling and loose focus. Some folks start getting jittery when they see lines of code, I don't blame them, remembered the mass failure when we started programming back in uni ![]() But the Section and div tags got my attention, he related them to the exact way one uses layouts for elements and sections in figma. You create a frame/body first, sections second, add your grid next and finally add containers that have your content. That translates to Head/Body> Section>Div>contents in HTML. In web.flow that translates to Body> section>container/div>content All shown below. The 4th one is me playing around with the layout to create 2 card containers with content and 3 image containers ![]() Yeah that meme in the div box is showcasing my mood. 4 more videos to catch up and I still have to outbound today ![]()
|
Re: 2022 Experiment 1: Becoming A Product Designer by refaelnix: 3:32pm On Oct 04, 2022 |
[size=8pt][/size] |
Re: 2022 Experiment 1: Becoming A Product Designer by mesheal7: 3:47pm On Oct 04, 2022 |
Hello Guys, Not to derail this thread, but we are seeking a technical writer with some WordPress experience for a virtual position. Learn more and apply here - https://www.nairaland.com/7366263/hiring-technical-writer-some-wordpress |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 8:44pm On Oct 05, 2022 |
Finally caught up with the web.flow section. We learnt how to make responsive units, lists, link blocks, how to add image, video and animations. These are stuffs I already experimented with before watching the course video, they are easy for any tech person who has had some experience with adobe cc or corel draw to learn easily. The interesting parts were about transitions, transforms, states and interactions especially when creating forms. Need to watch that part again and practice. So we were given a task to design a website in web.flow using a template already designed in figma. Normally, I'm supposed to watch the tutorial video and try following the steps but I was like, why not try jumping straight into designing with what I knew already? It took me 5 damn hours! If it were a figma design task, Definitely sure I wouldn't use up to 20mins. I was able to duplicate the visual aspect but devoid of any interactions I'm sure Brendan must have added, but at least it's a confidence boost, after all, I started learning web.flow yesterday. I'll now go and watch the video proper and make modifications where needed. Now I understand the importance of classes especially when naming your contents and when and why to detach them so as not to end up frustrated, I duplicated a section and forgot to detach the major sections, gone halfway only to notice the parent section was also getting modified as I edited the child section(duplicate) ![]() Learning about the box model, layouts, flexbox and classes across figma & html/css really made things easier. You can breakdown everything down to its basics in your mind. Compared to my little knowledge of bubble, I think web.flow is easier/faster to learn or should we say more flexible. Must be the pop up for modifying properties when designing in bubble, you have to fill in a lot of stuffs alongside all the time when designing while web.flow copied the photoshop experience, familiar layout, drag and drop first, then go to the sidebar to modify properties. Come to think of it, that's a user experience. Anyway, this are the web.flow website designs below. 1 Like
|
Re: 2022 Experiment 1: Becoming A Product Designer by Nobellady(f): 9:41pm On Oct 06, 2022 |
SKhanmi: Hi, also interested in learning bubble, is the million labs good enough to start with, we’re you able to learn enough with them? |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 12:28am On Oct 07, 2022 |
Nobellady: Yeah, make sure to register on their site so you can watch previous videos, it's kinda basic though, you won't be building anything complex..Brendan has a class starting by 24th also, He'll be teaching bubble, you might want to sign up for that, his method is faster & more indepth & even total noobs can catch concepts easily. And you'll have 3 live projects to showcase at the end. |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 1:05am On Oct 07, 2022 |
Got around to watching the main webflow video and I was right, just had to tinker with my initial design a bit to perfect it. Then design it across 3 breakpoints, desktop, tablet and mobile view. Na here the gbege start, I already finished the desktop and tablet design only for the arrangements I made in mobile scattered everything. Went to read the FAQs but my fatigued brain couldn't not comprehend the technical jargons there, I just dey look screen. Damn! Been on this since 12pm. Went to the discord group and I can see it's a major issue, seems designing in any workspace ratio size apart from the one web.flow provides you automatically according to your device causes this. MacBook 13" users go see shege. Started again, only for that Yeye mtn mifi deciding to die at this crucial moment & I've finished the data on all my other devices. The Airtel mifi battery lasts longer but my data has Been mysteriously halving, na so I Japa. Phew! My T560 can last till tomorrow evening, got a backup laptop powerbank laptop & sleep has abandoned me but no internet until that mifi tops up. Need to get an imported universal mifi with a standard battery. Options & backups are sancrosant in this tricky country. Guess this is where I'll tell that alaye spirit to calm down. This body has an excuse to browse until I doze off. We'll continue tomorrow.
|
Re: 2022 Experiment 1: Becoming A Product Designer by Nobellady(f): 12:48pm On Oct 07, 2022 |
SKhanmi:Thanks….will sure go through them |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 4:00pm On Oct 07, 2022 |
Finished my designs, dotted my T's and crossed my I's. Previewed it in the web.flow browser and copied the link for submission. Then I remembered my usual routine, test links before you send. Sometimes they might not resolve, require permissions or have issues. Think I've had such issues with figma, lookback, google drive and docs. Sighs! Guess checking for accessibility and responsiveness on web.flow is another course on its own ![]() Just need to figure out the desktop zoom settings.
|
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 4:08pm On Oct 07, 2022 |
Taking time off though, been invited to speak on UIUX at a small tech onboarding event for noobs. Hmmm. Guess it's time to read my own thread again. After this, I'm avoiding my laptop for the next 3 days.
|
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 10:33pm On Oct 10, 2022 |
Second web.flow assignment, starting to get the hang of it. Added states and interactions this time. Missed the card containers though & other buttons interactions, won't take up to 5mins to fix jare, brain is on freeze tonight. Make I go sleep. Mofe trabaye..... Screen record below. https://vimeo.com/758891329#t=2s Update: Finished all screens (web, tablet and mobile), made it responsive also. I'll try and look for a website that looks harder to design and try my hands at it. For now, let me go and finish the UX audit and research videos. We've entered the UX aspect of the bootcamp. https://vimeo.com/759295965/d30fab6c24 1 Like
|
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 11:53pm On Oct 11, 2022 |
Next topic was about; UX Auditing using Jakob Nielsen’s 10 Heuristics Laws and the practical steps to take before and while auditing a website or mobile app and a reporting format. Basically UX auditing is about finding the usability problems in a UI so they can be fixed according to recognized usability principles. Very interesting, One could audit nairaland / other websites by using the above laws and find issues which can be grouped according to their severity, can be a long process depending on the number of screens or webpages one has to go through, testing everything. Just the way the doctor runs diagnostics tests first before knowing what to tell a patient. Time to find a website to practice on, I'll post the report later. Need to finish up the other reports and start posting, already have knowledge of UX writing, story telling and how to put oneself out on sm and linkedin, got goals to meet up this month ending. I've had enough of trainings, bootcamps and online courses ![]() Time to put everything to test and round up, still got other experiments I'll like to conduct in other sectors. 2 Likes |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 11:15am On Oct 13, 2022 |
Just got this in my mail today but nah, I'm done with trainings this year, else would have gone for the cloud certification. Might be useful to others. They're offering scholarships for cloud developer, Devops engineer, data analyst and web development certifications. https://nanodegree.alxafrica.com/ Zuri is also accepting applications, if you're interested in getting a UIUX internship. |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 8:20pm On Oct 18, 2022 |
We've gotten to the end of the bootcamp, I haven't watched the last batch of videos though. Feeling lazy. Went through our group project and others and it dawned on me that my perfectionist streak might eventually be the end of me. I don too waka this streets, I should have started applying for jobs since I finished my first case study from Udacity aswear but imposter syndrome was giving me close marking everywhere. Must I know everything finish? The project was something I could comfortably handle from start to finish and complete within a week if I hypnotize myself into one of my peculiar shotgun phases of motivation but nah, I'm laying low and observing, an ordinary team member should not usurp the leader, don't want to deprive others who are new to all this also of trying their best and feeling overwhelmed. I'll like the leader to have their own experience like I had mine while leading a remote team, it would help them to identify and create good teams in the future. I know there would always be fence sitters but in the end, they are only hurting themselves. Just as a backup though because of project time constraints, I'll complete things ( already did some advance steps ) and hold back, if we start nearing deadline without substantial progress, I'll reach out to the team lead to group the serious actively contributing members together & help fast-forward progress. I'm sure all our inputs combined would bring about some good results. Going to sleep early today, Nice. 1 Like |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 3:12am On Oct 21, 2022 |
One out of like 20+ websites I'll be practicing on, This one is a redesign. Steps: 1. Open practice website 2. Use css peeper to get all needed requirements 3. Duplicate and modify in figma 4. Duplicate using webflow. That last step took four hours though, ran into a quagmire while trying to fathom out how to add a color overlay to the reviews section. You can see I still really didn't get it right. Still doesn't look as smooth as the figma design, might be the font or the view height I used for each section. Well, this is my third, we'll see by the time I get to 10 templates redesigns. First image is the figma design. Link to the webflow video: https://vimeo.com/762491093/5348e615ed
|
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 11:01pm On Oct 21, 2022 |
Changed colors on two sections and missed some stuff. Yeah I know. Shit happens when you're overtired. Already have the next practice website lined up, funny enough I stumbled on it through some upwork job listing, it wasn't in my initial list at all. They wanted it as a standard for 20 webpages they wanted designed for $100 ![]() Back to the website I was talking about, the first thing that came to mind was the lack of whitespace (even the device margins are not left out) and the info overload. Not to mention that use of middle alignment in almost all the elements leaves one with the feeling of something beautiful but chaotic. The designers are good though, I'm suspecting budget constraints for them to design it like that. Anyways I'll be coming up with my own webflow design, this one would definitely be a bit tasking, it has constantly playing background videos, animations and looks like an encylopedia website. Would definitely learn new things by force ![]() As for the bootcamp project, progress has been good, almost everyone is trying their best. We should be done before sunday. Time for me to start going back and wrapping up the loose ends of my knowledge and places I deliberately skipped/ignored so I can finesse my portfolio. Been feeling kinda lazy lately.
|
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 7:11pm On Oct 29, 2022 |
Finally got the cert, no more trainings till next year ![]() In the meantime, I've been polishing my UI and webflow skills with some selected websites, while going through the UX aspects of the course again to cover previous aspects that weren't clear. You can see the snapshots below, the one with multiple shots is actually a website landing page with a background video playing on the loop. once I'm done with the figma design, I'll replicate them in webflow. Already assembled 5 websites yesterday evening, would put finishing touches this evening, that's a plus, could hardly finish a single website design in a day before. Only 2-3 has like a complex layout though. Still not a problem. I see some animations and interactions and get non-plusssed on how to implement such ![]() Take this first bank page as an example, they're using a slider of some kind. https://www.firstbanknigeria.com/getfirstmobile/#5 Better get back to my designs.
|
Re: 2022 Experiment 1: Becoming A Product Designer by Emeraldfynest(m): 1:43pm On Oct 30, 2022 |
Congrats boss. Your consistency is amazing. SKhanmi: 1 Like |
Re: 2022 Experiment 1: Becoming A Product Designer by general111(m): 9:36am On Oct 31, 2022 |
I am a not so newbie in UI, i'd love to work with you to better my skills. |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 4:59pm On Nov 01, 2022 |
Emeraldfynest: Thanks boss. 1 Like |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 5:01pm On Nov 01, 2022 |
general111: No problem, my email is on the 1st page. You'll have to be specific on which area though. |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 5:14pm On Nov 01, 2022 |
Still cooking... Landing pages with a lot of content are a nightmare. They better have a content maker where I'm going or pay higher if I've to produce it ![]() I'm using the websites below as samples just in case anyone else wants to practice, hope this bot no chook eye for my mata https://adamtaylorpictures.com https://www.lakewoodplumbing.com https://apotheosismediallc.com https://flatironsplumbing.com http://www.digitalvisuallab.com https://www.blueskyescapes.co So I reached out to one of my ux guys for advice on my UX Job search and he gave a few pointers. -Use a personal site (webflow/notion/wordpress) to display your portfolio instead of behance/dribbble, -Focus more on case studies, - Look for internships, -Referrals are golden or you use the I know the HR/CEO, person papa etc card, -Or go the freelancing route. Seems faster. Hmmm
|
Re: 2022 Experiment 1: Becoming A Product Designer by qtguru(m): 5:15pm On Nov 01, 2022 |
SKhanmi: Are you taking a Joseph Bredan course ?? |
Re: 2022 Experiment 1: Becoming A Product Designer by qtguru(m): 5:15pm On Nov 01, 2022 |
Ignore, the guy is good, a friend of mine took the same course |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 5:31pm On Nov 01, 2022 |
qtguru:Yeah boss, Learnt webflow from his bootcamp. He's good. |
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 1:44pm On Nov 04, 2022 |
Been feeling lethargic this past 2 days, but one has to be consistent to keep up the momentum, I'll still take a break though. Done with 7 sites, I just need to assemble the last 3 together. Then I move their assets to webflow. I need to focus more on interactions and animations. Last pic, just to arrange the elements, combine and shift to the main frame, My mind no gree, Damn! By the way, If you're seeing frame 102,333 etc everywhere, yes I know it's good design etiquette to name your layouts but that slows me down to a snail pace ![]() 1 Like
|
Re: 2022 Experiment 1: Becoming A Product Designer by SKhanmi: 11:36pm On Nov 05, 2022 |
Did only one today,Looks great on mobile. Copied & modified sleekcode design template. Remains 2.
|
As A Computer Science Student,which Language Should I Start Learning / How To Make Money From Developing Software Using Vb Or Java / Html,css,javascript Group Tutorial
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 83 |