Web Applications in Business

Hello! Throughout this entire semester, these posts have been showing my progress in researching, designing, and developing web applications! However, with the semester coming to an end, I wanted to take a look back on past designs that I made and didn’t post.

This was designed to be a cereal brand that uses natural, healthy ingredients. This was a strong contender for the design I wanted to further develop, however, I ultimately felt limited in what I could make as cereal only has so many unique possibilities and pages. In the future, I may look back into this design and finish it, as I really like the palette, navigation, and potential it holds!

Haus of German is up there with Mooslix in terms of design. The simple white navbar, off-gray background, and warm yellow-to-red gradient work so well together in my opinion. The idea behind this was a network for those learning German, offering services similar to Duolingo, as well as more formal connections and internship opportunities. Another nice little detail is that the background is black, yellow, and red which are the colors of the German flag! Again, this is another design worth coming back to in the future.

I was feeling pretty artsy on this one. One of my older designs at the beginning of my Web Development journey had cool animations and an interesting 3D logo. Looking back at it, everything feels very secular and isolated (no cohesive navbar or hero section) but it was meant to be more of a creative build anyway. Probably going to leave this one alone.

Oh. Oh my. This hero section is not bad, but everything else needs a rework. The navbar is practically non-existent, and the blue is so cold and static-feeling. If I go back to this, I’d probably go to a green, kill the left-side page list, and build a true navigation. Again probably won’t go back to this one in the foreseeable future, also because personal portfolios are not my favorite format of the website.

So, those were a few of the old designs that I may or may not come back to. I think they really encompass how I have learned in designing these applications. The older the designs got, the more holes there were in the structure, theme, and overall energy that websites so dearly need to bring. Hopefully, you found this interesting, and thanks for reading my design journey!

Hello! This is a really short post. Even though this is a web application, I felt that this design needed an icon as if it were a phone application to make it feel complete. So, this is what I came up with:

Simple and to the point in my opinion. Let me know your thoughts!

Hello again! The next topic is the e-commerce section of my design. I kept the same color scheme as the rest of the mobile application, and I tried to go with a similar, simplistic style to other successful ventures such as CashApp, PalPal, and Venmo.

This is what it looks like:

While I really like the idea of this page, there are still a couple of things that irk me. For example, should the logo and profile be aligned with the money up top? I decided not to because the iPhone has the top camera that blocks that section as can be seen here:

If I bring them down, it feels too low. Let me know your thoughts…

The other thing that bothers me is the checkout button. It just feels out of place for me, but I’m not really sure what’s wrong with it. Any suggestions would be much appreciated.

Thanks for reading and I’m excited to hear some possible fixes for these designs!

Hello! This is a short little post about the Focused search page. ‘Focused’ is the state of a page component when it has been pressed or is being held down. So, in this case, it is when someone has pressed the ‘search’ bar.

This is what it looks like:

Once focused, a few things change. The initial photo gallery becomes a ‘recent search’ list, which then would change into a ‘related searches’ list when typing starts. Think similar to Instagram’s search page. Next, a ‘cancel’ button pops up next to the search bar as the user needs a way to get from the ‘focused search’ state to the regular search page. Furthermore, there are three chips at the top for the ‘clothes,’ ‘users,’ and ‘locations’ search filters. Chips are displayed, and pressable buttons use symbols as opposed to words. These work because the icons are very intuitive and thus give simple options in a small amount of space, hence the name ‘chips.’ Lastly, the profiles are cartoony as opposed to real pictures. I figured it fit better with the artsy nature of a fashion platform. However, if this ever were to get into the real-world market, this detail would likely change to allow more user customization.

Hopefully, this was an interesting little post. Thanks for reading!

I’ve decided to go with a similar route that Instagram has taken, where the desktop is simple and accessible, and also is a scaled-up version of the mobile app. Now I have been working on a Home and Search page in the mobile app. Here is what they look like:

Of course, I don’t have many assets right now so the gray boxes will become pictures in the future. As you can see, the home page (first photo) has a profile icon that will take you to the profile page. On the other hand, the search page has a gallery effect and a search tab replacing the logo & profile pictures.

I am working on the focused search model right now, which will be shared soon. Thanks for reading, and leave any questions, comments, and concerns down below!

Hello! I have recently been designing a desktop homepage as I have previously discussed my focus on accessibility. There are still some things left to finish, but I am now getting to the point where I can wrap up my coding and write up my summative paper. Here is my first design:

This is still lacking the nav bar and the image on the right, but that is coming soon. I need to find a good, high res transparent png to fit the style I am aiming for, so let me know if you have any suggestions.

A slight variation of this page I made is:

This is more similar to Instagram’s style, where everything is more direct, despite looking slightly more cluttered. While I really like the hero of the last design, I feel like this variation offers a smarter marketing strategy as users can easily log in, as opposed to navigating to the page. Extra work for the user is always bad for businesses.

