SKhanmi:
ElGabi

https://aptlearn.io/courses/product-management-certification-course/

Came across like 2/3 others back then on Twitter, will post if I find them.

Thanks so much. I will appreciate that.

Oh wow, interesting. Thank you so much for this.

SKhanmi:


Not really, It's actually a simple concept, just see everything on a webpage as belonging to a container/boxes, including the text. And you can add properties( borders, margin, padding, content ) to those containers.

See the sample I attached below. This webpage can be divided into 6 major boxes as seen on the left, which can further be broken down into smaller boxes down to the text itself.

Then you connect everything by adding properties which enables you to have absolute control of the design of the whole webpage down to the smallest element and eliminate guesswork. If asked the margin between the ( discount price tag and the like icon ) and the (amount, product description and the plus button) or the padding between the bracketed content and its container, You can easily provide figures. Same goes for everything else.

SKhanmi:


Thanks, I can create web pages and connect them to a database and also modify the interactions, that's how far I've gone with bubble. Shelved it till later.

Yeah, I'm currently attending the bootcamp. You're there also?

Cool. Yea i attended his previous low code bootcamp and i have no idea on projects i can work on lol

Alphaman007:

Cool. Yea i attended his previous low code bootcamp and i have no idea on projects i can work on lol

Lol, you could create interactive mobile applications or a web portal. Many possibilities exist.

SKhanmi:


Lol, you could create interactive mobile applications or a web portal. Many possibilities exist.

Yea, kind of like a project to work on.

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

[size=8pt][/size]

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

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.

SKhanmi:


Thanks, I can create web pages and connect them to a database and also modify the interactions, that's how far I've gone with bubble. Shelved it till later.

Yeah, I'm currently attending the bootcamp. You're there also?

Hi, also interested in learning bubble, is the million labs good enough to start with, we’re you able to learn enough with them?

Nobellady:


Hi, also interested in learning bubble, is the million labs good enough to start with, we’re you able to learn enough with them?

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.

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.

SKhanmi:


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.

Thanks….will sure go through them

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 I'll need to go back and watch the video on this zoom problem again. The link reverts to my browsers screen ratio which is not what I originally designed it with. The tab version looks good, and the mobile is better viewed on a phone so one can get a realistic sense of the dimensions.

Just need to figure out the desktop zoom settings.

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.

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

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 November will make it a year I started on this path.

Time to put everything to test and round up, still got other experiments I'll like to conduct in other sectors.

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.

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.

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

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 , in webflow o! I just smiled, smh and closed the tab. My eyes no dey see evuls.

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.

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.

Congrats boss. Your consistency is amazing.

SKhanmi:
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.

I am a not so newbie in UI, i'd love to work with you to better my skills.

Emeraldfynest:
Congrats boss. Your consistency is amazing.

Thanks boss.

general111:
I am a not so newbie in UI, i'd love to work with you to better my skills.

No problem, my email is on the 1st page. You'll have to be specific on which area though.

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

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

Are you taking a Joseph Bredan course ??

Ignore, the guy is good, a friend of mine took the same course

qtguru:


Are you taking a Joseph Bredan course ??

Yeah boss, Learnt webflow from his bootcamp. He's good.

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 , I'll rather name them afterwards or......not!

Did only one today,Looks great on mobile.

Copied & modified sleekcode design template.

Remains 2.