Blog Design Web Design Debut

The first web page I designed is as follows:

I have been in this industry for 7 years, and have been doing programming and project management. I have never been involved in art design, but I am exposed to it every day, and I have been tortured by the compatibility of IE6, Firefox and other browsers when nesting pages. As a result, I have acquired a certain foundation in web design. With the comprehensive revision of the company's website, I finally made up my mind to create a blog interface myself.

After all, I have done programming before, so the aesthetics of the interface, especially the code, cannot be too shabby. So I referred to many awesome CSS frameworks and chose a lightweight one to start with.

All things are difficult at the beginning. I still don’t quite understand what Div+Css layout is, but I roughly know that it is just floating the layers here and there, so I started floating based on the framework. Left and right structure, two-column layout, fixed width and height, left and right floating, the page frame soon appeared, it seems quite simple.

The second step is to fill the frame with content. After putting the avatar in it, it doesn’t look good, so I thought, let’s make it rounded. However, the avatars of the blog are uploaded by users, and users cannot make rounded corners by themselves. It seems that I still have to use style control. I checked on the Internet, my God, CSS is so troublesome, and I have to tinker with 4 DIVs for a long time. I gave up and looked for a ready-made one. Google searched and found "Rounded Corner Frame Component - Bingjifeng". I saw that the code was in JS, it was made in China, and it was well written. It provided a variety of ways to implement rounded corners and was easy to call. So I used it, and the problem of rounded corners of the avatar was solved.

Step 3: Tab effect. How to implement the category switching of Blog using the tab effect? The answer is ------- Jquery. Who would want to experiment with it themselves when you are used to using the ready-made ones? I searched online and came up with a lot of them. I screened and selected them, and finally decided to use a simple one that could achieve switching and fading effects. I threw the code in and made slight adjustments to the style and pictures. Oh, it’s incredible. Am I too talented or is it just that simple?

Step 4: Add some dynamic effects. Personally, I prefer fancy things. I am happy to see flying effects on the website, but what can be fancy in the blog? There is really nothing. So, let's make a small effect for the team members at the bottom. As the saying goes: who wants to do it by themselves when you are used to using ready-made ones? I opened the Jquery special effects that I sorted out before, and finally found one that can be used. The effect looks pretty cool. This thing looks good, but it is quite difficult to put it together. But I finally got it done. Let's take a look at the effect.

Step 5: Registration, login buttons, lists and other content. This is easy and can be done in no time. Then I started to challenge the compatibility of other browsers without IE7. As soon as IE6 was opened, damn, the page became unrecognizable and horrible. What should I do? Is the interface I made so fragile? No, I opened the CSS knowledge base, and started learning about the 3-pixel bug in IE6, the special styles of Firefox, and so on. After I finished learning, I found that it was already the afternoon of the next day. I couldn’t learn it in vain. I changed it. I adjusted the style bit by bit. Finally, I finished it on the third night and breathed a sigh of relief. The performance of several browsers was basically the same. It took me 3 and a half days to develop one page, which was far less efficient than our art design. However, there were still many details that were remarkable. I felt an inexplicable sense of accomplishment and cried with joy when I looked at my first masterpiece!

As a web programmer, it is sad not to know CSS and JS, and as an artist, it is equally sad to be indifferent to programs and JS frameworks. There is a lot of work to be done and a lot of details to be handled in the intersection of programs and art. It is because of this realization that the author bit the bullet and worked on the interface. In the end, facts also proved that the interface designed by people who are familiar with programs, because it takes into account the difficulties and unfavorable factors that programmers will encounter when nesting pages, and optimizes them in advance, so that programmers can get twice the result with half the effort when nesting codes, and saves a lot of development costs and debugging time. Now's companies are paying more and more attention to collaboration and connection. If you want to fill the blank area of ​​connection between programs and art, you need colleagues to get involved and research more in each other's fields, and at the same time have more understanding and support. Don't underestimate this little progress, it may bring you a qualitative improvement.

At present, the interface program has been nested and put online for testing. The access address is http://blog.transnal.com. Welcome everyone to come and criticize!