Let me know which design you like better, what graphics/visuals you think would work for the right side, and any other questions/comments you have!

Hello! This is a quick, next-day post to share my loading screen. This is a part of my new, shorter, more frequent posting routine. Again, this screen is meant to be clean, minimalistic, and hardly seen by users as it is just a loading screen.

Unfortunately, I cannot show you the awesome GIF animation as I can’t get the file out of the designer and into WordPress. If anyone has the skills to get a GIF file out of Figma, please let me know! Thanks for reading!

Long time no see. I had the flu for the past two weeks but I am back to full health and have been actively working on my web application prototype. Currently, most of the designs have been for mobile as the theme combines e-commerce and social media. I have decided on a new, piece-wise posting strategy that will consist of more concise and frequent posts. This post will consist of my design strategy and the home screen I have made for mobile devices for my web application. Here is the home screen:

This is the first step of many, and I look forward to sharing the rest of my design! I want to share now that I get a lot of interesting ideas and curiosity through the youtube channel “Hyperplexed” who ‘fixes’ the UI/UX of big media companies and gives good tips for clean design. That’s it for this post and I’m excited about the future. Thanks for reading!

Hello again! I have been working on React, Tailwind, and Vite code. React and Vite handles the environment of the web application, while tailwind focuses on simplifying the coding process for front-end design. These libraries allow me to utilize important tools, such as components and style sheets, which I learned to use through youtube tutorials. Specifically the Javascript Mastery channel.

Here is my file structure:

These are all the files that make up my web application.

Furthermore, the file that runs my web app is called App.js, which contains this code:

import styles from './style';

import { Navbar, Hero, Stats, Business, Billing, CardDeal, Testimonials, Clients, CTA, Footer } from './components';


const App = () => (
  <div className="bg-primary w-full overflow-hidden">
    <div className={`${styles.paddingX} ${styles.flexCenter}`}>
      <div className={`${styles.boxWidth}`}>
        <Navbar></Navbar>
      </div>
    </div>

    <div className={`bg-primary ${styles.flexStart}`}>
      <div className={`${styles.boxWidth}`}>
        <Hero></Hero>
      </div>
    </div>

    <div className={`bg-primary ${styles.paddingX} ${styles.flexStart}`}>
      <div className={`${styles.boxWidth}`}>
        <Stats></Stats>
        <Business></Business>
        <Billing></Billing>
        <CardDeal></CardDeal>
        <Testimonials></Testimonials>
        <Clients></Clients>
        <CTA></CTA>
        <Footer></Footer>
      </div>
    </div>

  
  </div>
);

export default App

Firstly, this file imports all styles and components necessary to run the app, which can be seen in the first two lines. Then I define my constant react app, where I add all of the HTML and components I want to use in the design. Finally, this code exports the app when it is run, which one can see on a localized host.

This is what it looks like so far:

This was made through a tutorial, in which the theme was a banking application. After completing this tutorial, I plan to create my own application through the skills I have learned thus far.

Final Questions to Answer:

• What has stirred your emotions?  Anything delightful, intriguing, frustrating, shocking?
  • I almost laughed out loud when I started learning components because they felt so familiar and different at the same time. To me, they felt to be HTML’s version of Java’s class system. You define a class in a file to be declared in other files. This made me super excited seeing as I found similarities and what I expected to be a completely foreign programming language.
• What new questions do you have about this topic?
  • Are there different kinds of components just as there are different kinds of java classes?
  • How can I host this web application?
  • What is the design process for the images and drawings used in web apps?
• What are you learning about your learning process? 
  • I never realized how conducive video tutorials are to me and my learning style. While it initially appears to just be repeating what someone else is doing on a screen, the comprehensiveness of typing out the code and learning what each part means is super useful.
• Review your blog posts so far. Have they opened up conversations or led to new learning? 
  • My blog posts so far have been mostly update posts. I think the posts that have opened up conversations or led to new learning are those with questions at the end for others to give input on. Maybe I’ll do more question-based posts to create more interaction with the readers.
• What has been the most helpful thing that has come from meetings with your content advisor?
  • I think the most important thing with meeting with my content advisors is creating structure around my learning since I can find myself wandering into a rabbit hole sometimes if I find a really interesting topic. And while I do still explore these interests, I do so while maintaining the focus of the study and even incorporating the new topics into the project itself.

That’s it for now! Thanks!

This quick interim post is meant to show my thinking as I go through my project. A new chapter post will be made in the next few days to report progress. As of right now, these are the questions I have:

1. What Type of WebApp should I try to design? (Portfolio, Ecommerce, Social Media, …)
2. Should I focus more on design, functionality, or try to balance the two?
3. Should I continue to learn pure Javascript, or try to incorporate other libraries like Dash, 3JS, etc…?
4. Comment any other ideas you would like me to incorporate into this web app!

Thanks, and be on the lookout for an update post soon!